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

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

+- Beasts of Beyond (https://beastsofbeyond.com)
+-- Forum: OOC Resources (https://beastsofbeyond.com/forumdisplay.php?fid=3)
+--- Forum: Artist Loft (https://beastsofbeyond.com/forumdisplay.php?fid=10)
+---- Forum: Coding Corner (https://beastsofbeyond.com/forumdisplay.php?fid=11)
+---- Thread: do u kno da wae *:･ﾟ✧ a guide to template coding (/showthread.php?tid=9)

do u kno da wae *:･ﾟ✧ a guide to template coding - nefarius - 03-10-2018

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;

Re: do u kno da wae *:･ﾟ✧ a guide to fancypost coding - Kicksie - 03-10-2018

♡ — aaa this is beautiful
thanks so much !!

Re: do u kno da wae *:･ﾟ✧ a guide to fancypost coding - fabrie - 03-11-2018

tracking- this is great! thank you! <3

Re: do u kno da wae *:･ﾟ✧ a guide to fancypost coding - Orion - 03-11-2018

this is amazing!!

Re: do u kno da wae *:･ﾟ✧ a guide to fancypost coding - april . - 03-12-2018

noice!! i approve ^^

Re: do u kno da wae *:･ﾟ✧ a guide to template coding - array - 03-19-2018

thank you so much! i love this

Re: do u kno da wae *:･ﾟ✧ a guide to fancypost coding - Whisper - 03-25-2018

aaa
This will be fun to fiddle with ^^

Re: do u kno da wae *:･ﾟ✧ a guide to template coding - tikki - 03-26-2018

quick track!