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.
[div style="codeshere;"]
[/div]
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 :^)
✧ widthwidth: #%;
max-width: #px;
min-width: #px;
✧ heightheight: #%;
✧ minimum heightMore words in your temp = longer it gets. Only use this code if your overflow is set to stretch!
min-height: ##px;
✧ overflowAuto: 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.
overflow: auto/stretch/none/hidden;
✧ borderTYPES OF BORDERS: solid, double, dashed, dotted, inset, outset, ridge, grooveThere are two variations of this code!
1. Goes width -> color -> type, in that order.
border: ##px color type;
2. Same idea as the first, but has separate codes for width/color/type instead.
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.
border-top: ##px color type;
✧ rounded cornersThe bigger it is, the more rounded the corners get. 100 means all curves, and a circle/oval depending on what dimensions you have.
border-radius: ##%;
✧ multiple rounded cornersDifferent roundness for every corner. You can also make semicircle templates with this! Only numbers 0-100 or it won't work.
[div style=""]border-radius:0em 0em 0em 0em;[/div]
✧ background colorbackground-color: #hexcode;
✧ background imagebackground-image:url(urlhere);
✧ background gradientbackground: linear-gradient(COLOR, COLOR)
background:linear-gradient(to right/left, color,color);
background: radial-gradient(COLOR, COLOR)
✧ background sizebackground-size: 100%/cover;
✧ background positionbackground-position: rightlefttopbottomcenter;
✧ opacityopacity: 0.##;
✧ hover text[abbr=hover text here]main text here[/abbr]
✧ font familyfont-family: fontname;
✧ font sizefont-size: ##pt/px;
✧ font colorcolor: #hexcode
✧ text aligntext-align: justifyleftrightcenter;
✧ font styletext-style: italicboldunderline;
✧ letter spacingletter-spacing: NUMBERpx;
✧ line spacingline-height: NUMBER%;
✧ shadowed texttext-shadow: 3px 3px 3px COLOR;
✧ outline texttext-shadow: 1px 1px COLOR, 1px -1px COLOR, -1px 1px COLOR, -1px -1px COLOR;
✧ text transformtext-transform: uppercase/lowercase;
✧ word spacingword-spacing: NUMBERpx;
✧ marginsSpace between the template and the rest of the post. Put a - sign before a number to push it towards the top.
margin-left/right/top/bottom: ##px;
✧ paddingMargin 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.
padding: ##px;
padding-RIGHT/TOP/LEFT/BOTTOM: ##px;
✧ floatfloat: PLACE;
✧ tiltingtransform: rotate (NUMBERdeg); -o-transform: rotate(NUMBERdeg); -webkit-transform: rotate(NUMBERdeg); -moz-transform: rotate(NUMBERdeg);
✧ dropshadowingbox-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR;
✧ insert dropshadowsbox-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR inset;
✧ cursorscursor: url("LINK HERE"), auto;