Taking Your Camera on the Road

With the move to WordPress v1.5, things are a little more challenging for creating a CSS file. As I mentioned, the header, footer, index page, and other elements are now divided up into pages which are "included" in the main index.page. A div or class will start in one template file and finish in another, so things get a little crazy and confusing.

I realized that the effort to install Apache, PHP, MySQL and WordPress to my computer to help me create my new WordPress site look and Theme was not the way to go. Everything in WordPress is done "online" and I needed to tweak my Theme without being online all the time.

I created a test story content and pasted it into a WordPress entry, filling in the title and choosing a few random categories. I used different headings all the way from H1 to H5 so I would see what the Theme I'd chosen would do with them, adding nonsense text between the headings. I created a list, then a couple of nested lists, going a few layers down, so I could see what would happen with those styles. I added some graphics, and basically made it look like a regular one of my articles. I saved the post and then viewed the file on my test site.

Viewing the source code, I copied it and pasted it in a new text file I saved on my hard drive in the WordPress directory where my test theme was located under the name "testing.html" - not on my site. Using the ability to view web pages from a hard drive, I knew I could work with this test file on my computer and not consume bandwidth and waste time with frequent uploads of the modified style sheet and html page as I work on it. I found out later that this technique is called a sandbox.

The style sheet link in the head was changed to the local style sheet file in the testing.html, and then the step-by-step process of modifying the CSS file begins.

Sorting the Style Sheet

The first thing I noticed is that the style sheet was sorted alphabetically. Why anyone would do that....well, that's another topic, anyway, I wanted to "see" my page via the CSS so I quickly went through and grouped related things together with headers. For instance, I wanted the core structure of my site all together, so that when I changed the width of the sidebar, I could change the width of the content without jumping from "s" to "c". If I want to change of my headings, I want all my headings in one place so I can make sure that the font size of H2 is larger than H3 which is larger than H4, and so on. Once that was done, I started with the basic elements.

Starting simply, I changed the basic font in the body tag, and then in the paragraph tag, which is grouped with the list and feedback tags in the classic layout. These can be changed and separated later. I also added a font in the header to control the look of the header differently from the rest of the page.

The next step was to identify which section is which. I went through the structure tags and for every ID and major class I gave it a colored border like border: solid 1px red to help identify which CSS selector referenced which section.

After viewing the file with the new borders put in place, I now had a different color around each section. I identified which section was the header, sidebar, footer, content, and so on, and went back into the style sheet and put comments in to help me know which style matched which section, like this:

/* header styles */
#header {margin:10px; padding: 5px; ...}

As I went along, if I found some styles that would go in the header, then I moved them in the style sheet to the header section, same with the footer, content, and so on, grouping related styles together.

I always call the sidebar the sidebar in my styles, but I found that the sidebar in this theme is called menu, identified by the colored border around it. With the sidebar/menu outlined, I now knew basically its dimensions. It was on the right side of the page and I wanted it on the left. So I moved it by changing the position to the left side of the page. The main content area is now overlapped and the width is screwed up, but one thing at a time.

As I went through the CSS, I found the reference to the calendar. Since I won't be using that, I deleted all the calendar style codes, but left the reference in the html. Right now I'm concentrating on the style sheet and not touching the html. I will get to that later. One thing at a time.

I changed the header to be 100% across and the height to be 120px. This makes room for the banner graphic from our old site set in the background. There is no H1 style code in the style sheet, but it does appear in the header - in fact, it is the header, listed as <h1 id="header">. This makes the header interesting as it will shrink or expand based upon the font size and the amount of text that wraps around, though it can be influenced by the specific height of the DIV. Since the H1 tag is the header, the only text in the header would be inside of the H1 tag. This makes it a little limiting. I may have to change this when I get to the html.

Now, the main content has to be modified to move over to the right to accommodate the new placement of the sidebar. I changed the CSS to match our unique page layout design that I developed. I guess it's not so unique any more. I spent months developing it for our site and writing about it, and now, four years later, it's a standard and not much different from WordPress's core Themes. It was sure innovative at the time, but I guess I was ahead of my time. Anyway, the text in the content section went right up against the edges of the box, so I added padding to give it some "room".

There is a lot more that I will need to fix in the sidebar/menu, but right now, things need to be fixed in the main content area.

The Content Section

Links are very important to the success of a page and I love the links I had set up with my old website, so I just popped them back in. They feature several characteristics dependent upon what they do. Here they are:

a {color:#0000CC}
a[href], a, a:visited, a.external:link, a:hover, a:active {text-decoration:none}
a {border:0;margin:0;padding:0}
a:visited {color:#006699}
a:hover {color:#003399; background:#CCFFFF; border-bottom:2px solid #003399; border-top:2px solid #003399; border-left:0; border-right:0}
a.external:link, a.external:visited {border-bottom:0.05em dotted}
a.related:link, a.related:visited {font-weight:normal}

I will tweak with these when I get the rest of the styles done, but for now, I'm happy with the familiar. Ah, I made a note to remember to set the links in my sidebar menu to either have or not have the borders on the hover characteristic as they will be influenced by these links. I make so many notes as I go through this...but I have to. There is so much to do and the memory...well, it is whelmed by all the stuff on the "to do" list.

Then I add my list from my old site, but changed to match the new selector names. I like my link graphics, so I decided to keep them for now, too. They look like this:

.storycontent ul li, .storycontent li.number {list-style-type:upper-alpha}
.storycontent ul {margin:0.3em 2em; list-style-position:outside; list-style:url(ball.gif) disc; font-size:98%}
.storycontent ul ul {margin-top:0.3em; list-style:url(bullet.gif) square; font-size:96%}
.storycontent ul ul ul {margin-top:0.3em; list-style:url(ball1.gif) circle; font-size:95%}

You noticed I kept them in the storycontent section. I wanted them to stay there and not be inherited in the sidebar menu's set of links. This is planning ahead, and learning from lessons I made in the past.

The headings are a bit more challenging. The top three (h1, h2, and h3) are assigned to specific information. H1 is the site title and represents the entire header. H2 is the date and H3 is the story title. I will be moving the date and will want it small, so I'm going to do some fiddling with these defaults.

I want to change the H2 to my story title and have the H3 be the sub-sections within the article. I will then use H4 as a sub-subsection, stylized very simply. The H3 heading I've designed to be very distinctive and I like it. I use a repeated graphic, one of our nature photographs, in the background and change it according to the seasons. It is styled like this:

h3 {clear:right; color:white; font-size:140%; font-weight:bold; padding:8px; margin-top:1em; margin-left:-10px; background:url(h3icebar.gif) repeat #000099}
h3 a {color:white}
h3 a:visited {color:white}

I am also particularly fond of the design of my blockquote. I discovered part of it while working on my CSS experiments and then tweaked it to suit my own needs. It features two sets of opened and closed graphic quote marks around the quote, with the author's name in small italics. Since I already have all my blockquotes stylized within the content I'm uploading to the database, I decided to keep my blockquote design. I simply replaced the default blockquote with mine. For reference, here it is:

blockquote {color:navy; font-style:italic; font-size:105%}
blockquote i {color:#3366CC; font-style:normal; font-size:70%; text-align:right}
#nickwrapper {display:block; position:relative; width:80%; margin:10px 0px 10px}
blockquote.nick {margin:5px 0px; background:transparent url(quotel.gif) left top no-repeat}
blockquote.nick div {padding:0 53px; background:transparent url(quoter.gif) right bottom no-repeat}

The layout in the HTML is:

<div id="nickwrapper">
<blockquote class="nick"><div>You have learned something, and I have learned something.<br />
Too bad we didn't learn it sooner.<br />
We could have gone to the movies instead.<br />
<i>Balki Bartokomous, TV show: Perfect Strangers </i></div></blockquote></div>

I also added a bunch of details from my old site that include specific text colors, boxes for highlight content, and other elements that add to the overall look of the page. I simply copied and pasted these into the style sheet. They will appear with the content which already holds these HTML and CSS references in my articles imported last week into the database.

Now to the really challenging aspect of the style sheet in WordPress - the Sidebar Menu!

The Sidebar Menu

The menu hosts some oddities that make working with the styles different from most containers. The whole thing is set up inside a series of nested lists. Nested lists, like the table layouts of old, can be a nightmare unless properly laid out. Since nested lists inherit style values from the list style above it, it can be difficult to create truly distinctive looks for each section. WordPress tries to make this easier by using classes for each section, but it is still challenging if your desire is to create distinctive looks for each section.

Here is the basic and very simple layout of the nested lists that come with the default setup of WordPress to help you keep track:

#menu
#menu ul
#menu ul li - Heading Title: Categories
#menu ul ul li - Links List Under Categories
#menu ul ul ul.children - Sub-List Under Categories (for subcategories)
#menu ul li - Heading Title: Search
#menu ul ul li - Links List Under Search
#menu ul li - Heading Title: Archives
#menu ul ul li - Links List Under Archives
#menu ul li - Heading Title: Meta
#menu ul ul li - Links List Under Meta

See the repeating patterns? If you change the look of #menu ul ul li, you change the look for each section featuring that selector reference. If you want a different look for your Categories list and a different look for your Archives list, WordPress tries to make it easier because, while they are not listed in the style sheet of this theme, they may be in others, so you need to know or make sure each section features its own ID. They are:

#categories
#search
#archives
#meta

To change the look of the list identified as "categories", type in #categories in your style sheet and then make the modifications you want. Same for the rest of the list. This way, you can have your categories be a large font with a blue background, and the rest of your lists feature smaller fonts with pink backgrounds...or whatever. Experiment with different looks to get the one you want.

To add to the confusion when it comes to stylizing the style sheet, you need to understand that these are nested lists of links which inherit the "parent" style. This makes the issue of styling these doubly hard.

Links typically have their own style. They have an inactive, static look before they are clicked, a style when the mouse moves over the link, and another style after the link has been visited. Because you are dealing with the issue of the parent/child relationship of the nested list and the fact that these are links, we got the link styles actually becoming the parents to the list, which makes the list become a child, and each nested list has it's own parent/child issues within it. Oh, boy!!

Try to following the bouncing CSS drama for the sidebar, if I can explain it well enough.

links/anchors

The links tend to be set for the entire document, which would make their styles become the parent to the links within the menu. If you want them styled differently, each style, as listed below, must feature its own link style.

#menu

The ID for the entire section is #menu. It sets the whole look for the entire sidebar menu including the background, fonts, sizes, etc. To change the overall look for the entire sidebar menu, make changes here. For text and non-list and non-link items, the codes within the menu style will become the parent style for the sidebar.

#menu ul

This is the opening of the list and sets the overall look of the entire list under the menu style. If you have an unordered list list within your content, it will look different from this list, unless you have the list styled on its own and not under the content style (such as #content ul. If you don't, the styles for the ul become the parent to this list. If you are having a problem trying to adjust the look of the sidebar/menu list, check for the parent ul for the source of the trouble.

From here, any changes to the relative font size, type, or style will be given to the list unless specifically modified in each section. For examples, if you set the font to be 90% of the basefont of the rest of the document, and set the font to 80% in the next list, the font size will actually be 80% of the 90% parent of the 100% grandparent (so to speak) style, making the font actually 70% of the base font, which is pretty small. Play around with creating different looks, but remember, the ones below (children) start from the references created here.

#menu ul li

This is the first actual list of links. WordPress uses this to establish the look for the Categories, Search, Archives, and Meta titles or headings. Remember, these are the static headings that give these titles, they are not actual links. The actual li tags are labeled with IDs relative to their type, be it Categories, Archives, Search, and Meta. Because these are all connected via their own list, when you change the #menu ul li style, you change all of them. But you can individualize these headings, but remember, they inherit the layout of the #menu ul li so play around with this to make each section different. To change the look of the links below the headings, you need the next style.

#menu ul ul

This establishes the outline of the first list of links to actual information. If you want this list area to have a specific background color or image, or be highlighted in some way, this is where you make those modifications. For example, if you want your overall background for the sidebar menu to be yellow and yet you want each section of links to be in a box with a background color of green, you would change it here. You influence the look of the actual list links in the next section.

#menu ul ul li

This section is the sub-list of the main list and contains the specific categories under Categories, the months under Archives, and so on. This section formats the look of the items, which are links, in the list itself. If you would like the list to have bullets, graphic images, or default squares or discs, you set this information here. Remember, these lists are lists of links and while you can change the look of the lists, you need to change the look of the link features elsewhere.

#menu ul ul li a:link

If you want to change the look of the links in the list of links under the different titles, this would be the most basic link style you would add. It might look like this in the style sheet:

#menu ul ul li a:link {color:red; font-weight: bold}

Because the above #menu ul ul li only stylizes the "look" of the list and not the link itself, you have to change the look of the link here.

#menu ul ul li a:hover

When the mouse moves over a link, you can change the way the link looks by styling the hover attribute. Many people choose to have an underline appear, or to have the colors of the words change. Others get more dramatic and have the background color change, too, or any combination of these. Beginners often set the hover to "bold" when the link isn't bold when resting. When text is bolded, it adds weight to the size of the font and makes it slightly larger. This sudden enlarging of your text pushes the other content around, often causing the whole page to jump around a little. Be sure and bold both the inactive link (anchor) and the hover to make it stay the same size if you want the look to be bold. From there, use your imagination.

Here is an example of a basic hover effect and how to use it with this style:

#menu ul ul li a:hover {color:purple; background: yellow; text-decoration:underline}

Remember, if you have a straight a:hover styled elsewhere, it will become the parent to this style and you have to check there if you have styling problems with this link style.

#menu ul ul ul.children

Many people want to have their list of main Categories also feature the subcategories. This list of links become the "children" of the list. To stylize their specific look, which is typically to make them smaller and feature a different bullet, you make those modifications here. For example, if you had a Category called "WordPress" and you wanted two subcategories called "Themes" and "Plugins", they would be the "children" categories and styled under this style. To style the links, the style would look like this:

#menu ul ul ul.children a:link {color:green; font-weight:normal }

To style a specific group of links, remember they have their own CSS ID, so to change the Categories section, remembering that this section has style parents that have to also be taken into consideration, it might look like this:

#categories li a:link {color:green; text-decoration:none; font-weight:bold}
#categories li a:hover {color:red; text-decoration:underline; font-weight:bold}

Using any of the specific ID tags such as #categories, #search, #archives, and #meta, you can more specifically change the look of the list and the links in each of these sections. Again, they inherit the styles from their parent #menu ul ul li a but you can still customize them if you override these styles. Experiment to get the effect you want.

Our List Of Links Menu

I really wanted to keep our sidebar layout. This involved a little more messing around with the CSS and the HTML. I needed to have the list of Categories be distinctive from the rest of the lists. WordPress already gives the different sections in your menu list of links identifiers which are not listed in the default classic style sheet. They require adding, so I added them, messed around for an hour with great frustration and then gave up. I was beaten down by the parent/child relationship of the styles. It's so damn confusing.

The problem comes from the "inherit". In the default layout, there are four main link lists and their sublinks listed under each. Each inherits the look of the one above it, and modifications to each one means battling with the parent style. I want the #categories and #search to look different from the others, and the others to have their own consistent look. Fighting browser bugs and the frustration of these nested inheritances, I decided to say "hell" with the nested links and I dropped them. I set up divs with the ID for each section and having a simple non-nested list underneath each one. This way, I have much more control over the end results and I don't have to battle with the nested list/links parent/child thing. This meant I had to go into the HTML to change the codes. I decided to change them first in my test file so I could experiment some more, and then I'd make sure and make the same changes in my sidebar.php template file - another thing to add to my growing list of things to remember.

Remember, this WordPress Theme is for ME and not for the public, so I can do whatever I want. But it does give you, the innocent bystander, the idea that other options are out there.

The Footer

The footer by default in the classic WordPress theme is the credit. The same was basically true with the simple theme I'd chosen to slice and dice. Since the link to WordPress is in my meta section of links in the sidebar/menu, I wanted my own set of links at the base. I dug into my old site's footer codes and replaced them in the footer section on my test page. When I tweak and mess with them to get them right, I'll move them over to the footer.php template file. Another thing to add to my growing list of things to do.

Cleaning Up the Mess I Made

As you can tell, nothing remains of the original theme I used as a starting place. I've hacked and whacked it into my own design. In short, I've made a big mess of things. Now that all the styles have been set, it's time to clean them up. Yes, there is still more tweaking and fussing to be done, but the core work is now done and the test page is starting to look like something I can work with.

To start cleaning things up, I went through the style sheet and deleted all of the colored borders I'd originally put in to help me find the different sections. Since I pretty much know where everything is now, I can get rid of these. If need help locating an area in the future, this is an easy thing to add.

Then, I double and triple checked the look to make all the little parts look like what I wanted. Sure enough, some little annoyances slipped in, but now I had something I was familiar working with, so it only took a few minutes to fix it all up. The tweaking of the CSS can go on forever.

Now it was time to attack the style sheet. I'm sure that you, like me, made notes all over the place, adding spaces and indents - well, the thing is a bit of a mess. I had notes in there left over from dealing with the nested lists in the sidebar that said things like "Damn category links are here" and "Third level nested list styles here". I cleaned these up pretty quickly. To clean the extra and unwanted spaces, I used a simple search and replace to get rid of triple line breaks and spaces at the end of lines and so on, working the data into a format that I'm comfortable with. Some like having their CSS styles spaced just so with indents, I like clean and simple.

If you choose to optimize your style sheet, to clean it up and condense it by removing unwanted spaces and elements, do so very carefully. I recommend a multi-stage effort. Unless you are very familiar with CSS, just clean up the excessive spaces and tabs and leave the code alone. If you are experienced with CSS, you probably already know what to do, but I'll remind you anyway. Go through the code and condense redundant declarations into a single reference with multiple selectors.

As you become more accustomed to CSS, you can get really drastic about cleaning house. I have a detailed explanation and resources to learn even more in our article on Optimizing Your Web Page.

Now that I'd set up the core look for the website theme, and cleaned up some of my mess, it was time to attack the HTML...oh, boy, more fun!

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our WordPress and Photography categories. The previous post is File Downloading - Avoiding the Bug and Viruses and the next post is WordPress Theme Tweaks and Twitches. Working on the CSS and WordPress Theme, Issue Number 594, by Lorelle VanFossen, was updated June 10th, 2005.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Related Articles

• List of CSS Found Within Which WordPress Files
• Creating WordPress Blog Looks with Bloggia
• List of WordPress Plugins
• Installing WordPress 1.5 and Modifying It
• Invitation to Hebrew and Arabic Bloggers to Blog for Free on Wordpress.com
• WordPress Codex Cleanup Week
• Blogpoly: The New Monopoly for Bloggers
• WordPress and Other Blog Details

Submit Article: BlinkList | Blogmarks | Digg | Del.icio.us | Ekstreme Socializer | Feedmarker | Furl | Google Bookmarks | ma.gnolia | Netvouz | RawSugar | Reddit | Scuttle | Shadows | Simpy | Spurl | Technorati | Unalog | Wink | Yahoo MyWeb2