Project Grace 02: Basic HTML and CSS deconstruction
Consider this article “basic orientation.” The focus here is to detail how to get a handle on the basic structural design of a Pika page and where the cascading style sheet (CSS) code resides within the current version 3.06 of Pika. I will rely on some of the web developer tools described in Project Grace 01: Get your Firebug on to demonstrate how to do that.
The first sacrificial lamb in support of Project Grace is, predictably, the Pika Home Page. Out of the box here is what that page looks like:
Understanding the underlying structure of the Home Page
Let’s do some basic deconstruction. Using the Web Developer Toolbar, select CSS > Disable Styles > All Styles. Now the Pika Home Page displays stripped of all its custom CSS presentational characteristics. What you see is how your browser by default displays the page’s HTML structural markup in the same order as the markup appears in the “flow” of the underlying web page:
Looking at this page “naked,” even without looking at the actual markup behind the page display, those familiar with basic web page design will notice that the underlying structure of the page relies on tables, rather than CSS, to control the basic layout of the page. The three apparent columns in the middle (“Frequent Tasks,” “Message Board” and “Learn to Use Pika”) are dead give-aways. Again using the Web Developer Toolbar, to confirm this observation select Outline > Outline Tables > Tables, revealing that the page uses a table at the top for the “header” area, below which is a second table for the “middle-content” area:
To see the table cells that control the three columns in that middle-content area, select Outline > Outline Tables > Table Cells:
Since this stage of Project Grace is an attempt at a benign CSS makeover of the default Pika 3.06 presentational design, I will refrain from my usual rant about the misuse of tables to control page layout this way. At the very least it is not optimal. It’s OK and it works and, admittedly, it assures backward compatibility with now generations-old web browsers. But with the advent of increasingly CSS-standards compliant browsers, including IE7 (much improved) and Firefox 2.0 (way better), such design approaches are increasingly harder to defend. But I digress.
The final structural piece is the page “footer” at the bottom. To see what that’s all about, let me show you three ways to Sunday using three different tools to figure out that bit of markup.
First, make sure you have refreshed the Pika Home Page to get rid of the any earlier selections you made using the Web Developer Toolbar and you can see the default Pika page design again. Good to go? Now select CSS > View Style Information. Then scroll down to the bottom of the page where the “footer” is located and hover — but don’t click — your mouse (which changes into a cross-hair) over that area so that it is highlighted with a thin red border:
If you look up at the Web Developer Toolbar, it has opened a new information box immediately below the toolbar itself, revealing the underlying structural hierarchy for the highlighted page element, including the name of any id or class attributes:
(I will explain below what else happens when you click on the page element using this feature.)
Second, try using the XRAY bookmarklet. Click on it and then click on the footer area at the bottom of the page. (You may need to experiment with where you click to get results for the entire footer element, rather than other elements embedded within it.) The XRAY box displays basic information about that page element: It’s a div with an id attribute named “footer” and the inheritance hierarchy is html > body > div, all essential and useful information for working with CSS:
Third, let’s give Firebug a shot at this. Activate Firebug and in the Inspection window pane select “HTML” and then “Inspect.” Hover your mouse over the footer area to assure you have selected the whole footer area (you will see the blue border change so you can see which area is active within the Firebug inspection window), and then click the area to select it:
In the left pane you will see the “footer” div highlighted, as well as the structural hierarchy of that page element revealed, i.e., html > body > div.
Locating the CSS code
Here are a few ways to figure out where the CSS code is for any Pika page:
Be sure to close out Firebug and refresh your browser window. You should be back to the default Pika Home Page design. Using the Web Developer Toolbar, select CSS > View CSS. This triggers a new page listing all embedded CSS styles followed by the file location and contents of all external CSS styles affecting the presentational characteristics of the page. (As far as I can tell, this feature in the Web Developer Toolbar does not reveal inline CSS styles.)
When you invoke this feature, you’ll see that all the basic CSS code is located in the Pika CSS subdirectory at /pika/css/screen.css.php. Conveniently, the CSS file location is linked so you can open up the CSS code into a separate web page for review. For locating the CSS code specific to a particular page element, select CSS > View Style Information and then click on a page element. For example, if you click on the footer element discussed above, you will see the CSS code illustrated to the left.
Another way to go is to use Firebug to locate the CSS file location and the CSS code that relates to any selected page element. I am not going to repeat so much how that works, detailed here in the prior article. Suffice it to say that if you invoke Firebug and from the inspection window select HTML and Inspect, and then click anywhere on the page, you will see in the right pane the corresponding CSS code and where the file is located containing the code, illustrated here to the right and highlighted in yellow. The CSS file location is clickable, so if you want to get the whole CSS enchilada, not just the code for a particular element, go ahead and click it and Firebug opens up the whole CSS file in the Firebug window. Nice.
The effort here has been to suggest several different ways to deconstruct Pika pages to give you the basic information you need to restyle its pages elements. On balance, I prefer using Firebug for both the HTML and CSS excavation processes described above. But that’s me. There is more than one route to the mountain top and you now know where several of those paths are to your innner HTML and CSS geek.
You’re oriented. You’ve got a handle on the basic structural markup of a Pika page. You know where the CSS code is located. You know how to zone in on the CSS code for any particular page element using various web developer tools to extract that information. Time now to do some Pika CSS style rebuilding, the whole point of this first stage of Project Grace. Onward to Project Grace 03: Rebuilding the CSS from scratch!