Single post in Beep Boop

Forum Index > PokéFarm > Journals > Beep Boop >

pheaux

👍 1

Posted 02/Jun/2018 04:16:49 (5 years ago)
Edited 02/Jun/2018 04:24:34 (5 years ago)

BBcode/CSS Useful links

Legibility Guidelines Active

Gladion's Guide to Site Skins/CSS

Inactive (as far as I know)

Meu's Guide to BBcode
ChimericalRequem's Guide to CSS (This one is super laggy for me, but it has a handy introduction)

Codes I use

Misc/Notes
Hideboxes/Accordions
Progress Bars
Pkmnpanels
Tooltips

[hr] (no closing tag) creates this:

border takes the form of : size of border | decoration of border (solid|dashed|dotted) | color of border
box-shadow needs to be taken out of pretty much everything. It defaults to being active.
[nobbcode] prevents bbcode from being active.
@word at the beginning of the style tag can be used to set up a default setting. For example, @Ocean:#0000ff; will let you use @Ocean instead of typing #0000ff for every place you want it. This can also be used with sizes and such. Useful for keeping organized.
There are three ways of writing colors: hex code, rgba, css color. Hexcodes start with # and have 6 numbers/letters that represent a color. RGBA is written rgba(*red value*,*green value*,*blue value*,*opacity*). CSS colors are what I use in this post and are just the color names (like white or black). All three methods are connected and "translators" between them can be found all over the internet.

example

.panel { box-shadow:none; /*Prevents that ugly default green glow*/ &>h3 {background-color:white; /*background of the banner to open box*/ border:2px dashed black;} /*border of the banner*/ svg {display:none;} /*Prevents the arrow from appearing*/ a {color:darkblue;} /*the actually text of the banner*/ a:hover {color:blue;} /*when you hover over the banner text*/ &>div {color:black;background-color:azure;} /*what's inside the box*/ }

Also applies to accordions

Hideboxes/Accordions inside will take the same code unless you specify something separate

Same thing c:

Just be careful how the boxes interact, like with that funky double border above. That can be fixed by setting border-top on this tab to "none" or setting border-bottom on the first tab to "none".

Example

.expbar { background-color: black; /*Background of the "empty" bar*/ color: white; /*text color*/ border: 1px solid White; /*the border of the whole bar. Does not include the "filled" portion of the bar*/ &>div {background-color:grey;border-right-color: white;} /*the filled part of the bar. There is only a border-right. Using just border will make it look weird if the whole bar still has the border.*/ }

Lv. 100 — +1,872,058

Likes:

Dry food

MAX

Rash nature

.party>div {background-color: pink; /*background of the whole box*/ box-shadow:none;color:purple;border-color:purple; >.pkmn:before {background-color: lavenderblush; /*the circle color*/ border: 2px dashed purple;} /*the border of the circle*/ >a:link, a:visited {color:purple;} /*links, namely the name. if you want it to look different after you click the link separate the a:visited variable*/ >.expbar {background-color:lavenderblush;color:purple;border:1px solid purple; /*same thing as a progress bar. be careful when setting full template settings for progress bars*/ >div {background-color:pink; border:none;}} >.action>.berrybuttons { >.tooltip_content {background-color:pink;color:purple;border:1px solid purple;}} /*tooltip for the berries*/

.tooltip_content {background-color: white; color:black; border-color:black;} span.bbcode_tooltip { color:white;background-color:black; /*Remember to set both the background and text color!*/ border-bottom: 1px dashed white;}

Avatar is official art from Pokemon Typing Adventure Look at him: