PFQ Banner

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

Already a user? New to PFQ?

Guide to CSS: Beginner to Expert

Forum Index > PokéFarm > Guides >

Pages: 123··· 192021

Aemilia's AvatarAemilia
Aemilia's Avatar
Guide to CSS, Beginner to Expert
CSS is commonly used on this website to create all sorts of templates. Maybe you've wanted to make your own or get into learning CSS for other applications. This is a guide to some of the CSS used on PFQ. Keep the following things in mind: - Whatever you create on PFQ must meet all legibility guidelines. I hold no responsibility if you choose to ignore them. - Feel free to use this thread to ask for assistance getting something to work. - Do not ask for critiques on templates here. Ask in the ABC Clan instead. - Things exclusive to PFQ, such as pkmn panels, can all be found under PFQ codes. - If something does not seem understandable and needs further elaboration, let me know! I have extensive knowledge of CSS, so I may leave out important additional information that could help others without realising it. Also, if I misspell a word or phrase, tell me! I would rather get it fixed than cause extra confusion. - All PFQ Rules apply 100% of the time.

Introduction to CSS and Styleclass

Basic CSS

Within the brackets resides declarations.
[css=background:navy;color:lightgrey;]This is a block that has a navy blue background and text colour light grey.[/css]
This is a block that has a light grey background and text colour navy blue.
Every declaration ends with a semicolon (
), this allows the browser to recognise when a declaration is over and move to the next declaration. For more flexibility over your code, I recommend not using the [css][/css] tags, but rather classes and style tags. This way you can repeat a class without having to copy the css for it each time you utilise it.

Basic Terms

An element is anything you can see or click, such as text, links, and images. Everything you can interact with on a webpage are elements. .class
{ background
: navy
; width: 50px
; color: lightgrey;
} The stuff inside the {curly brackets} is called the declaration block or simply a block.


There are several types of units, but only the most common and useful ones are listed here: - Pixels (px): an absolute unit, equivalent to 1/96th of an inch, this is relative to the viewing device - Point (pt): an absolute unit, equivalent to 1/72nd of an inch, used for text sizes - em: a relative unit, relative to the font-size of an element (ex. 2em is two times the size of the current font) - rem: a relative unit, relative to the font size of the root element - Percent (%): a relative unit, often used for widths to make templates mobile friendly, calculates a percentage of the space available to use only that portion of it


Styleclasses are essential for creating templates. They allow for an easier way to control styling within the template. To create a class use
. Using a
tag, you can reference this class using
. In order to reference the class, you MUST include the period before the class name. Alternatively, you can shorten
[styleclass=outerClass][styleclass=innerClass]Some text can go in here[/styleclass][/styleclass] [style].outerClass {width: 95%;background: #325032;border: 3px solid #520000; padding: 1%; .innerClass{background: #6E456E;width: 90%; padding: 1%;border: 2px dashed darkcyan;color: gold; }}[/style]
This code results in the following:
Some text can go in here
Please note that you can use multiple
tags, but it is recommended to use only one as you can include as many classes and declarations as you like within the block.
Classes are case sensitive so .class and .Class are considered two unique classes.
Please keep in mind your names that you choose. Choosing a name like fjfhfbfj would be useless if you were to go back to modify the code. Try to utilise names that are useful and easily understood that way you can figure out what the purpose of the class is.

Some Notes to Keep in Mind

Spacing See how that code up there is all on a few lines? This can make it difficult when you have a lot of CSS to find exactly where a problem may arise. While everyone has a different technique to align the code, I recommend a style similar to below to aid in being able to find errors in your code and modify at a later date than when a template was first created.
[style] .outerClass { width: 95%; background: #325032; border: 3px solid #520000; padding: 1%; .innerClass { background: #6E456E; width: 90%; padding: 1%; border: 2px dashed darkcyan; color: gold; } } [/style]
Naming Conventions This is personal preference. However, there are some methods that are common across programmers that I will list: - Camel Case: First letter of every word is capitalized with no spaces or symbols between words, ex. UserAccount, FedEx, WordPerfect. A variation common in programming is to start with a lower case: iPad, eBay, fileName, userAccount. - Pascal Case: this is a subset of Camel Case where the word starts with uppercase. Thus, UserAccount is in Pascal Case but not userAccount. - Snake Case: Words within phrases or compound words are separated with an underscore, ex. first_name, error_message, account_balance. - Kebab Case: similar to Snake Case, but using hyphens instead, ex. first-name, main-section. - Screaming Case: This refers to names in uppercase, ex. TAXRATE, TAX_RATE.
In this guide, I will be using camel case for classes and kebab-case for variables.
Nested Classes As seen in the above example, I set
inside the brackets for
. This is an example of nested classes. By nesting classes, this allows for anything that uses the same class outside of
to remain unaffected by defining only within that class. This is especially helpful when a template gets quoted, the template's styles won't affect code outside of its template, which can lead to legibility issues. Always use a class to basically "wrap" the entire template and make sure to put all styling within the brackets for the "wrapper" class you create. Multiple Classes Sometimes you need one section to have styles from two different classes. Rather than using a second
, you can name a second (or more) class by putting a space between the separate classes like
[styleclass=className alsoClassName]
. This is commonly used for tabs on PFQ, forcing the tabs to always be horizontal (
[styleclass=tabbed_interface horizontal]
In the PFQ Codes section, I will go into more detail tabs and how to use them.


You can use variables within the
tags. They're very useful if you use the same value multiple times within a template. To initialise the variable, use @ and give the variable a name.
@variable: #0236FE; @variable = #0236FE;
is the variable name,
is the value. You can utilise either
to separate the variable name from the value. Let's modify the example used above to use variables.
[style] @accent1 = #325032; @accent2 = #520000; .outerClass { width: 95%; background: @accent1; border: 3px solid @accent2; padding: 1%; .innerClass { background: #6E456E; width: 90%; padding: 1%; border: 2px dashed @accent2; color: gold; } } [/style]
Some text can go in here
These are useful when the same value is used multiple times within a template. If I wanted to change the dark grey in this template, instead of finding every place the colour is used, I can simply change the value of the variable and every location the variable is used is updated to the new colour. The value does not necessarily need to be a colour, but can be any value used with the different properties.
Similar to classes, name your variables something useful! If not, you may not remember the purpose of the variable if you modify the template at a later date.
Buying Prisms @ 70ZC and BSDs @ 30ZC
Avatar by xaandiir, Zarya art by Silver Raven for my use only
Aemilia's AvatarAemilia
Aemilia's Avatar
Beginner to Intermediate Codes
  • Comments
  • Backgrounds
  • Borders
  • Text
  • Float
  • Lists
  • Tables
  • Cursors
  • Pointer Effects
  • Navigation


I'm going to kick this off simple. Comments. Something might not be working properly yet and perhaps you wanna add in a couple of lines to remove later, or remove something to test something else to work out what is causing the issue. You can also add comments to explain something in case you reference the code later and to make it easier to understand after some time has passed and you haven't looked at it later. To use them, you can do
is a single line comment. For multiline comments, you can use
instead. These are only used within style tags. To add comments within the template itself using brackets:
[ NEW LINE NECESSARY, next bracket doesn't necessarily need to be on a new line. ]
However, this will not work for BBCodes that you need commented out. Instead, you can use the following:
[* [b]Text that should be bold, but would be commented out instead. Make sure the next bracket ends on a new line.[/b] *]



In order to create a template, you need to set up the size of it. Using the
properties, you can set up the size of your template.
When setting a width, use percentages rather than pixels except for about me templates, which have a set width of 310px. This allows post and signature templates to be mobile friendly.
You can refrain from setting the width so that it is applied implicitly (automatically handled by the browser), however, you may have less control over the width as a result. The minimum width is 300px per legibility guidelines.
[sc=whExample]Some text here to show an example of width and height.[/sc][style] .whExample { width: 75%; height: 55px; background: black; } [/style]
Some text here to show an example of width and height.
If you wish to set a starting height or width that can adjust as necessary, utilise
, or
[sc=whExample]Some text here to show an example of min-width and min-height. This grows as content is added.[/sc][style] .minwhExample { min-width: 10px; min-height: 25px; background: black; } [/style]
Some text here to show an example of min-width and min-height. This grows as content is added.
[sc=whExample]Some text here to show an example of max-width and max-height. This grows until the max limit is reached where it would overflow from the box.[/sc][style] .maxwhExample { max-width: 250px; max-height: 75px; background: black; } [/style]
Some text here to show an example of max-width and max-height. This grows until the max limit is reached where it would overflow from the box.


Box Model Diagram pulled from here
When using margins and padding, this box model is useful to keep in mind when it comes to sizing. Margins adjust from the outside of the content box while padding adjust from the inside of the content box.
[sc=padmarExample]This gives 15px spacing around the outside of the box on all four sides and 5px padding inside of the box on all four sides.[/sc][style] .padmarExample { max-width: 250px; max-height: 75px; background: black; padding: 5px; margin: 15px; } [/style]
This gives 15px spacing around the outside of the box on all four sides and 5px padding inside of the box on all four sides.
You can also set each side differently:
margin: 10px 5px 15px 20px;
(top margin is 10px, right margin is 5px, bottom margin is 15px, left margin is 20px);
margin: 10px 5px 15px;
(top margin is 10px, left and right margins are 5px, bottom margin is 15px);
margin: 10px 5px;
(top and bottom margins are 10px, right and left margins are 5px);
margin: 10px;
(all four margins are 10px). The values work the same for the

Box Sizing

Sometimes you want a box a certain size, but you don't want to do the math to adjust the size of the content box based on other properties used. The width and height properties (and min/max properties) includes content, padding and border with the value of
. In order to have the height and width exactly the size you want with the padding and margin included, you can use
box-sizing: border-box;
[sc=boxSExample]Box-Sizing Example here! See how it's a rectangular shape and not the expected square shape?[/sc] [style] .boxSExample { width: 250px; height: 250px; padding-top: 10px; padding-left: 3px; } [/style]
Box-Sizing Example here! See how it's a rectangular shape and not the expected square shape?
[sc=boxSExample]Box-Sizing Example here! Expected square shape instead![/sc] [style] .boxSExample { width: 250px; height: 250px; padding-top: 10px; padding-left: 3px; box-sizing: border-box; } [/style]
Box-Sizing Example here! Expected square shape instead!

Background Colour

As seen above, I set the background to black using the
property. You can use some colour names (all of which you can find listed here). You can also use rgb, rgba, hsl, hsla, or hexadecimal values.
[sc=rgbaExample]This sets the background to black with an opacity of 65%.[/sc] [style] .rgbaExample { width: 75%; height: 55px; background: rgba(0,0,0,65%); } [/style]
This sets the background to black with an opacity of 65%.
You can find more information about the different types of colour values here.
Make sure your background complies with the legibility guidelines, whether you use an image or colour for a background. If you define a background, you MUST define the text color as well. Colour contrast must be a minimum of 4.5:1 though anything within 4.5:1 to 7:1 is up to moderator discretion.

Background Gradients

Background gradients can be fickle. You can find all of the different types of gradients here. I recommend using a gradient generator to get it working exactly as you want, such as this one here.

Background Clip/Origin

Both the
properties do the same thing, except
applies to colour backgrounds, while
applies to image backgrounds. Declarations: -
background-clip: border-box;
This is default. This makes the background start at the top left corner of the border.
background-clip: padding-box;
The background starts at the top left corner of the padding.
background-clip: content-box;
This makes the background start at the top left corner of the content. (Basically, the padding will be around the background too.)

Background Images

To set a background, you use
background: url('IMGURLHERE');
When you use any images, background or otherwise, you must include a credit to the creator of the image, even if you made it yourself (crediting your own work is always a good practice!).

Background Size

Maybe your image is too large or it doesn't fit how you want it. Using
background-size: VALUEpx VALUEpx;
you can adjust its size. You can use the pixels unit or the percentages as the unit.
To make a background mobile friendly, you can use
background-size: 100% auto;

Background Repeat

If you need an image to repeat rather than cut off, you can use
background-repeat: repeat;
. Or use the value
to prevent it from repeating. If you only want it to repeat one way, you can use

Background Position

The default value for this is top left. The values are straightforward, so I'll simply list them off. Values:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
, and
center bottom

Background Attachment

These affect how the background appears when scrolling through the page. The values are
(the background image will scroll with the page, this is default),
(the background image will not scroll with the page), and
(the background image will scroll with the element's contents). These usually don't need to be used.


You can shorten some of these into one line like this:
background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
. You can leave out anything you don't intend to modify. If you use both the position and size in this line, you must include that slash to differentiate them. Usually this is best used to set the background image, colour (if using instead of image or as a fallback if the image doesn't load), and the position.


Basic Borders

To set up a border around your content box, you use
border: #px solid COLOUR;
[sc=borderEx]Border Example[/sc] [style] .borderEx { border: 2px solid #676767; } [/style]
Border Example
You can set up each border differently using
, and
. You can also set each part separately like this:
border-width: #px;
border-style: solid;
, and
border-color: COLOUR
. The different style values you can use are:
, or
(for no border).

Gradient Border

This bit of code is rather advanced. Please do not attempt it if you are just starting to learn CSS.
[style] .gradBorder { width: 60%; height: auto; padding: 6px 14px 2px 16px; border-top: 5px solid #d2ff52; border-bottom: 5px solid #91e842; background-position: 0 0, 100% 0; background-repeat: no-repeat; background-size: 5px 100%; background-color: white; color: #41680D; background-image: linear-gradient(to bottom, #d2ff52 0%, #91e842 100%), linear-gradient(to bottom, #d2ff52 0%, #91e842 100%); } [/style]
See how the border has a gradient?

Border Radius

Maybe you don't want the corners to meet perpendicularly. To round the corners, use
border-radius: #px;
. You can use pixels or percentage for this. The higher the number, the more rounded the corners are. You may want to add some extra padding so that text doesn't overlap on the border.
[sc=borderRadius]Rounded corners[/sc] [style] .borderRadius { border: 2px solid #676767; border-radius: 10px; }
Rounded corners

Border Outline

To use, you do
outline: black dashed 2px;
. Outline is a border that outlines the actual border.
[sc=outlineEx]In this example, the border is solid brown and the outline is dashed pink.[/sc] [style] .outlineEx { border: 3px solid #7d4627; background: #c9d8c5; outline: #edd9c0 dashed 2px; color: #527d98; padding: 5px; } [/style]
In this example, the border is solid brown and the outline is dashed pink.
Outlines do not follow a border radius, so keep that in mind if you use this and a border radius.


Text Colour

Whenever you set a baackground, you must set a text colour as well using
color: COLOUR;
. If you set a text colour, set the background as well! Remember to keep the contrast at 4.5:1 bare minimum.

Font Size

You can modify the size of your text. For the most part, headers being the main exception, you must keep your font between 10pt and 15pt. Some leniency is given to headers to be slightly larger, but text cannot be wrapped entirely in header tags. To do this, use
font-size: #pt;
. You can ONLY use the point unit for this property due to the legibility guidelines.


Most of the time, text is aligned to the left side, but this can be adjusted using
text-align: VALUE;
, with the possible values of
, or


There are hundreds of thousands of different fonts, but not all are considered websafe fonts. To modify the font, use
font-family: VALUE;
. All websafe fonts are listed here.

Font Styles

You can use
to bold text, and similar codes as well to underline or strikethrough text, or you can use CSS to achieve the same effect. Using
font-style: italic;
you can italicize words. To bold text, use
font-weight: bold;
; to underline, overline, or strikethrough text, use
text-decoration: underline;
(change the value to overline or line-through for a line over the text or strikethrough respectfully).

Text Transform

For text in all lowercase or uppercase, you don't necessarily have to always type in that way. Using
text-transform: uppercase;
, you can modify that. You can also use the value
to make every letter uppercase but in a smaller font as if it was still lowercase.

Text Shadows

You can give your text a shadow. Be careful with this as if it makes your text illegible, it can break legibility guidelines and you could be asked to change or remove it. To use,
text-shadow: h-shadow v-shadow blur-radius color;
, with h-shadow being how far to move the shadow from the origin horizontally and the v-shadow the same vertically. Multiple shadows can be separated with a comma.

Text Outlines

There are two ways to create an outline on your text. One is using the text shadow property:
[style] .txtShadowEx { color: black; font-size: 25pt; text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; } [/style]
Text outlined!
You can also use the
[style] .txtStrokeEx { -webkit-text-stroke: 1px white; color: black; font-size: 25pt; } [/style]


You must set a link colour when setting a background as well, however, simply setting the text colour will not change the links' colour. You must set it as following:


To modify headers, you use
, and
in place of a class. You can adjust their size this way, colour, and every other property you need.


Sometimes you have a set width and need to fix it. Usually, you can just adjust the height, but you can also use
overflow: hidden;
so that it doesn't fall out of the content box.
There's also the
overflow: auto;
which allows the text to scroll. However, this is only allowed when text is not meant to be read, such as for displaying long codes. Use of this code is otherwise forbidden in any templates, including about mes.


You can add extra spaces between each letter using
letter-spacing: #px;
or between words using
word-spacing: #px;

Line Height

You can also add or remove space between lines as well using
line-height: #px;
If you want to center a singular line of text in a content box, you can set the height of the content box to the same as the line-height.

Text Indent

In essays, people indent each paragraph. You can use
text-indent: #px;
to indent the first line of each paragraph.


Float allows you to have an image or class on the left or right of another image or class. To use, you do
float: left;
or you can change the value to
if you want the image or class to float to the right instead. Any text from the other class will flow around the item. To fix that, should that be wanted, you can use clear.


To use, you can use
clear: both;
to make sure both left and right sides are "cleared" and the classes after are pushed underneath. Changing the value to
to clear left or right side floated elements respectfully.

Text Flow Around Floated Object

Sometimes you have an image or block that you want text to flow around, so here's how to do it. While I used text in the block, you can use an image instead for a similar result.
[sc=container][sc=floatedBlock]My floated block.[/sc]This is the text that will flow around the block I have created. Some length will be necessary to get it long enough to the bottom of the block. But this will allow the text to flow around it as if it was still present in the flow.[/sc] [style] .container { width: 100%; // sets width of container text-align: justify; // justifies the text so you can see where the margins give space for the text .floatedBlock { float: right; // floats box right, can be set to left, if you do, change margin-left to margin-right margin-bottom: 5px; // gives some space to the bottom to push text from its bottom margin-left: 5px; // pushes text away from the left side in the flow width: 75px; // sets the width of the block border: 1px dotted #a00; // shows outside of the block padding: 2px; // padding for the text within } } [/style]
My floated block.
This is the text that will flow around the block I have created. Some length will be necessary to get it long enough to the bottom of the block. But this will allow the text to flow around it as if it was still present in the flow.


Lists are very useful. There are two types of lists: ordered lists and unordered lists. you can reference them using
respectfully. The list items itself are referenced using

List Style

You can change the default bullet point using
list-style: list-style-type list-style-position list-style-image
. You can find all of the values for list-style-type here and list-style-position here. To use an image, you just have to use
. Make sure to credit the image you use, even if you created it!


To reference tables, use
to reference the table as a whole,
to reference a table row,
to reference a table header, and
to reference a table cell.


To center a table, use
margin: 0 auto;
to align it. This doesn't affect the vertical alignment, but centers it horizontally.

Empty Cells

You can hide empty cells using
empty-cells: hide;
rather than having blank cells showing on your table.

Border Collapse

This is not often used, but you can find details about it here should you need to use it to separate cells. You can use
border-spacing: #px #px;
to adjust the spacing between cells.

Vertical Alignment

To vertically align content within a table, use
vertical-align: middle;
which allows you to center the content vertically inside each cell. To center it horizontally, you can still use
text-align: center;
to center it that way.


You can change the cursor, such as I did for the tabs in this template to make it similar to if you were clicking a link. Just use
cursor: VALUE;
and adjust the value to one of these:
, and
. You can hover over any of these to see what they look like.
You can also set it to an image using
, however you cannot use them in templates, but you may use them in personal skins.

Pointer Events

There are two types of pointer events. By default, you can select text or right click an image to open in a new tab. Alternatively, you can prevent the latter by using
pointer-events: none;
which would not allow items to be opened in a new tab. To refuse allowing text to be copied, you can utilise
user-select: none;
. You can also have it set to the value
so that on click, all of the text is selected, making it easier to copy (such as for forms).
Aemilia's AvatarAemilia
Aemilia's Avatar
Intermediate to Expert Codes
  • Selectors
  • HR
  • Columns
  • @Media
  • Positioning
  • Z-Index
  • Display
  • Visibility
  • Fonts
  • Transform
  • Animations
  • Navigation



Before I get into some of the selectors, I'm going to throw these miscallenous ones here. First, you can do
.class element
to select element with the parent of .class. This can be two elements, two classes, so long as one is a parent of the other. If you do this, this would include elements further in the code, such as if you do links inside of a .body class. This would affect ALL links, including those inside a class that's still within the .body class. If you don't want it to affect those inside of another class within the .body class, for example, then you can do
.body > a
to affect only links that are direct descendents of the .body class, with no other classes in between them. Often you may find yourself wanting to affect a different class when hovered over (hover is explained below), you can use
.class1:hover + .class2
where when the first class is hovered, it will affect the second class that is listed (which can still be swapped out for elements instead of a specific class). This selects the
placed immediately after
. If they aren't necessarily placed after each other, but are in the same parent component, you can use the sibling selector:
.class1:hover ~ .class2
. Understanding these means you can make some really intricate hover effects and even create your own tooltips, for example, from scratch without using the built in BBC if you wanted.
Adjacent classes are classes that come after each other, each class is opened and closed outside of each other. This means one is not opened inside of the other. Parent/child classes, however, are opened inside of the other.
is an example of adjacent classes, while
is an example of child/parent classes (class1 is the "parent" or first class and class2 is the "child" or inner class.


Used for links and selects the current active link (the exact moment that you are clicking it), used like this:


Used to insert something after an element or class. If I wanted to add an image after using a class, I can do this:
.class::after { content: url('IMGURL'); }
and style it as necessary such as modify size or padding. Using
content: 'stuff here';
can add text after the element, or an image similar to the example code above. The property
can be used in any block of code to add some sort of content there, but most commonly used alongside the


Used to insert something before an element or class. I've been using this every time I add a note:
[sc=note]My note![/sc] [style].note::before { content: url('https://pfq-static.com/img/farmbtns/farm_news.png'); margin-right: 2px; }[/style]
My note!


Selects every element or class that is the first in its parent, such as
which would only select the first
within each tab as it would be the first within its parent class (in this case


Hover effects! You can mix these with transitions to create a cool effect. You can make a link change colour or design when hovered over using
for example, but this is not limited to just links.


Similar to
except it selects the last element within its parent class or element.


Selects all unvisited links using
, which is the same as just using
to select them.


Selects everything except the class or element specified, such as
which would select all tabs except for the currently active tab.


This is similar to both
, except it gives you a little more control. The
is a counter and you can modify this variable to say
3n + 1
which would modify every third of its type starting with the first one. You can also use the values
to select every other one rather than figuring out the equation to use.


Modifies the colour and design of text selected by a user. I use this in my personal site skin to change the colour of the text and the background that is used rather than the default from the browser.


Selects every link that has been visited using this:

Horizontal Rule

To modify horizontal rules made using
, you select it using
from which you can recolour the line using both the
properties (you need to include both or on mobile there will be a gap in the middle!). You can also set it to an image! Make sure to set the height of the horizontal rule to the same size of the image or it will cut off. There are many effects you can do with these. I personally love the faded effect because it's simple looking and not terribly distracting. All of these codes are here for you to use if you wish. Change the colours to match your template! Fade effect:
hr { border: 0; height: 2px; background-image: linear-gradient(to right, rgba(214, 228, 49, 0), rgba(214, 228, 49, 0.75), rgba(214, 228, 49, 0)); }

Double curved effect:
hr { overflow: visible; /* For IE */ height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

Curved effect:
hr { height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px; } hr.before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px; }


Everything about columns and using them can be found in my journal at this post. Adding it directly to this post messes with the tabs due to how it is styled, but feel free to ask any and all questions you have here or message me directly. There's another way to use columns but is a lot less flexible and cannot be used as easily as a result, but you can read more about the properties here.


To make things mobile friendly, you can use
queries. For more details, you can read about it here, but I recommend using the built in classes through PFQ rather than media queries, which are outlined in the PFQ Codes section of the guide.


Sometimes you may need to move something or move it in some way. There are a few different values for it, but two of them are not allowed on PFQ and will not be discussed as a result. To use,
position: static;
is the property and the default value. Static just means that the elements are rendered in order of flow and cannot be modified. Changing the value to
renders the element or class relative to its first positioned non-static parent/ancestor element (as it may not necessarily be the direct parent). Using the
value allows you to position the element or class relative to its original position using the following properties:
, and
. For example,
left: 25px;
adds 25px to the left position, effectively moving it right 25px. You can use percentages instead. Be careful using this property as it can affect child elements.


Z-index is used for layering. Sometimes you to hide something under another element and on hover show it. You can use the z-index property and change it when something else is hovered over it to show it, or to layer something above or below another element. Use
z-index: #;
to change the ordering. There are no units used and the number can be negative.


I'm going to list each value used for the property
and then the use of each with the exception of two that I will be going more in depth with at the end. There's
, displays an element as an inline element and any height and width properties will have no effect (links are an example of an inline element);
, displays an element as a block element, it starts on a new line, and takes up the whole width (headers are an example of a block element);
, displays an element as an inline-level block container, the element itself is formatted as an inline element, but you can apply height and width values; and
which hides the content completely and is removed from the flow.


Flex is a really handy tool that allows things to be curated for mobile and PC. It's amazing for anything that could use a table or has content formatting similar to a table. The first thing you want to do is create a container to contain all of the flex items, which are classes within the container class:
I've also already added two styleclasses to represent two items within the flex box. Some properties you must apply to the parent container while others you can apply to the individual items. I'll start by listing everything that goes in the parent container. First, you must set the display:
display: flex;
. Next establish which direction you want the items to flow in using
flex-direction: row;
. The value
flows in a row in the same order it is listed,
flips the order but still flows in a row,
flows in a column in the same order it is listed,
flips the order but flows in a column. Now you can set how it wraps. By default, it will try to fit everything on the same line, but you can change that using
flex-wrap: nowrap;
which is the default I just mentioned,
value will allow the items to wrap to the next line or column if there isn't enough space available, and
will wrap into multiple lines or columns from bottom to top instead of top to bottom. Generally,
is the best value for this. You can combine these two properties into
flex-flow: column wrap;
for example, or whichever two values you need. Now you can choose how to align the items using
justify-content: center;
which centers the items,
is the default value and packs them at the top left corner and flows in the direction as you specified without modifying,
evenly spaces the items on each line with the first item on the starting line and the last item on the final line,
gives each item the same space on each side (which means double the space between middle items due to both having that unit of space on their left and right), and
which spaces everything equally. Next is
align-content: center;
which centers everything vertically even if the items are not the same height. The only only other value I would consider using is
to make each item the same height. You can use
column-gap: #px;
row-gap: #px;
or simply
gap: RG#px CG#px;
to determine the exact spacing between items. RG is short for row-gap and CG is short for column-gap, though if the values are the same, you only need to list it once. Now you can modify the individual items. Using
order: #;
you can set the order that they display in the flex box instead of reorganising the code to be in that order. Next is
flex-grow: 1;
for each item. If you need one to be larger than the others, you can raise the number to be bigger by that amount (a value of 2 would be as close to twice as large as it can make it). Similarly,
flex-shrink: 1;
allows an item to be slightly smaller. The
property is what allows the items to be "flexible" and move to a new line as necessary. A good guide to using flexbox and some of the other values not mentioned can be located here.


Grids are good for things that are two dimensional, while flex is better for simple layouts. Grids are great alternatives to using a table as it will automatically place as many items in a row as can fit on the viewer's display port (monitor/screen). Similar to flex box, you set up a container class and then the items within it. There's a lot of elements to setting these up and using so I will be offering free to use grid tables in the future, but a detailed guide to setting up your own can be loacted here.


Visibility is used to show or hide an element or class. Note that even if you use
visibility: hidden;
, the space that the element or class takes up is still present. To completely hide the element and remove from the space, use
display: none;
.class { visibility: hidden; height: 30px; width: 75px; }
Hover over me to show the hidden text!


You can use non-websafe fonts as well, however it can be a little more complicated to use. While there are other ways to have custom fonts, I recommend using Google Fonts to find them.

QUOTE originally posted by Niall

Using fonts on PFQ is a little buggy; instead of posting the font src you need to post the actual code. So copy the “fonts.googleapis.com” website, open it in your browser (it’s code) and paste the code over the code you posted below. Since this is an English website you only need Latin and Latin extended if they have it. Don’t forget to add the font family to your body CSS. Example:
[style].class { // Latin @font-face { } (The rest of your code) }[/style]


You can modify an element using transform. Note that whatever effect you use still needs to meet all legibility guidelines! The property
has several values it can take. Some examples are
, and
. You can read about each type of value here as there is quite a list, but these three are the most common of them and do exactly as they sound.


This is one section that I want to get someone else to assist with explaining as it is rather complex and a good portion of it does not work on PFQ.


The first way is to use the
property, which allows for something to ease into another version. This gets mixed with the
selector to transition, for example, text from white to pink. You can also do something more complex like this about me that I made, where the image turns over like a card. To use place in the block that does NOT have the hover selector used. It functions like this:
transition: property duration timing-function delay;
where property is the property you would like to transition (color for the example I gave above) or use the keyword all to affect every property, duration is how long you want the transition to last (I recommend around .5s for most transitions, though it may be slower or faster), timing-funtion can be a number of values (most commonly used are linear, ease-in, ease-out, and ease-in-out, the full list can be found here), delay (which is optional) can delay the start of the transition by however long you set it.


The other way is using the
property. PFQ has some animations that it uses. The name of each animations is: pulse, fade, pling, spin, nice_mainstar, nice_star, nice_popin, and nice_popout. These can be used within a post, however, make sure not to use it in a way that could be too quick and flash rapidly. To create your own animations, you would create a
declaration. These cannot be used within a post, but only in your site skin. To set up the animation you wish to create, use one of the following:
@keyframes animationName { from{property: value;} to{property: value;} } @keyframes animationName { 0%{property: value;} 50%{property: value;} 100%{property: value;} }
The first version is useful for when you have just the start and stop properties you want and only want those two values. The second is used for multiple stops so it does a few things (such as change text from a purple to pink to green) before it hits the end. The numbers for it can be changed, but the 0% and 100% need to be present. It can have more values in between (such as 82% if you wanted) with the same set up within it. After creating the animation, you need to apply it to something. Within the declaration block that you want it to apply to, use
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
. You can read more about each property here. Here's an example for skins that spins eggs when hovered over them (which is free to use):
@-ms-keyframes spin // for Explorer { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin // for Firefox { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin // for Chrome/Safari/Opera { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin // for Edge { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } #shelterpage #shelter #shelterarea > .pokemon[data-stage*="egg"] > img:hover { -webkit-animation-name: spin; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; }
Aemilia's AvatarAemilia
Aemilia's Avatar
PFQ Codes
  • Panels
  • Tooltips
  • Progress Bars
  • PKMN Panels
  • Tabs
  • .mq#
  • @import
  • Navigation


Panels are used for hide boxes, display boxes, stackboxes, and quotes. To modify them, you use the following code:
[style] .panel { background: COLOUR; border: #px solid COLOUR; color: COLOUR; > h3 { > a { color: COLOUR; } border: #px solid COLOUR; background: COLOUR; color: COLOUR; } > div { color: COLOUR; a:link, a:visited { color: COLOUR; } } } [/style]
changes the panels as a whole,
> h3
affects the header of the panel including text for stackboxes,
> a
affects the colour of the text for hide boxes and accordions,
> div
affects the contents of the panels. You can change the design more, add other proprties, etc., just make sure if a background or text colour is changed, you modify the rest so that everything stays legible.

Code Boxes

Note, these boxes are not for regular text, but for things that are not meant to be read like displaying codes. Click inside of the box for the code! This code is provided by Raca/Duckbug. You can change the scroll behaviour for these code boxes by adding
scroll-behavior: smooth;
in the div block of the code. This is the only time scrollbars are allowed in templates or posts in general.


[style] /*================================================*/ /*=================== CODE BOX ===================*/ /*======================= by Raca ================*/ // Be sure to use a panel (hide, display, accordion, or stackbox) within this code, otherwise it will not work. Enter info into the panel as you normally would. .codebox{ & .panel { border:2px solid #009900; background-color:#ffffff; border-radius: 6px 6px 0 6px; color:#000000; &>h3{ font: 12pt/normal monospace; direction: ltr;background-color:#000000; border-bottom:1px solid #009900; color:#009900; text-align:left; padding:4px; margin:0; &:first-child{ border-radius:5px 5px 0 0; } } &>div{ height:110px; max-height: auto; overflow-y:auto; background-attachment: fixed; padding:4px 10px 4px 4px; color:#000000; font: 10pt/normal monospace; direction: ltr; resize: vertical; border-radius: 0 0 0 5px; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } } } [/style] [styleclass=codebox][ --- PUT PANEL AFTER THIS LINE --- ][stackbox] [a-section=Code][/a-section] [/stackbox][ --- PUT PANEL BEFORE THIS LINE --- ][/styleclass]


Tooltips are useful for certain things in posts. To modify them, use the following code to modify them:
[style] div.tooltip_content { background: COLOUR; color: COLOUR; border: #px solid COLOUR; } .bbcode_tooltip { border-bottom: #px dotted COLOUR; } [/style]
affects the content of the tip while
affects the content that is to be hovered over for the tip. You can add more properties to make them seem fancier or otherwise more decorative.

Progress Bars

Progress bars are used to track things, such as a collection of summons or currency. Modify them using the following code:
[style] .expbar { background: COLOUR; color: COLOUR; border: #px solid COLOUR; > div { background: COLOUR; border-right: #px solid COLOUR; } } [/style]

PKMN Panels

[style] .party > div > .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'], .party > div > .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'], .party > div > .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'], .party > div > .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'], .party > div > .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] { background: COLOUR; } .party>div>.action>.berrybuttons[data-down='sour']>[data-berry='aspear'], .party>div>.action>.berrybuttons[data-down='spicy']>[data-berry='cheri'], .party>div>.action>.berrybuttons[data-down='dry']>[data-berry='chesto'], .party>div>.action>.berrybuttons[data-down='sweet']>[data-berry='pecha'], .party>div>.action>.berrybuttons[data-down='bitter']>[data-berry='rawst'] { background: COLOUR; } .party>div>.action a[data-berry]:after { border: #px solid COLOUR; } .party > div { background: COLOUR; color: COLOUR; border: #px solid COLOUR; box-shadow: #px #px #px COLOUR; a:link, a:visited { color: COLOUR; } } .party > div > .pkmn:before { border: #px solid COLOUR; background-color: COLOUR; } .party > div > .expbar { border: #px solid COLOUR; color: COLOUR; background: COLOUR; > div { background: COLOUR; border-right: #px solid COLOUR; } } div.tooltip_content { background: COLOUR; color: COLOUR; border: #px solid COLOUR; } .bbcode_tooltip { border-bottom: #px dotted COLOUR; } [/style]
The first long section changes the background colour for the liked berry, the second long section does the same for the disliked berry, from there, the background of the pkmn panel, progress bar for the exp to the next level, link of the pokemon, and tooltip content when hovering over the different berries.


I'm not going to go into detail about how to utilise vertical tabs due to how complicated they are and each template will require different codes to get it to work, but the default tabs are set to vertical that turn to horizontal tabs when on mobile. To create the basis of tabs within the template, use the following BBC:
[sc=tabbed_interface horizontal][ul][ ][li]Tab One[/li][ ][li]Tab Two[/li][ ][li]Tab Three[/li][ ][/ul][ ][sc=tab tab-active]Tab One Content[/sc][ ][sc=tab]Tab Two Content[/sc][ ][sc=tab]Tab Three Content[/sc][ ][/sc]
You must use the brackets at the end of each tab's styleclass and the beginning of the next one if you do not wish for the tabs to be forced to a new line after switching tabs and moving the tab content boxes down. To modify the styles of the tabs, use the following CSS:
[style] .tabbed_interface { background: COLOUR; border: none; box-shadow: COLOUR; & > ul { background: COLOUR; border: #px SOLID COLOUR; & > li { background: COLOUR; border: #px solid COLOUR; padding: #%; border: #px solid COLOUR; color: COLOUR; &.tab-active { background: COLOUR; } } & > li:hover { cursor: pointer; } } > .tab, > .tab-active { background: COLOUR; color: COLOUR; padding: #%; } }[/style]
is used to modify the tabs as an entirety,
& > ul
modifies the start of the tabs with the unordered list used for it, while the
& > li
modifies each individual tab, the
& > li:hover
affects when each tab is hovered over (in this case it only changes the cursor, but you can add other properties to change on hover as well), the
> .tab, > .tab-active
affects the tab contents. Any property can be added or modified to any of it to design the tabs as you would like, such as a box-shadow.


There are built in classes to modify based on screen width. Below are the cutoffs for each class:
To utilise the classes use
.mq# & ELEMENT
, replacing ELEMENT with whatever element or class you want to modify for the select screen's widths. For most mobile devices,
is used. By default, all codes affect
without issue and it is unnecessary to include.


Some people really want to protect their codes, or shorten it in some forme, especially with the character limit in place for signatures. This is possible by using a custom skin, without having to actually use it as your skin. Pull your entire code, including variables (you can keep the variables in the custom CSS, but you cannot leave the variables in the template with the rest of the code in the custom CSS area. Create a new skin, paste the code in the Extra CSS, then go back to your template. Use the following code to import that code into your template:
@import 'skins/user/b/P/V/TEMPLATENAME/__extra';
Replace the striked out part with your own shortcode provided on your party page, separating each letter/number with a slash.
Aemilia's AvatarAemilia
Aemilia's Avatar
Here's a list of resources to reference for various things concerning CSS: - W3Schools - CSS Tricks (good for random tricks and multiple ways to do things) - MDN Web Docs - Contrast Checker - Google! Whenever I can't figure something out myself, I always turn to Google first to see if it's a common issue that has an answer already given somewhere. - Colour Names - Types of Colour Values - Gradients - Columns as found in my journal - Guide to Flexbox - Guide to Grids - Google Fonts Here are some guides that also can be helpful: - QoL Script - BBCode Guide - Site Skins CSS - List of Items in Tables - Post Template Guide - Styleclass and You - CSS Reset Codes - ABC Clan
Aemilia's AvatarAemilia
Aemilia's Avatar
Frequently Asked Questions (FAQ)
Aemilia's AvatarAemilia
Aemilia's Avatar
extra reserved post
Aemilia's AvatarAemilia
Aemilia's Avatar
Aight, I've filled out all of the information now. Y'all can post all you want btw. If something is unclear or misspelled or think should be added, let me know! Any questions I see frequently will be added to the FAQ section to help others without having to search through many pages of information. I'd love to get some assistance with the animations section btw if anyone has experience with it. I'm not very good at it, but also what I do know doesn't work on PFQ so pointers for how to explain it would be lovely <3 To add: @import from skins Code boxes Comments Because I forgot these
louiserace's Avatarlouiserace
louiserace's Avatar
Hi This is all very good. I just wondered if you knew how to remove all borders and margins from a table. I have made the following table and managed to remove all borders now but I can't make the rows appear closer together.


1769 / 4300
10203 / 7500
683 / 9600
2831 / 11100
24 / 11350
16 / 11350
31 / 9600
441 / 11100
95 / 10600
12 / 11100
5919 / 9600
2330 / 11350
94 / 11100
1597 / 11100
29 / 11100
1182 / 11350
1597 / 10600
Please visit my shop
Avatar by Sharpy for my use only / Shop button by hamster
Aemilia's AvatarAemilia
Aemilia's Avatar

QUOTE originally posted by louiserace

Hi This is all very good. I just wondered if you knew how to remove all borders and margins from a table. I have made the following table and managed to remove all borders now but I can't make the rows appear closer together.


384 / 4300
3530 / 7500
3 / 9600
1013 / 11100
22 / 11350
10 / 11350
8 / 9600
32 / 11100
118 / 10600
8 / 11100
10 / 9600
5 / 11350
305 / 11100
1200 / 11100
8 / 11100
10 / 11350
8 / 10600
So it's actually the margins on the progress bars causing this! Just add .expbar{margin:0;} to remove the space completely!

Pages: 123··· 192021

Cannot post: Please log in to post

© PokéFarm 2009-2023 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page