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

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

Offline shrike

  • Warrior
  • 157
    • View Profile
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: March 28, 2022, 08:20:13 PM by Orion »
gone. just checkin in once and a while.

Offline kicksie !

  • Former Staff
  • mackatic™
  • 380
  • she/her ♡
  • 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.
    • View Profile
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 left.

  • Warrior
  • 196
  • Awards This member has participated in the 2018 site-wide Halloween event!
    • View Profile
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

Offline Orion

  • Administrator
  • ★ ★ ★
  • 3625
  • ★ ★ ★
  • Awards This member won the 'Best Plot' category in BoB's 2022-2023 choice awards. This member won the 'Best Couple' category in BoB's 2022-2023 choice awards. This member won the 'Best Villain' category in BoB's 2022-2023 choice awards. This member won the 'Most Well-Known Character' category in BoB's 2022-2023 choice awards. This member won the 'Best Writer' category in BoB's 2022-2023 choice awards. This member won the 'Best Plot-Maker' category in BoB's 2022-2023 choice awards. This character is a Councilmen of The Pitt. This character is the Kingpin of the Coalition of the Condemned. This member won the 'Best Plot-Maker' category in BoB's 2021 choice awards. This member won the 'Best Plot' category in BoB's 2021 choice awards. This amazing member has donated to bee/invertebrate charity event in October of 2020. This user killed a bunny in the Easter egg hunt of 2020!
    • View Profile
  • Pronouns: he/him
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #3 on: March 11, 2018, 08:05:11 PM »
this is amazing!!
FOR ALL TIME —
— when we're out there fighting for the fate of the sacred timeline, we're also fighting for this, for us. friends against time, allies to the end. you've seen all of existence, same as me, so you know, friendship like ours is uncommon & worth fighting for. same as the sacred timeline! when you were in my head, i saw something. what did you do to me? that’s a trick. it’s a deception. i was created by the time-keepers. i can’t create memories. i can only use what’s already there. the time-keepers took your lives from you. from all of you. you’re variants. we’re the same. show me. i looked happy... what now? you’re not hearing me. i was there. this was real, what i saw. this is a place that i’ve been. this wasn’t the tva. this was a memory. i lived down there. i went to that bar. i had friends. i had a whole life on the sacred timeline... —
— ALWAYS !

Offline ➣ penny

  • Legendary
  • 516
  • ♡ you wrote a hundred letters just for me ♡
  • Awards This member won a March spotlight category! This amazing member has donated to bee/invertebrate charity event in October of 2020. 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.
    • View Profile
  • Pronouns: she/they/he
Re: do u kno da wae *:・゚✧ a guide to fancypost coding
« Reply #4 on: March 12, 2018, 10:15:07 PM »
noice!! i approve ^^

AND NOW THE WHOLE THING'S FINISHED AND I CAN'T STOP WISHING
that i never gave you anything ♡

Offline array

  • Warrior
  • sailing
  • 183
    • View Profile
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

  • Prodigy
  • THe cursed, tHe mythed
  • 335
  • Creative Liberties will be taken
  • Awards This member won a June spotlight category! This member won an April spotlight category!
    • View Profile
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 IF I H A V E TO —
TELL ME THE GOOD THAT  WOULD DO

Offline tikki

  • Former Staff
  • 961
  • Awards This amazing member has donated to bee/invertebrate charity event in October of 2020. This member won a July spotlight category within 2020! This member won the 'Most Helpful Staff Member' category in BoB's 2020 choice 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 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.
    • View Profile
Re: do u kno da wae *:・゚✧ a guide to template coding
« Reply #7 on: March 26, 2018, 04:20:12 PM »
quick track!

 

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:

RPG Initiative RPGfix 'SOULS-- post-apocalyptic werewolf rpg 'BEASTS OF BEYOND + an ability-based animal roleplay