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

Offline carkus

  • Warrior
  • 157
    • View Profile
    • Awards
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 »
TO RID ME OF MY PRIDE, I CALL ALLEGIANCE TO MYSELF.
✦*. open to msgs — @kilgore — carkus#7601


Offline kicksie !

  • Former Staff
  • mackatic™
  • 380
  • awards This member is or was a staff member on Beasts of Beyond. This glorious member has donated to our very special Breast Cancer October event.
  • she/her ♡
    • 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 mackstaff vandalismstoragejoin elysium!

Offline fable

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] - avatar's artist - currently inactive

Offline Orion

  • Administrator
  • ★ ★ ★
  • 1969
  • awards This amazing member has donated to our rainforest preservation charity event in October. Someone found this special toucan during October 2019's charity event. This member participated within Valentine's Day 2019! This member is or was a staff member on Beasts of Beyond. This glorious member has donated to our very special Breast Cancer October event. This user has contributed to the Guide Archive.
  • ★ ★ ★
    • View Profile
    • Awards
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #3 on: March 11, 2018, 08:05:11 PM »
this is amazing!!
i thought of quitting, baby, but my heart just ain't gonna buy it
THAT'S LIFE
many times I thought of cuttin' out but my heart won't buy it


admin - characters - discord: star#0061

Offline ➣ april !

  • Former Staff
  • 七転び八起き
  • 382
  • awards This member is or was a staff member on Beasts of Beyond. This glorious member has donated to our very special Breast Cancer October event.
  • never give up .
    • 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 ^^


if you've been waitin' for fallin' in love,
babe you don't have to wait on me

     

spare a click for my poke babies?: ShowHide

Offline array

  • Warrior
  • sailing
  • 168
    • 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
▌██████████▐
again today my lunch is it
✧・゚ RAMEN ✧・゚

Offline Wisker

  • Warrior
  • The Fed-Ex King
  • 184
  • awards This member won a June spotlight category! This member won an April spotlight category!
  • 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 ^^

I'LL BREAK THIS IS I H A V E TO —
TELL ME THE GOOD THAT  WOULD DO

Offline tikki

  • Senior Moderator
  • 681
  • awards Someone found this special toucan during October 2019's charity event. This amazing member has donated to our rainforest preservation charity event in October. This member donated to Beasts of Beyond. Thank you! This member is or was a staff member on Beasts of Beyond. This user has contributed to the Guide Archive.
  • resident furry
    • 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!
senior moderator ★ she/her ★ storagethe babiesart shop

 

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:


'BEASTS OF BEYOND + an ability-based animal roleplay In Dire Straits: Awoo BIANDRI: fantasy canine rpg RPGfix