Styleclass and You: An Introduction

Aaaahhhh, this is a great guide for style codes *-* too bad any code-related thing doesn't sit with me very well for a looooong time x~x oh well, I suppose it just takes me an obscene ampunt of time to learn, eh? (': @Niall; thank you, so so much for creating this guide! For now I'll stick with the simple style codes I remember using (from going through Sei's legibility guide and simple style codes on templates that came soon after the update), til I can get a timw to fiddle with it ^^'

Ahhh, now I see what my problem was. Thank you for the help~ And for the other classes it was just because I had tried them and they didn't work the first time. They aren't needed for the template I'm doing though.

Thank you everyone for your input and nice words (´ω｀♡) Just an update: I have "fixed" the third post, which was programmed on purpose to use your skin's colors for panels (so it stayed legible as long as your skin is legible in the first place), as it was fighting with the examples' coding ("here's how to make links a different color!" *links all look the same*). With some Internet searching™ I found a solution and edited the code back in! (for those of you at home, here you go) I also reworded the mini-guide to making templates mobile-friendly. I love to surf the forums on my iPhone, but cannot stand when templates are forced to be 600 pixels wide, for example, as scrolling on my phone means I'm viewing things at around 310 pixels wide. So remember, Alt + 1, and don't use pixels! If you have any questions, let me know ＼(￣▽￣)／

Ah, what a lovely guide >.> Also, thank god for you adding that part about mobile compatibility. I cringe while on my phone every time I see a template where I can't read the text. I'm gonna stalk watch this and answer questions as they come.

Do you know of a site where I can find color hex codes? -Thank you, Weasel.

I do! Here is the site I use

I was wondering how you make tabs appear with style formatting. I've been using only CSS and I've found out that the only way to make tabs from scratch with with style instead. Perhaps might anyone be willing to explain how to make a tab that only shows information when clicked on/have a curser hover over it? Or even buttons that make differnet text visable when clicked? (the hover code I believe) I was looking in this guide to try and find out about this sort of thing but I'm completely lost. I've tried looking at other people's tab codes to see if I could make any sense of it but obviously the tabs they have aren't the only styles that they include, and it's mixed with lots of other code which causes me to end up even more confused. Any help would be greatly appriciated ^^;

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:

thanks so much for the input! I know howto color tabs now ^^ I'm ganna take these to my journal and play around with 'em :3

Don't forget to add "color: white;" with your background color! My skin makes tabs have black text so I just see a black bar in your post, lol.