Single post in Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >
[css] properties
Here you will find the codes to theme different parts, or properties, of posts. If you have more insight on more things to theme, send me a PM or post here! I'm positive I have missed a few things, so let me know!
If you are unsure on how to use certain BBCodes, there is a link located inside that will take you to its guide on the Wiki. Check it out!
Links
Check me out on the Wiki!
Changes what links look like in a post. This is required for all templates made by users.
If you are up for it, links can also be coded for different states it's in:
[style]
a
{ } [/style]
a:link
{ }a:visited
{ }a:hover
{ }a:active
{ }a:hover
{ }a:link
{ }a:visited
{ }a:active
{ }a:hover
{ }Using just one code
[style]
a
{ color
: black
; } [/style]
Quick and simple, this makes all links black.
Unvisited.
Using all four
[style]
a:link
{ color
: black
; }
a:visited
{ color
: red
; }
a:hover
{ color
: green
; }
a:active
{ color
: blue
; } [/style]
Letter Spacing with transitions
[style]
a:link
{ color
: black
; }
a:visited
{ color
: red
; }
a:hover
{ color
: green
; letter-spacing
: 5px
; transition
: all 1s
; }
a:active
{ color
: blue
; } [/style]
Simple Buttons
[style]
a
{ background
: #aaa
; padding
: 5px
; }
a:link
{ color
: black
; }
a:visited
{ color
: red
; }
a:hover
{ color
: green
; }
a:active
{ color
: blue
; } [/style]
Headings
Check me out on the Wiki!
Changes what titles look like.
[style]
h1
{ } h2
{ } h3
{ } [/style]
I'm h1
and I'm the largest.I'm h2
and I'm pretty large.I'm h3
and I'm a little larger than normal text. Normally, each uses up their own line, but this can be changed with CSS! Check out the examples below!h3
as this is what is used to theme the titles on hideboxes, quote boxes, accordions and the like. Check out the "Panels and Hideboxes" section to learn more!
Adding Underlines
[style]
h1
{ text-decoration
: underline
; }
h2
{ text-decoration
: overline
; }
h3
{ text-decoration
: line-through
; } [/style]
Normally on PFQ, headings don't have any lines. These examples have any kind of line you like: Underneath, on top, or in the middle!
Heading 1
.Heading 2
.Heading 3
.Changing Colors
: bold & : italics
b { }
and i { }
b
] and [i
] tags.
Defaults to b { font-weight: bold; }
and i { font-style: italic; }
Example #3: Bold and Italics
.example3 {
b {
color: red;
}
i {
color: goldenrod;
}
}
Hello world! Hello world! Hello world!
: underline
u { }
u
] tag, just like the above section!
Defaults to u { text-decoration: underline; }
Example #4: Underline
.example4 {
u {
text-decoration: line-through;
}
}
Hello world! Hello world!
: tooltips
.tooltip_content { }
and span.bbcode_tooltip { }
Example #5: Tooltip
.example5 {
span.bbcode_tooltip {
border-bottom: 0.5px solid black;
}
.tooltip_content {
background-color: white;
color: navy;
border-color: red;
}
}
Hello world!
Hola el mundo!
: tables
table { } th { } td { }
table
modifies the table itself, th
modifies the header boxes, and td
is for regular boxes. Don't forget to add [tr
] in the BBCode!
A common use for this is table { margin:0px auto; }
. This centers the table in the middle of its container instead of aligning left, as it defaults to on PFQ!
Click here to learn how to use math in BBCodes!
Example #6: Tables
.example6 {
table {
margin: 0px auto;
border: 0px;
}
td {
border: 0.5px red solid;
background-color: white;
color: black;
text-align: center;
}
th {
border: 0px;
background-color: navy;
color: white;
text-align: center;
}
}
| My Favorite Berries | |
|---|---|
 | 199 |
 | 558 |
| Total # of items: 757 | |
: images
img { }
pkmn
]!
Example #7: Images
.example7 {
img {
background-color: cyan;
}
}
Look at my cute Pokémon! 
: panels
.panel { &>h3 { } &>div { } }
H3
refers to the banner, or the box title, while div
is the contents inside, usually hidden inside. To change the text color in the h3 section, add a { color: something; }
(for links/click to open) and color: something;
for plain text. You will need both because anything that opens is a link and static headers use regular color coding. This is tricky, so study the example carefully!
Also, be sure not to use too different of colors for the inside of panels, as all BBCode will act the same inside without changing the code. For example, if links and the background are the same, they will clash! You can add codes into the inside of div
, just like we changed the style of links in the headers!
Example #8: Panels
.example8 {
.panel {
border: 0.25px solid brown;
background-color: hidden;
&>h3 {
border-bottom: 1.5px solid black;
color: black;
background-color: orange;
border-radius: 2px;
padding: 3px;
a {
color: brown;
text-decoration: none;
}
a:hover {
color: blue;
}
&>div {
color: black;
background-color: white;
border: 0.5px solid maroon;
border-radius: 2px;
padding: 3px;
}
}
}
Hello world!
Hello!
Hello world!
Hello!
: progress bars
.expbar { &>span { } &>div { } }
Example #9: Progress Bars
.example9 {
.expbar {
color: maroon;
background-color: gray;
border: 1px black solid;
&>div {
background-color: pink;
border-right: 2.5px solid black;
}
}
}
x458: lists
ul { }
and ol { }
ul { list-style-type: something; }
with either "ul" or "ol". Click here for some different styles! Please note that they are case-sensitive, including capitalization.
To use an image for bullets, use list-style-image: url(' link ');
To change different levels of bullets, use ul.a { } ul.b { }
and on and on! There is so much to do with this class, yet it's not a very used BBCode, so I'll let you do some more searching if you aren't satisfied!
Example #10: Lists
.example10 {
ol {
list-style-type: lower-alpha;
}
ul {
list-style-type: square;
}
}
|
|
Bullet Journal xx Freebies xx Send me a PM
Guides:
BBCode xx Templates xx CSS xx Styleclass
Avatar from pokesho (archive)