do u kno da wae *:･ﾟ✧ a guide to template coding

[nefarius]

Beasts Of Beyond uses a type of coding called "Div Style". Div Style is what I'm using now - it essentially edits how your posts look for aesthetic purposes. Where posts usually go from left to right, I was able to control it going straight in the middle, with the width restricting how long my words can go before I skip to the next line.

In order to effectively use Div Style, you'll need to implement a code in the beginning and at the end of your post.

[code=beginning][div style="codeshere;"][/code]

[code=ending]

[/code]

[align=center]CODES

Before the codes are posted, all credit goes to Felix, an admin from the site BearBones! They had an extensive guide on the coding that I used for reference, and all of this couldn't have been done w/o it :^)

✧ width

Code:

width: #%;

Code:

max-width: #px;

Code:

min-width: #px;

✧ height

Code:

height: #%;

✧ minimum height
More words in your temp = longer it gets. Only use this code if your overflow is set to stretch!

Code:

min-height: ##px;

✧ overflow
Auto: will add a scrollbar when the Div reaches maximum height / Stretch: template height will adjust depending on the text / Hidden: text will cut off after it goes past the height limit / None: text will just continue outside of the template.

Code:

overflow: auto/stretch/none/hidden;

✧ border
TYPES OF BORDERS: solid, double, dashed, dotted, inset, outset, ridge, groove
There are two variations of this code!
1. Goes width -> color -> type, in that order.

Code:

border: ##px color type;

2. Same idea as the first, but has separate codes for width/color/type instead.

Code:

border-width: ##px; border-type: bordertypehere; border-color: #hexcodehere;

3. For those who wish to get into specifics, this code makes it so that you can have different borders from top/bottom, left/right - whatever your heart desires. However, you need to specify which border you're using; "top" can be changed to "bottom", and it can do the same with left and right.

Code:

border-top: ##px color type;

✧ rounded corners
The bigger it is, the more rounded the corners get. 100 means all curves, and a circle/oval depending on what dimensions you have.

Code:

border-radius: ##%;

✧ multiple rounded corners
Different roundness for every corner. You can also make semicircle templates with this! Only numbers 0-100 or it won't work.

Code:

[div style=""]border-radius:0em 0em 0em 0em;[/div]

---

✧ background color

Code:

background-color: #hexcode;

✧ background image

Code:

background-image:url(urlhere);

✧ background gradient

Code:

background: linear-gradient(COLOR, COLOR)

Code:

background:linear-gradient(to right/left, color,color);

Code:

background: radial-gradient(COLOR, COLOR)

✧ background size

Code:

background-size: 100%/cover;

✧ background position

Code:

background-position: rightlefttopbottomcenter;

✧ opacity

Code:

opacity: 0.##;

---

✧ hover text

Code:

[abbr=hover text here]main text here[/abbr]

✧ font family

Code:

font-family: fontname;

✧ font size

Code:

font-size: ##pt/px;

✧ font color

Code:

color: #hexcode

✧ text align

Code:

text-align: justifyleftrightcenter;

✧ font style

Code:

text-style: italicboldunderline;

✧ letter spacing

Code:

letter-spacing: NUMBERpx;

✧ line spacing

Code:

line-height: NUMBER%;

✧ shadowed text

Code:

text-shadow: 3px 3px 3px COLOR;

✧ outline text

Code:

text-shadow: 1px 1px COLOR, 1px -1px COLOR, -1px 1px COLOR, -1px -1px COLOR;

✧ text transform

Code:

text-transform: uppercase/lowercase;

✧ word spacing

Code:

word-spacing: NUMBERpx;

---

✧ margins
Space between the template and the rest of the post. Put a - sign before a number to push it towards the top.

Code:

margin-left/right/top/bottom: ##px;

✧ padding
Margin within a template, meaning the text will be a certain # of pixels from the borders of the template. First is for all the same padding, and the second code is for padding on different sides.

Code:

padding: ##px;

Code:

padding-RIGHT/TOP/LEFT/BOTTOM: ##px;

✧ float

Code:

float: PLACE;

---

✧ tilting

Code:

transform: rotate (NUMBERdeg); -o-transform: rotate(NUMBERdeg); -webkit-transform: rotate(NUMBERdeg); -moz-transform: rotate(NUMBERdeg);

✧ dropshadowing

Code:

box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR;

✧ insert dropshadows

Code:

box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR inset;

✧ cursors

Code:

cursor: url("LINK HERE"), auto;

[Kicksie]

♡ — aaa this is beautiful
thanks so much !!

[fabrie]

tracking- this is great! thank you! <3

[Orion]

this is amazing!!

[april .]

noice!! i approve ^^

[array]

thank you so much! i love this

[Whisper]

aaa
This will be fun to fiddle with ^^

---

[tikki]

quick track!