2.0.2 2.0.2 do u kno da wae *:・゚✧ a guide to template coding
Beasts of Beyond

do u kno da wae *:・゚✧ a guide to template coding

do u kno da wae *:・゚✧ a guide to template coding
« on: March 10, 2018, 09:16:10 PM »
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) [Select]
[div style="codeshere;"]
Code: (ending) [Select]
[/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 :^)

width
Code: [Select]
width: #%;
Code: [Select]
max-width: #px;
Code: [Select]
min-width: #px;
height
Code: [Select]
height: #%;
minimum height
More words in your temp = longer it gets. Only use this code if your overflow is set to stretch!
Code: [Select]
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: [Select]
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: [Select]
border: ##px color type;2. Same idea as the first, but has separate codes for width/color/type instead.
Code: [Select]
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: [Select]
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: [Select]
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: [Select]
[div style=""]border-radius:0em 0em 0em 0em;[/div]


background color
Code: [Select]
background-color: #hexcode;
background image
Code: [Select]
background-image:url(urlhere);
background gradient
Code: [Select]
background: linear-gradient(COLOR, COLOR)
Code: [Select]
background:linear-gradient(to right/left, color,color);
Code: [Select]
background: radial-gradient(COLOR, COLOR)
background size
Code: [Select]
background-size: 100%/cover;
background position
Code: [Select]
background-position: rightlefttopbottomcenter;
opacity
Code: [Select]
opacity: 0.##;


hover text
Code: [Select]
[abbr=hover text here]main text here[/abbr]
font family
Code: [Select]
font-family: fontname;
font size
Code: [Select]
font-size: ##pt/px;
font color
Code: [Select]
color: #hexcode
text align
Code: [Select]
text-align: justifyleftrightcenter;
font style
Code: [Select]
text-style: italicboldunderline;
letter spacing
Code: [Select]
letter-spacing: NUMBERpx;
line spacing
Code: [Select]
line-height: NUMBER%;
shadowed text
Code: [Select]
text-shadow: 3px 3px 3px COLOR;
outline text
Code: [Select]
text-shadow: 1px 1px COLOR, 1px -1px COLOR, -1px 1px COLOR, -1px -1px COLOR;
text transform
Code: [Select]
text-transform: uppercase/lowercase;
word spacing
Code: [Select]
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: [Select]
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: [Select]
padding: ##px;
Code: [Select]
padding-RIGHT/TOP/LEFT/BOTTOM: ##px;
float
Code: [Select]
float: PLACE;


tilting
Code: [Select]
transform: rotate (NUMBERdeg); -o-transform: rotate(NUMBERdeg); -webkit-transform: rotate(NUMBERdeg); -moz-transform: rotate(NUMBERdeg);
dropshadowing
Code: [Select]
box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR;
insert dropshadows
Code: [Select]
box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR inset;
cursors
Code: [Select]
cursor: url("LINK HERE"), auto;
« Last Edit: April 01, 2018, 11:02:00 PM by Orion »
temporarily dead asf homie

Offline kicksmas !

  • mackatic™
  • 359
  • she/her ♡
  • awards This glorious member has donated to our very special Breast Cancer October event.
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #1 on: March 10, 2018, 09:55:46 PM »
♡ — aaa this is beautiful
thanks so much !!
♡ ———— RUN AWAY WITH ME
SAY HELLO TO NEW YORK CITY

⅛ of sutsquad — ex mod — bex m.staff vandalismstorage

♡♡♡♡: ShowHide


Offline fabther christmas

  • 182
  • 【*✿❀⁎― love】
  • awards This member has participated in the 2018 site-wide Halloween event!
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #2 on: March 11, 2018, 01:38:58 AM »
tracking- this is great! thank you! <3
you're pretty either way
she/her & slow replies & tired

& become a paradise valley hp

Offline Snow-rion

Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #3 on: March 11, 2018, 08:05:11 PM »
this is amazing!!
administrator of beasts of beyond!
characters - discord: star#0061

Offline ❄ april .

  • 七転び八起き
  • 362
  • ━ she just want a test drive ⋆
  • awards This glorious member has donated to our very special Breast Cancer October event.
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #4 on: March 12, 2018, 10:15:07 PM »
noice!! i approve ^^


she/her ─ the mod sent by cyberlife ─ jabroni ─ characterstumblr

Offline array

  • 127
  • drink water
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to template coding
« Reply #5 on: March 19, 2018, 07:27:28 PM »
thank you so much! i love this

Offline Wisker

  • Matching with sorrel!
  • 114
  • Creative Liberties will be taken
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #6 on: March 25, 2018, 03:47:36 AM »

aaa
This will be fun to fiddle with ^^

s
DON'T LET THOSE DEMONS IN A G A I N  —
FULL UP THE VOID WITH POLISHED DOUBT
.

Offline tikki

  • damb™
  • 183
  • W W W tetris M L | B
  • awards This user has contributed to the Guide Archive.
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to template coding
« Reply #7 on: March 26, 2018, 04:20:12 PM »
quick track!
❝My philosophy is that worrying means you suffer twice.❞
storage -- the babies -- art shop -- art dump

 

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Name: Email:
Verification:
Type the letters shown in the picture
Listen to the letters / Request another image
Type the letters shown in the picture: