Single post in Legibility / Template Rules
Forum Index > PokéFarm > Guides > Legibility / Template Rules >
Other elements and ensuring they are defined
Here is a collection of codes which have certain elements completely defined in black, white and grey for easy reference and usage. Some of these codes will have duplicated things like link colours, but I have done this because if you haven't already defined those colours, you need to for these codes.Accordions, Stackboxes, Hide Boxes and Display boxes
As you can see by this post, these boxes have all been define with very plain colours, but defined all the same.
code
[style]
.panel {
background: black;
border: solid 1px white;
color: white;
> h3 {
> a {
color: white;
}
border: solid 1px white;
background: #6E6E6E;
color: white;
}
> div {
color: white;
a:link, a:visited {
color: #d1d1d1;
}
}
}
[/style]
Progress Bars
Progress Bars are great for tracking items, hunts or any number of things. Since progress bars often take their colours from the rest of the template used, if you are going to use one, make sure you have defined everything in it as well
code
[style]
.expbar {
background: black;
color: white;
border: solid 1px white;
> div {
background: #6E6E6E;
border-right: solid 1px pink;
}
}
[/style]
Tool Tips
Tool tips are those little boxes that pop up when you hover over something, these can be tricky but once again, they often take their colours from the rest of a template and will need to be defined as well.
Also be aware that a tooltip at the bottom of a signature or post may be cut off, so check your codes before posting them.
Hover here.
Everything is defined and easy to read
code
[style]
div.tooltip_content {
background: black;
color: white;
border: solid 1px white;
}
.bbcode_tooltip {
border-bottom: 1px dotted #6E6E6E;
}
[/style]
Tables
Tables are great for organisation of hunts, shop stock, or any number of other things. They generally take their text colour from the rest of the template they are used in and will need to be defined as well.
Completely defined table
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
code
[style]
table {
border: solid 1px white;
}
table th {
border: solid 1px white;
color: white;
background: #6E6E6E;
border: solid 1px white;
}
table td {
border: solid 1px white;
background: black;
color: white;
}
[/style]
PKMN Panels
PKMN Panels are fun little display codes for your special pokemon. This code includes some duplicate codes for tooltips and link colours as they are required by the boxes themselves.
27%
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Adamant nature
Code
[style].party > div {
background: black;
color: white;
border: 1px solid white;
box-shadow: 3px 3px 3px pink;
a:link, a:visited {
color: pink;
}
.action > .berrybuttons[data-up='sour'] > [data-berry='aspear'],
.action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'],
.action > .berrybuttons[data-up='dry'] > [data-berry='chesto'],
.action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'],
.action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] {
background: white;
}
.action > .berrybuttons[data-down='sour'] > [data-berry='aspear'],
.action > .berrybuttons[data-down='spicy'] > [data-berry='cheri'],
.action > .berrybuttons[data-down='dry'] > [data-berry='chesto'],
.action > .berrybuttons[data-down='sweet'] > [data-berry='pecha'],
.action > .berrybuttons[data-down='bitter'] > [data-berry='rawst'] {
background: grey;
}
.action a[data-berry]:after {
border: 2px solid white;
}
.pkmn:before {
border: solid #6E6E6E;
background-color: white;
}
.expbar {
border: solid 1px white;
color: white;
background: black;
>div {
background: #6E6E6E;
border-right: solid 1px pink;
}
}
div.tooltip_content {
background: black;
color: white;
border: solid 1px white;
}
.bbcode_tooltip {
border-bottom: 1px dotted black;
}
}[/style]
Wide tables
The code used to make a wide table mobile-friendly is as follows:
[style]table {
display: block;
width: 100%;
overflow-x: auto;
}[/style]
It is highly recommended to use CSS Grid instead, but that is not something that this guide will go into.
for Market equiv. 
sig code and sig bg image made by me