Loading...

Top
PFQ Banner

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

Already a user? New to PFQ?

Single post in Styleclass and You: An Introduction

Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >

Niall's AvatarNiall
Niall's Avatar
You might want to try tabs! They are what are used all across PFQ: shiny hunting, albino hunting, summon unlocking, buying Hypermode vouchers, buying upgrades for scours and the daycare, and more! In fact, at the time of writing, Eltafez's signature uses tabs. I would suggest going to at least one of those pages to see what they look like. There are two styles as well, horizontal and vertical. Horizontal is when the tabs are spread across the top, like in Elta's signature or the daycare, while vertical is like the summons page or the shiny hunting page, where they have a column of buttons to press. To make either, first you need to plan how many tabs you want. It's not like an accordion where you can just add another a-section; both the header and content are separate. First you want an unordered list (ul). Then add list items (li) for each name of a button. You can add extra buttons that don't do anything: buttons that don't have a corresponding content to open will close everything, like the X in the corner of your screen. Underneath that, you want to make boxes with the styleclass code to act as content boxes. Make sure you're careful with white space here because it makes the thing wonky for some reason. Finally, surround the entire thing with a styleclass called "tabbed_interface" followed by the word horizontal or vertical. Then in your style sheet, add "li { }" for the buttons and ".tab { }" for the content. You can also theme "li.tab-active { }" and ".tab-active { }", the two codes for open tabs with pressed buttons. And double finally, you can force boxes to start open (like adding a number to the accordion BBCode so that it starts with one open) by naming the tab "tab-active". I am unsure if there is a way to make the button look pressed automatically. TL;DR:

[styleclass=tabbed_interface horizontal][ul][ ][li]Tab 1[/li][li]Tab 2[/li][li]Tab 3[/li][/ul][ ][styleclass=tab-active]Open: Tab 1[/styleclass][ ][styleclass=tab]Tab 2[/styleclass][ ][styleclass=tab]Tab 3[/styleclass][ ][/styleclass][style]li { } li.tab-active { } .tab { } .tab-active { }[/style]
  • Tab 1
  • Tab 2
  • Tab 3
Open: Tab 1
Tab 2
Tab 3
© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page