Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
PFQ Codes
- Panels
- Tooltips
- Progress Bars
- PKMN Panels
- Tabs
- .mq#
- @import
- Navigation
Panels
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]
The .panel
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 addingscroll-behavior: smooth;
in the div block of the code. This is the only time scrollbars are allowed in templates or posts in general.
Code
[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
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]
The div.tooltip_content
affects the content of the tip while .bbcode_tooltip
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.Tabs
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]
The .tabbed_inferface
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..mq#
There are built in classes to modify based on screen width. Below are the cutoffs for each class:| Class | Max-Width |
|---|---|
| .mq1 | 320px |
| .mq15 | 480px |
| .mq2 | 640px |
| .mq25 | 800px |
| .mq3 | 960px |
| .mq35 | 1240px |
| .mq4 | 1280px |
| .mq45 | 1440px |
| .mq5 | 1600px |
.mq# & ELEMENT
, replacing ELEMENT with whatever element or class you want to modify for the select screen's widths. For most mobile devices, .mq2
is used. By default, all codes affect .mq5
without issue and it is unnecessary to include.@import
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.Navigation
- Introduction to CSS - Beginner to Intermediate Codes - Intermediate to Expert Codes - PFQ Codes (you are here) - Resources - FAQ
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
