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;
7 Replies
12365 Views
