Welcome back to Part 7 of Lesson 3 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to learn how to use Firebug and Web Developer together.
Viewing the HTML Structure of a Page
Here we are at my homepage and if we look down here in Firebug, we have 2 windows. We have the HTML structure window and we have the CSS window. The first large division of the HTML structure is the head and the body. And so if you expand the head for a moment, you can see all of the different elements that are in the head of this web page plus a bunch that actually aren’t but are inserted by these 2 plugins for their own use.
Visual Cues in Firebug
There’s a bit of color coding that’s going on here, obviously. This light blue color here that overlays everything is indicative of the entire section that you’re looking at. So the body is, of course, everything. The div id container is the main containing element and it’s only this section. Notice the yellow up at the top. That is indicative of margins so that’s telling us there’s a margin there. And if we come down here to page, this purple color is indicative of padding so that represents the padding that’s on that page.
Examine the CSS
And then if we take a look at page and we come down here to breadcrumbs and hover over breadcrumbs for a moment, you can see there is the line where the breadcrumb trail is on this page and you can see the padding that is part of that. But over here on the right hand side, you can see the styling that is also associated with the breadcrumb. In addition to that, what you have is this little on/off button that shows up to the left hand side of these things and if you click on this, you can turn that characteristic off.
Now that definition shows up down here too so we also have to turn off there but you’ll notice that when we turn this off, that will lose its bold characteristic. It’s just for the purpose of testing things, this doesn’t actually affect anything other than the view at the time and you can always just refresh this and it’ll go back to normal. You can also turn them on and off, go back and forth. But anyway, that’s one of the features of Firebug. It allows you to test altering things here. It will also allow you to change these values so you could select this element called “font size” and make it a 2 and you can see what happens to the breadcrumb. It just gets really big.
Thesis Theme HTML Structure – Firebug and Web Developer
Next we want to take a look at the HTML structure of a Thesis theme page; go to my website thesiscss.com and we’ll take a look at this image for a moment. This is the main organizational structure of a Thesis page framework page. It starts off with a body and then the content and the page and then inside of page, it has menu, header, content box, and footer.
And so if we take a look at that in Firebug here, you can see that here’s the body that covers everything. And then we’ve got container which again, we probably need to expand… there we go. So we can see container, so this was body covering the entire screen. This is container covering that section of the screen. If we open that up, here’s page which is the white portion of the screen. Inside of page, we have menu which is menu and then header which is that header section and then content box and then footer.
And so it’s important to have a good sense of how a Thesis theme page is organized and see how that organizational structure is exposed in this HTML tab. If you do any regular editing of your CSS at all, you’ll become very familiar with this standard organization.
Descendants in CSS – Firebug and Web Developer
Now let’s come back over to my homepage and we’re going to muck about a little bit with editing and we’re going to learn something about a concept called “descendants” and we’re going to do that with a menu.
So let’s go ahead and expand this a bit and we’re going to open up container and then page and then menu. In menu, this is the highest level of menu and the highest level of any of the elements within the menu and so it is the highest descendant. And so you can see that over here, we have a .custom .menu where I have assigned a certain background color and a border width and unless it’s overridden in a lower descendant, this the controlling color and border style.
Same thing is true with border color here, .menu is the highest one so border color here will apply unless a more specific descendant has another definition. So here we are at UL class menu and its descendants are these LIs. You can see that that is menu or .menu LI and in this case, we have a .custom .menu LI definition over here in our custom definitions which eliminates that bottom margin.
And then the next level of descendancy down will be the a and of this, it could just as easily say custom .menu LI a, the LI is not necessary because this a is going to affect all of our linked elements inside of .menu and so it is descendant of .menu. But we also have another level within that and that is current a. Because this is our current tab, we have a .menu .current a which is different. That is, it’s got a white background and it’s got a black text color. It’s different than our standard tab or our standard menu a which has a white text color and has this blue background.
So we move from menu to menu a to menu current a in a pattern of descendancy each more specific having less total control but more specific control over the element. So one more time, the main descendant the menu is .menu, the next descendant down is .menu a and then the third descendant down here is .menu current a.
Okay so now let’s take a look at what controls those elements. Let’s take a look at custom menu a, we can see that custom menu a is controlling border width and padding and then current menu a or menu current a is controlling background and color and menu current a is controlling the border bottom color and also controlling the cursor.
Change the Style Using Firebug and Web Developer Together
Let’s go ahead and change some of that. We are going to change this current tab and we’ll begin with its background color. I want to start off by selecting the descendant that controls background color which is .menu .current a. So I’m going to copy that. Come back over here to Web Developer, give myself a space, type .custom space. Paste that in place then give it a couple of curly braces. And now, tab it a little bit, and I’m going to say background color red. Okay, that made the background of current a red.
If I was to have menu .custom menu a, it would have applied to all of them but since I have current, its descendant, and it just covers the current one. So you got a background color of red. We could also add a text color of white and now we’ve overridden this black text color and we can also make it italic. So font style: italic. And there you have it.
We have identified the current menu or custom menu current a as the selector that we want to effect and only that selector and then we’ve given it a background color of red with a text color of white and a font style of italic. Now if we make that stick for a moment and come over here to a different tab, you can see that now instead of being tab home or a tab1, and it has made that same change, unfortunately because we made it italic, it also made it too big for this thing to display correctly and so it bumped this down.
Essentially, what’s happening is it is behaving the way we would expect it to behave. That is, it is giving current element this background color of red. Now if we refresh this button or reset this button, it gets rid of all of that stuff. And if we come back over here and look at our custom CSS, we can see that all of that custom CSS that we typed in here is gone. So if we want to hang on to it, it’s important for us to copy it and place it some place.
Okay, that wraps up Part 7 of the Lesson 3, Use Firebug and Web Developer Together, of the Customize Thesis Like a Pro tutorial series.