HTML Element Hierarchy Needed

icouto

I would like to try and design new styles FROM SCRATCH for the default Vanilla theme, but I'm finding it a bit daunting. I find that the best way to design a good style sheet is to start by really getting to know the HTML hierarchy of the page you are trying to format. Unfortunately (or fortunately, depends how you look at it), each of the few CSS documents in Vanilla is used by several possible html pages which are output by the php code. This is where I'm getting stuck. Take, for instance, the "people" page - which seems to be used for signing in. Even for signing in, there are actually several possible pages (depending on whether a warning is being shown or not, for instance). It is difficult to design a totally different layout, unless I can have a really good idea of what the maximum number of items is going to be on that page - and what the "id"s and "classes" of all of these items are. I was wondering, if anywhere there is some sort of 'schematic diagram' or the full HTML element hierarchy of the pages outputted by Vanilla. If not, what pages should we be looking at if we want to design, let's say, an entirely new style, FROM SCRATCH, for the default Vanilla theme?

jeffbax

I had the same issue, the best suggestion I can give you is to just focus on say the top bar, side bar etc one at a time.

Bergamot

If you're using Firefox, I highly recommend the Web Developer Toolbar extension. "Outline Current Element" is absolutely indispensable when doing CSS work.

ithcy

also Firebug... the inspect tool is my #1 webdev friend.

icouto

Thank you all for your great tips! @Bergamot: WOW, that FireFox extension is absolutely AWESOME!

icouto

For all those doing CSS work on a Macintosh, I would strongly suggest checking out the excellent CSSEdit, by MacRabbit. I have just recently discovered this program, and it is fantastic.