Artist Instructional Template Guides

Kyra Perl · Jul 26, 2020

*i will be cleaning these up to be more precise and easy to follow, the more i make them the more i realize starting stuff could be smoother! practice makes perfect-- let me know what confuses you so i can know what needs tlc

yooo, title is self explanatory.
Pm me with questions-- lemme know if you accidentally edit a doc-- and do poke if you'd like to have a concept broken down in a step-by-step doc.

I'm odd. I enjoy this.

Cheers.

Table of content (Yes, this works for the whole thread!)
Basic Bio Template Guide
Intermediate Post Template Guide
Borders
Color and Transparency
Tabs
Box shadow
to come:
margins, padding and how to use them to manipulate things
all things background
positioning
special concepts

Kyra Perl · Jul 26, 2020

Basic Template Guide

New to templates? Overwhelmed?
Check out this guide, do the steps-- bam! You got your own basic one no stress.

What it looks like:

Name

Biography Appearance +/- Possessions Threads

Name:
Species:
Age:
Gender:
Height:
Weight:
Homeworld:
Faction:
Rank:
Insert backstory here.
Insert appearance details here.
Strengths and Weaknesses

Insert strength and weaknesses details here.
Insert possession details here.
Insert threads here

Back to Thread Table of Content

Kyra Perl · Jul 26, 2020

Instructional Div Guide. Difficulty: Moderate.

This is less of a template and more of an instructional guide.

This is a little more advanced than before-- I break down every aspect and explain how you can make it your own. If you have questions, feel free to pm. It's not as overwhelming as it seems once you understand what each part does!

For reference, the div I use for this example looks like this

Lorem ipsum dolor sit amet, ipsum error no nam, amet elit ius et. Cu quo clita debitis denique, ancillae splendide te usu. Falli graeco admodum no duo, hinc latine saperet te sit, adhuc timeam cu vim. Ea eum quaestio adipiscing, dicta audiam suscipiantur ei mel, eum aeterno fuisset in.

Veritus phaedrum gloriatur at vel. Quo modo iriure volutpat at. Ne per platonem forensibus voluptaria, an nostro expetenda intellegebat usu, stet graece ei mea. Id iudico salutatus euripidis sit, vel facete audiam commune cu. Sed ad alia ignota eligendi, lorem feugiat sapientem et mel. Eos ad modus appareat pertinax, per error dignissim at, ea est idque disputationi.

Eu his officiis oporteat gubergren, eos error epicuri eloquentiam ne. Praesent constituam cum at, has iisque phaedrum ex. Ad sea laoreet accumsan. Ut amet euismod adolescens sed. Meis petentium usu at, iudicabit vulputate duo et, sed ut autem civibus.

Et duo vide erat singulis, id mel eirmod graecis maluisset. Maiorum concludaturque mea et. In quidam iracundia sea, ex vix assum solet rationibus, in vulputate reformidans sed. Ne cum eros summo antiopam, tollit partem malorum sit ut, ex sea error epicuri. Illud splendide ut vis. Ut mea nulla timeam, id nec placerat patrioque, eros congue laboramus vis an.

His cu duis tation ullamcorper, nam liber affert singulis ut. Quot aeterno reprimique id mel. Ea est eligendi convenire, vix legimus scriptorem an. Vim et elit erat assueverit. Elitr quaeque intellegam et nec. No his habeo posse aeterno, falli possim gloriatur mel te.

Back to Thread Table of Content

Kyra Perl · Nov 25, 2020

Now that you got the basics down, lets talk about something that really helps you spruce a template up:

Borders

Table of contents:
Type
Color
Size
Radius
Border images
Short vs Long hand coding
Mix and Matching

Types

There's many different types!

solid, double, dotted, dashed, groove, ridge, inset, outset

Code:

border-style: double;

These look very different depending on certain things (size, your background, and the shape you chose for your border edges). Don't be afraid to experiment!

Return to top

Color

There are so many ways for you to write color code, but since this is not a post about color I'm going to stick with the basics. Go to this website and find a hex color code you like (#xxxxxx)

Code:

border-color: #000000

^that's black!

Another neat trick is you can control the transparency of your border. For Hex color codes you just stick the '99' on at the end of it. You can decrease the number for more transparency.

Code:

[div=max-width: 800px; background-color: pink; border-radius: 75px; border: 5px solid #00000099; padding: 40px; margin: 30px; ]
[/div]

As you can see my black border (#000000) turned into a dark pink by being made transparent. This transparency trick has a lot of applications and there's a lot more that goes into it, but for now, just know that you can use the '99' trick on your hex color codes to manipulate your border for cool effects, like this:

Return to top

Size

This one is easy peasy:

Code:

border-size: 3px;

Increase your number, get a bigger size.

Return to top

Radius

Things get fun with radius. Do you want rounded corners or square corners?

If you just want one shape you can write it like:

Code:

border-radius: 0px;

0px is a square corner. The higher the number, the rounder the corner. Yes, you can turn the div into a full circle. No, I will not be showing that here xD

However many people like to mix and match the corners, like in my example above. To do this you need to use a different code:

Code:

border-radius: 0px 15px 50px 90px;

I've slowly increased the number so you can easily see which side they each adjust, but for easy reference they order like this: Top left, top right, bottom right, bottom left

Return to top

Border Images

I've only had mild success with this, but it is possible. You can take an image and put it in as your border.

Tips: It all comes down to the picture. Pick one with an interesting top, because that's all that's going to show. OR pick one that is small and easy to repeat as a pattern. I haven't had the gumption to fuss much with this but I'll give you the code that worked for me.

Code:

border-top: 10px solid ; border-bottom: 10px  solid; border-right: 1px  solid; border-left: 1px solid; border-radius: 75%; border-image: url(https://i.imgur.com/0mURjLz.png) 40 stretch;]

Good luck!

Return to top

Short vs Long hand coding

There's typically a short way and a long way you can write code to get a task done. There are pros and cons to both.

Short hand coding is faster, cleaner, and easier to read. However it often limits the customization you can do.

Long hand coding is tedious, easier to mess up, and can easily overwhelm a newb if something goes wrong. However, you can do so much more with it.

I would suggest being flexible between the two and always stick to short hand if you don't need to customize. Clean code is happy code. Here's what they look like for borders:

Long Hand

Code:

border-size: 5px;  border-style: solid; border-color: #000000;

Short hand

Code:

border: 5px solid #000000;

If you feel confident with that, you're ready for this final step!

Return to top

Mix and Matching

The best part about borders is their flexibility. You can take EVERYTHING you've learned about and mix and match it to your pleasure. Here's some examples.

This is done through a new combination of short and long hand:

Code:

border-top: 6px double pink; border-left: 1px solid green; border-right: 10px dotted blue; border-bottom: 7px groove purple;

Tell us what you want for each side (top, left, right, bottom) using that exact pattern above and you're golden. Go experiment, there's a lot more out there for you to discover!

Have fun!
Return to top of this post
Back to Thread Table of Content

Kyra Perl · Nov 25, 2020

before we get any further lets flesh out a rather complicated basic

Color (and how to make chit transparent affectively)

Table of content
Different types of code
Places you can colorize
Transparency

Different types of color code

There are three ways to write color.

Color name- Modern browsers support 140 named colors. Click here to see the list. You cannot deviate from it.
hex code- The '#xxxxxx' color option.
rbg code- The rgb(xx, xx, xx) color option.

At first these all seem similar, but they interact differently with certain extra customizable features. For now just understand the difference. When it comes to the coding, they all are written the same (using black as my code example)

Code:

color= black;
color= #000000;
color=  rgb(0, 0, 0);

Back to the top

Places you can colorize

Yeah, it's intuitive, but sometimes you get brain farts so I'm going to spell it out anyway

Background

Code:

background-color: teal;

Text

Code:

color: teal;

Borders

Code:

border-color: teal;

Shadows

Code:

box-shadow: teal;

there's more but im pulling a blank, i'll add to it as i go about it

Back to the top

Transparency

This one is a complicated witch, and the real reason I decided to make a section on colors. Any place you can stick a color, you can turn it transparent to boot. There's many ways to go about achieving transparency, each a little quirky.

The most basic is Opacity

Code:

opacity: 80%;

On a scale of 1-100, how transparent do you want it to be? Pick your number and insert. Done. But wait. Here's it's quirk:

Code:

[div=max-width: 600px; background:url('https://i.imgur.com/T9vjySy.jpg'); box-shadow: 10px 30px 90px 20px #000000; border-size: 5px outset #d5985c; border-radius: 35px; padding: 20px; ]
[div= max-width: 400px; height: auto; background-color: #000000; opacity: 50%; padding-top:10px;padding-left: 50px;padding-right: 50px; padding-bottom:20px;]
[img width='300px']https://i.imgur.com/9oTGgtD.jpg[/img]
[/div][/div]

Everything that occurs inside that div is also rendered translucent. There is no way around this. It's not so noticeable if you just use text, but for pictures it renders this method implausible.

You also cannot use it to turn borders and shadows translucent.

The next method is via Hex code

Code:

 #00000099

All you do is stick '99' on at the end of the hex code and bam! Transparent. It works everywhere.

It's quirk: This one goes on scale of 1-140 (I think?), but numbers past 99 do not work. This means that the darkest you can get a transparent slide with this method is this:

Code:

[div=max-width: 600px; background:url('https://i.imgur.com/T9vjySy.jpg'); box-shadow: 10px 30px 90px 20px #000000; border-size: 5px outset #d5985c; border-radius: 35px; padding: 20px; ]
[div= width:auto; height: auto; background-color: #00000099; padding-top:10px;padding-left: 50px;padding-right: 50px; padding-bottom:20px;]
[/div][/div]

This means that on really bright photos, this might not be dark enough/the best choice for you. There are work arounds for this (doubling up your translucent div boxes), but if that just sounded like gibberish to you, try this next option instead.

The RBGA method

Pros: It everywhere works no sweat.
Cons: Might make your head spin if you're new. You gotta play and build this code yourself.

It works like this: An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque)

So!

Step one: Go here.
Step two: Pick out your color and grab the RGB code attached to it.

Black's = rgb(0, 0, 0)

Step three: Stick the level of transparency you're looking for at the end of it.

rgb(0, 0, 0, .8)

Code:

[div= width: auto; height: auto; background-color: rgb(0, 0, 0, .8); padding-top:10px;padding-left: 50px;padding-right: 50px; padding-bottom:20px;]
[/div][/div]

Look at that! It works perfectly for a bright picture.

There's so many fun uses for this trick, go out there an experiment!

Back to the top of this post
Back to Thread's Table of Content

Kyra Perl · Jan 17, 2021

Tabs

im short on time, but after a few questions today imma drop a really rough tldr on tabs-- hope it helps

table of contents
Code
Shorthand
Tabcention
Common questions

they look like this:

Overview Biography Strengths and Weaknesses

Content 1
Content 2
Kyra is the best

It's click click fun!

code is simple:

Code:

[tabs]

[slide_header] slide 1- you can insert a picture or use this spot to name it here [/slide_header]
[slide] C O N T E N T [/slide]

[slide_header] slide 2[/slide_header]
[slide] C O N T E N T [/slide]

[/tabs]

NAME slide 2

C O N T E N T
C O N T E N T

Important! You start the tab code with:

Code:

[tabs]

[/tabs]

^ this starts the row of slides

too add more slides to your row, add more:

Code:

[slide_header] details [/slide_header]
[slide=NAME] C O N T E N T [/slide]

DO NOT add more of the

Code:

[tab] [/tab]

unless you want to start a WHOLE NEW ROW of slides.

Here's an example on how to make the name be a different color/font/size
(font and size are applied the same way)

Biography Biography Biography

hi
hi
hi

Code:

[tabs]
[slide_header][color=#c51c00]Biography[/color][/slide_header][slide]
hi
[/slide]
[slide_header][color=#c51c00]Biography[/color][/slide_header][slide]
hi
[/slide]
[slide_header][color=#c51c00]Biography[/color][/slide_header][slide]
hi
[/slide]
[/tabs]

There is also short hand code:

If you don't want to do anything fancy to your Slide name you can forgo the 'slide_header' and just use

Code:

[slide=Slide Name]
Content
[/slide]

Tabception:

You can do slides inside slides. I lovingly call it Tabception

- to do this you need to start a new tab row inside your slide
*NOTE - its VERY important you make sure you end every 'tab' and 'slide' that you open with it's respective '/tab' '/slide'. This can become a mess fast if you don't, but if you do mess up don't stress. Start from the beginning and work down, making sure everything is paired and deleting any extra/ mistakes.

possessions Bio Strengths

Sword Boots Necklace
- picture of sword
- Look they have pockets
- Nothing special, i just like to pretend I actually own it
blah blah
One more for good luck

Code:

[tabs]

[slide=possessions]

[tabs]
[slide=Sword]
picture of sword
[/slide]
[slide=Boots]
Look they have pockets
[/slide]
[slide= Necklace]
Nothing special, i just like to pretend I actually own it
[/slide]
[/tabs]

[/slide]

[slide=Bio]
blah blah
[/slide]

[/slide=Strengths]
One more for good luvk
[/slide]

[/tabs]

Common questions

where can they go: anywhere

how many can you use: limitless

Can I change the tabs positioning?: No, they always align left-- you can change the div positioning (via margins or padding) if you want it more centralized, but the rest of your text will follow

Biography Appearance Belongings

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet aliquam blandit. Nam dapibus interdum quam et finibus. Phasellus dictum, erat at suscipit sollicitudin, massa metus placerat odio, sit amet lacinia sapien diam ut metus. Aliquam rhoncus mi eget arcu placerat, ut convallis ex cursus. Aenean fermentum diam sed justo viverra venenatis. Etiam efficitur vehicula massa, sed pretium dui rutrum vel. Proin elit justo, posuere aliquet egestas ac, vestibulum eu ligula. Donec turpis ex, sollicitudin non sapien non, consectetur volutpat lectus. Donec id pretium metus. Integer rutrum risus vel pulvinar fringilla.
content
[slide=Family]
content
content

Can I change the background color?: No, though I think if you upload a picture, it replaces it. Logic says, anyway. I have only done translucent buttons, so hey, let me know!

Back to the top of this post
Back to Thread's Table of Content

Kyra Perl · Jan 22, 2021

box-shadow

Short, sweet, and easy.

It's the fuzzy glow on the edge of your divs.

Code:

[div=max-width:900px; border: 3px solid white; padding: 40px; margin: 50px; background-color: #092a36; box-shadow: 0px 3px 30px 10px #ffffff; border-radius: 25px;]

Code

Code:

 box-shadow: 0px 3px 30px 10px #ffffff;

you have two pieces of it, the shape and the color.

shape: 0px 3px 30px 10px

color: #ffffff

Shape has 4 components

1st number is the direction, left and right

Code:

[div=max-width:900px; border: 3px solid white; box-shadow: 90px 0px 5px 10px #ffffff; border-radius: 25px;]
[/div]

90-> brings it to the far right, -90 brings it to the far left-> aka positive numbers shift right, negative shift left.

2st number is the direction, up and down

Code:

[div=max-width:900px; border: 3px solid white; box-shadow: 0px 90px 5px 10px #ffffff; border-radius: 25px;]
[/div]

90-> brings it down, -90 brings it up> aka positive numbers shift down, negative shift up.

3rd number is the spread of the shadow, big or small

Code:

[div=max-width:900px; border: 3px solid white; box-shadow:  0px 0px 90px 10px #ffffff; border-radius: 25px;]
[/div]

90-> makes it spread far, -90 brings it in> aka positive numbers make bigger, negative makes a black whole of DOOM

4th number is the SIZE of the shadow (thick or thin)

Code:

[div=max-width:900px; border: 3px solid white; box-shadow:  0px 0px 90px 10px #ffffff; border-radius: 25px;]
[/div]

90-> thick, -90 lol where it go-> aka positive numbers make bigger, negative makes me lol

tada
Back to the top of this post
Back to Thread's Table of Content

Jerec Asyr · Mar 2, 2021

whoooops wrong thread

Artist Instructional Template Guides

More options

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Kyra Perl

Coalescence

Jerec Asyr

Gluk, Stock, and Two Smoking Lasers

Users who are viewing this thread