Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Styleclass and You: An Introduction

Forum Index > PokéFarm > Guides >

Pages: 123··· 161718

Niall's AvatarNiall
Niall's Avatar

Styleclass and You

An Introduction

written by Niall

Table of Contents

1. Introduction 2. What this is and what this isn't a. Why use [
style
]? b. Onsite links c. Rules 3. Formatting an empty [
style
] tag a. Defining a class b. Adding { & } c. Adding CSS d. Using [
styleclass
] 4. Styling your post a. Required i. Links 1. Visited & Unvisited links 2. Hovering & Active links b. Easy/Medium i. Titles ii. Bold and italic iii. Underlines iv. Tooltips v. Tables vi. Images c. Difficult i. Panels ii. Progress bars iii. Lists iv. Tabbed interfaces 5. Tips and Tricks a. Comments b. New Lines c. Remove BBCode d. Variables e. Being mobile-friendly 6. Conclusion a. Resources b. Special Thanks c. Changelog
Months and months in the planning, here is my baby! A giant guide to help with theming forum posts, something that I truly believe is lacking in the forums. Here we go! Let me set the scene: You have a template, but something really irks you: Nothing on it matches with your site skin! Links are the wrong color, the hideboxes are hard to read, what do you do?! Do you change your skin? But what if someone else has the same skin? Then it won't match their's! Don't worry, I have a solution for you! Please read all of the information provided carefully so you don't miss anything! Before you go any further, this is an advanced tutorial. You should already know how to make a template, be VERY comfortable with BBCode and at the very least be able to write out CSS! This is tricky stuff, but I'm here to help!

Onsite Links

Please check the rules of those threads before going to them for help. Thank you! Do note that this guide is just a snippet of what [
style
] and [
CSS
] can do for you. It would take pages and pages to even begin to discuss every single combination of CSS. Therefore, I have limited this guide to theming forum posts to go with templates. Why use [
style
]? It extends the customization of your posts! You can do so much more, and the possibilities are (pretty much) endless. So read ahead! After you read the rules, of course!

Thread Rules

  1. Please follow PFQ rules. All site rules apply to the entire thread.
  2. Only ask questions about style. Do not post questions for templates, as this guide and this thread are not for them. Advanced questions about CSS are allowed if they cannot be answered in the other guides, other users and myself would be glad to help you!
  3. Disclaimer: I'm not a professional. I just have a knack for coding and love to read. All of this information has been collected all around PFQ and several Google searches, as well as a few experimental sessions with a journal post, so I cannot guarantee anything.
  4. No critiques. Template and coding critiques are not to be posted or asked for here. "What am I doing wrong?" is an appropriate question for this thread!
  5. Do not code without the template artist's permission. If you order a template from a shop, be sure to ask permission to add [
    style
    ] to their templates if they do not supply it. This is a courtesy to the artist and might even inspire them to learn more about [
    style
    ]!
  6. Read everything! Make sure you read the entire guide in order to understand everything. If you ever feel confused, go back and reread, but you can post questions if you have any!
  7. Suggestions are welcome! Feel free to post any suggestions of things you think should be added to the guide, and if it sounds good, I'll add it!
  8. Still have questions? My inbox is also open if you need help. Don't hesitate to send me a PM and I will see if I can help!
Niall's AvatarNiall
Niall's Avatar

Formatting an empty [
style
] tag

Imagine CSS to be something like ordering at a fancy restaurant (or Denny's if you live in the US), as weird as that sounds. You're escorted to a seat, then the waitress/waiter takes your order. They write down where you are seated (in this situation) and bring you your order when it's ready! With that in mind, let's begin: First, you start with a name for your Style (i.e. the name of your party). In this example, you're going to be called the Smith Family Reunion. Classes start with a period, and your class can be called whatever your heart desires! Periods let the code know that they need to look for the class that is featured after the period. Classes can contain the alphabet and underscores, but not hyphens, other special characters, numbers or even spaces.
[style]
.smith_family
[/style]
Don't stop here! We need to give the charming waitstaff our order. To announce what you want to be coded (or what you want to eat), you use curly brackets, or { and } (try hitting Shift + [ and ]). Your order will go inside of these!
[style]
.smith_family
{ }
[/style]
The cook will be so confused because we didn't tell them what we want! Let's throw in a bit of fancy CSS.
[style]
.smith_family
{
text-decoration
:
underline
; }
[/style]
They're ordering one helping of underlined text? Coming right up!
Wow, that was anti-climatic. Now we just have an underline. But how did we take the Smith's order and make it?
[styleclass
=
smith_family
]
Here's how we made it!
[/styleclass]
Notice how
.smith_family
(with a period) became
smith_family
(without a period)? That's how [
styleclass
] works. In the [
style
] code, we needed to tell Sally that
smith_family
is a class, but we don't need to in [
styleclass
]. This also applies to certain codes that were made by Niet (panel, expbar, and tooltips) but not ones used by other sites (table, b, h3, div). Remember: Inside the BBCode, give a class (with a period!), add { and }, add some CSS, then call it with [
styleclass
], without the period!
[styleclass
=
smith_family
]
Now you can do it, too!
[/styleclass]
[style]
.smith_family
{
text-decoration
:
underline
; }
[/style]
Niall's AvatarNiall
Niall's Avatar

[
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!
[style]
a
{ }
[/style]
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:
a:link
{ }
for new, unvisited (by you) links,
a:visited
{ }
for the opposite, visited links,
a:hover
{ }
for when your mouse is hovering on the link, and
a:active
{ }
for when you are clicking and holding on a link. As a side note,
a:hover
{ }
must be used after
a:link
{ }
and
a:visited
{ }
(if you use it).
a:active
{ }
must be used after
a:hover
{ }
(if you use the first). Using this code will also change the color of hideboxes, accordions, and quotes with links in them. It is suggested you use both codes in case the link color does not go well with a skin's hidebox color. The SVG image (the little triangle) changes color with this code. Check out the "Panels and Hideboxes" section to learn more! Check out these examples to see other ways to manipulate links.

Using just one code

[style]
a
{
color
:
black
; }
[/style]

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!
[style]
h1
{ }
h2
{ }
h3
{ }
[/style]
Changes what titles look like.

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!
Be careful changing
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 { }
Change how the text acts when surrounded by [
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 { }
Change how the text acts when surrounded by [
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 { }
Changes the tooltips. "Content" is used for the hovered box and the "Span" is for the anchor (what you hover over)

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 { }
Using the same spelling as the BBCode,
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
106
288
Total # of items: 394

: images

img { }
Manipulates images used in posts. Applies to anything that makes an image, even [
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 { } }
"Expbar" controls the background/empty design and "Div" is the filling bar. The "right border" in the example below is that little crack that leads the filling bar, letting you see where the colors change a bit easier. Click here to learn more about what Progress Bars can do!

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; } } }
x407

: lists

ul { }
and
ol { }
Mainly used to define what the bullets are. To replace bullets with text, use
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; } }
  1. Hello world!
  2. Hello world!
  3. Hello world!
  4. Hello world!
  • Hello world!
  • Hello world!
  • Hello world!
  • Hello world!
Niall's AvatarNiall
Niall's Avatar

Tips and Tricks

Here are some helpful tips and tricks that I have picked up that I believe will help you! If you have some more, let me know and I might add them!

Comments

CSS can get rather confusing. You have thirty or more lines of code, don't get yourself lost! Try adding yourself some breadcrumbs: comments! To add a note to yourself or to even remove a block of code without deleting it, you can use one of two different ways. The first is the double-slash: Just add // and anything will be hidden until the code reaches a new line. If you have the editor enabled on PFQ, the comment formed will turn green.
.pizza33 { // Do not delete the next line color: red; }
Easy, right? But what if you want to comment further than one line, or your code is already on one line? You should try this kind of comment, the slash-star. Surround both sides of the comment with /* these */. The comment will keep going until you add the other!
.pizza33 { /* Don't tell anybody, but Thomas Sanders is hilarious */ }
This one is nicer because it won't automatically delete the end } as long as you are careful! It's all personal preference, if you need one line gone or a lot, try them both!

Organizing with New Lines

As you might have noticed, I have generally spaced out everything in the guide. This is optional! In some cases, having the code all jumbled together may be a good thing! Either way, you can agree that
.text {background: white; color: black; font-family: Arial, "Times New Roman", serif; text-align: justify; padding: 5px;} .image {border: 10px; background-color: white; border-color: black; border-radius: 14px; width: 100%;}
is a little annoying and would be easier to read if each piece was on a new line. Plus, it would help if an error pops up!

Getting rid of the CSS BBCode

Did you know you don't even need the CSS BBCode anymore? Let me show you how! First, take your finished template, and take each instance of CSS and add each to its own class (the ones with the periods at the front). Check out this template Yamiro made:

Original

[css=border-radius:30px; background:black; padding:20px; width:530px; min-height:40px;][css=border-radius:25px; background:gray; padding:20px; width:450px; min-height:40px; color:white; text-align:center;][css=margin-top:-60px][img]http://www.pokestadium.com/sprites/black-white/yamask.png[/img][/css] Your text here! [/css][/css]

New & Improved

[styleclass=black][styleclass=gray][styleclass=float][img]http://www.pokestadium.com/sprites/black-white/yamask.png[/img][/styleclass] Your text here! [/styleclass][/styleclass] [style].black { border-radius:30px; background:black; padding:20px; width:530px; min-height:40px; } .gray { border-radius:25px; background:gray; padding:20px; width:450px; min-height:40px; color:white; text-align:center; } .float { margin-top:-60px; }[/style]
See that? When each pile of code is rearranged, it's easier to see where the text goes, and allows all of the code to be right next to each other. Simple, right?

Easy Referencing

Okay, you're all finished and then you go, "Oh shoot, Niall, I want to change the width of everything to be a lot wider! This is horrible!" to which I'd say, "Why not use references?" The 'At' Sign, @, is just like a hashtag on social media: all posts that have this mentioned can be looked up in an instance. You can use this feature to move specifications to an easier to reach place, like putting all of the settings at the top so that they can be changed separately from the coding. You can also tag multiple things to change them all at once! Since that made no sense at all, here's an example to show how you do it!
.pizza33 { @width = 45%; @height = 55%; // Do not edit anything below this line width: @width; height: @height; img { width: @width; height: @height; } }
@width and @height now control the text width (line 4) and the image width (line 6). This lets users change the first two lines to control the rest of the code, making it less of a chore in case you want to make any changes. Isn't that cool?

Being Mobile-Friendly

Have you ever tried pressing Alt+1 right before you post? You really should! This is what your template will look like when seen on a phone or another device that uses portrait mode. If you're not careful, it might be really messed up for others, even if you don't use a phone or tablet. And do you think this is fun? Not really... Here are some tips that I have collected with some friends' help! Your mileage may vary, feel free to message me or post here for some help!
  1. Look over your coding for the following:
    padding | height | width | margin
    . If you have any of these, open a calculator app or website and divide all of these measurements by 6. Then, change the 'px' ending to a '%'. So 600px would become 100%, 300px is 50%, etc. Decimals should only be to the hundredths place (two numbers after the period). NEVER use 'width: 600px;' ever again!
  2. If your template has a floating image, make sure the first step is repeated for each. Then, you need to add the following code somewhere:
    img { height: 100%; width: 100%; }
    If used correctly, this should force-resize the image, no matter what size the screen being used. At the default size (Alt+5), this should not distort the image and it should look right. Now switch to Alt+1 and see if the image stays in the correct position. If it does, you're golden! If neither sizes work, add more padding and margin CSS to corral the image onto the template.
  3. Locate where the background image is defined (background colors should be fine) and add this code:
    background-size: 100% auto;
    This makes the width of the background change with the screen size change, while keeping the height normal and undistorted. Good luck!
Niall's AvatarNiall
Niall's Avatar

References

Sometimes, you need a little bit of more help. Here are some websites off of PFQ that can help you, or if you want to just read up on CSS! If you've found a gold mine, PM me a link! I'd love to learn some more.
  • W3Schools calls itself the "World's Largest Web Developer Site", and for good reason. This place is huge! It even comes with preview buttons you can mess around in!
  • Mozilla has an expansive list as well. I haven't personally used their site, but I've heard good things!
  • Stack Overflow has several answers that can help if you have any! Honestly, typing your question into Google will probably suggest this site, it's like the Yahoo Answers of this kind of stuff.

Special Thanks

And last, but not least, a list of people who, knowingly or not, added to this guide, no order of importance at all meant. If in any way you would like your name removed from the list, let me know in a PM. Thank you!
  • Niet, of course
  • Meu
  • Emberlynn
  • Beeside
  • Eltafez
  • Yamiro
  • Colress
  • King Vesper
  • Ganorith
  • Galladerox

Changelog

  • 8/22/16 5:00 : Posted to PFQ
  • 9/18/16 1:35 : Minor edits, added panel style to post #3
Yamiro's AvatarYamiro
Yamiro's Avatar
this is so well thought out than my css guide ha. i'll probably revamp it this weekend right after school ends so i can brainstorm better. this guide is super helpful for me as well since i have absolutely no idea what most style and styleclass codes are so this is a lifesaver. you kept ypur world well. i'll also pm you when the new css guide comes out so don't worry about that.
i have a bone to pic with you template made by galladerox
LucyxEevee's AvatarLucyxEevee
LucyxEevee's Avatar
May I get some help woth the progress bar, bold and italics, underline, h1, h2, h3, and ul and ol lists styleclass codes? Whenever I try to do any of those I either get CSS style errors, complete removal of stylecodes, or a broken template. I'm specifically looking to fix the progress bar code but if it can answer the question for the others that would be appreciated.
Emberlynn's AvatarEmberlynn
Emberlynn's Avatar
By chance can you post in nobbcode what you were trying to use for the style codes? Might be easier to explain where it went wrong for you then try and explain as a whole.
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis | Avatar credits | [♥] | | | | |
LucyxEevee's AvatarLucyxEevee
LucyxEevee's Avatar
Alright, sorry, I was thinking of adding the code I was using for it the first time.

Code

[img]http://i.imgur.com/xf0HIKU.png[/img][css=background:url('http://i.imgur.com/fnU92S4.png'); background-repeat:repeat-y; padding: 0px 80px 0px 40px; color:Black;]TextHere [/css][img]http://i.imgur.com/Duv9JoN.png[/img] [style] a {color:#ffe0e0; -webkit-transition: all 0.6s ease-in-out;} a:hover {color: #ffffff; letter-spacing:-1px;-webkit-transition: all 0.6s ease-in-out;} a {text-decoration:underline;font-weight: bold} ::selection { background:#000000; color:#d31010; } ::-moz-selection { background:#000000; color:#d31010; } .panel { border: 0px; &>h3 { height:10px; line-height: 10px; background: #6b0d0d; font-size: 11px; color: #ffffff; font-family: Times New Roman; border-bottom: Hidden; box-shadow: none; } &>div { line-height: 12px; border:1px solid #000000; font-weight: bold; font-family: Berylium Bold Italic; font-size:12px; background: #5e5e5e; color: #d8d8d8; box-shadow: none; padding-bottom: 5px; } } th { border: 1px solid #ffffff; background-color: #000000; font-size:12px; color: #9e1111; text-align:center; text-transform: uppercase; } td { border: 1px solid #ffffff; text-align:center; } table,th,td{ border: 1px solid #560b0b; margin: 0 auto; }.tooltip_content { font-size: 10px; text-align:left; min-width:150px; background: #000000; color: #9e1111; border-radius: 5px; border:1px solid #ffffff; }.expbar{ background: #ffcc00; border: 1px; &>div background: #ffcc00; color: #ffcc00; border: 2px; &>span color: #ffcc00; font-size: 10px; } }[/style]
Niall's AvatarNiall
Niall's Avatar
Notice how in .panel, both classes with '&' use { these }? This needs to happen with expbars too! so it should look like: .expbar { &>div {} &>span {} } What question did you have about the other classes, h1, h2, etc? They only apply to anything you use the code with if I need to add that to the guide, so b {} will affect [b][/b], not normal text

Pages: 123··· 161718

Cannot post: Please log in to post

© PokéFarm 2009-2019 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page