Whenever I go to Border’s or the library, I always find myself browsing the computer/code section. I’ll flip through books on html, CSS, web design, wondering if there’s something new I can learn. Wondering if I’ll hit upon a magic volume that has all the answers.

But other than a book I’ve been coveting on CSS hacks, there’s really not much I need. I frequently want to double-check things, but the internet is much more helpful than any one book. And a search engine is better than any one site.

Say, for example, I wanted to remember what the name for the CSS property which makes an unordered list appear with hollow circles instead of filled ones. Disc? Dot? Circle? I simply open a tab and run this search http://www.google.com/search?client=opera&rls=en&q=css+list+style&sourceid=opera&ie=utf-8&oe=utf-8 (as you can see, I was using Opera).

Voila! The first result is from w3schools.com and tells me that if I want a circle marker, I use “list-style-type: circle;”. But if I want a filled circle, I use “disc.”

For more complicated queries, I’ve even run across forums I never knew existed where someone else has already asked the question. The answer probably isn’t in your average reference book (at least not in simple answer form), nor is it somewhere I’d have thought to look.

I could bookmark w3schools.com, in fact I already have. But it’s faster for me to hit Ctrl+T and run a search in my little google search box than it is for me to open a Tab and then find/click on a bookmark, etc. It’s much faster than pulling out a reference book (even if it’s beside me) and flipping to the right page.

If I had a hard time finding a piece of information, or if it’s an extremely valuable resource, I do bookmark it. Generally I use my delicious account (apparently it’s not del.icio.us any more). But my bookmarks are more of a backup than anything else. They just take longer to use.

The nice thing about code, whether it’s xhtml & CSS or PHP or something more complicated, is that what you find on the internet is pretty often reliable. Especially what you find on the top search results. It’s much less subjective and controversial than almost anything else out there. You don’t need to cite your sources as long as your code works. So whether you got it from the w3schools or from a blog (like my entry on using Conditional PHP in Wordpress) you just need it to work.

Buy the reference books if you want to, especially if you’re starting out and want to understand the structure of the code. But don’t discount the power of search engines. They may not be good sources for your research paper on gender-bending in Elizabethan drama, but they’re great sources for your code questions.

Related posts:

• Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme
• Organizing Your CSS Files Alphabetically — Pros and Cons

Note: this fix will work for both Cutline 3-Column Split and Cutline 3-Column Right Wordpress themes.

I’ve had several people contact me to ask how I changed my personal blog’s header from the Cutline 3-Column version (click on any image to see a larger version):

To this:

How did I get rid of the extra picture, freeing up more space for text above the fold? The simple way to do it is by removing all this code in the header.php file:

<div id="header_img">
<?php if (is_home()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />
<?php } elseif (is_single()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_2.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 2" title="<?php bloginfo('name'); ?> header image 2" />
<?php } elseif (is_page()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_3.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 3" title="<?php bloginfo('name'); ?> header image 3" />
<?php } elseif (is_archive()) {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_4.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 4" title="<?php bloginfo('name'); ?> header image 4" />
<?php } else {?>
<img src="<?php bloginfo('template_url'; ?>/images/header_5.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 5" title="<?php bloginfo('name'); ?> header image 5" />
<?php } ?>

</div>

However, this leaves you with a thick black bar (at the bottom of the #nav section…you can barely see it in the original Cutline image since it almost blends in with the picture) directly above your blog. It meshes rather unpleasantly with the top of the sidebar widgets.

To fix that, go into the ul#nav section of the theme’s stylesheet (style.css) and add the following code:

margin: 0 0 10px 0;

This creates a 10px margin between the line and the top of the blog/sidbar, a small visual break.

If that’s not enough for you or you don’t like the overall thickness, here’s the code to lighten all the lines as I’ve done in the picture below. I changed their colors to match the horizontal line at the top of the blog (whose color is defined as #ccc in the #masthead h1 section of the stylesheet, if you want to change that as well).

This code will lighten the lines above and below the navigation links:

ul#nav { list-style: none; width: 950px; padding: 0 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; clear: both; }

and this code will change the sidebars to have lighter lines around their widget headers as well:

li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }

This is what the end result will look like:

Voila! Let me know how it works for you.

Related posts:

• Introducing the Silver Light 3-Column Wordpress Theme
• Tutorial: Adding Gravatars to Cutline Themes
• How to Change the Name of Your Wordpress Theme

As I’ve been building more of my CSS from scratch or drastically altering designs, I’ve come across a new dilemma: organization.

On the one hand, it’s entirely possible to leave a CSS sheet unorganized. As long as every styling is set up properly it shouldn’t matter. And one can always use Ctrl (Command) + F to find where the h1 or .post styling is.

But if you’re going to be modifying this stylesheet, it’s not very useful. And if you want it to be useful for other people (like a Wordpress theme) there needs to be some kind of structure they’ll understand.

Which leaves you with two choices, alphabetical order or structural order.

While I started out with structural stylesheets, I’m beginning to lean towards alphabetical. Here’s why:

Pros of an Alphabetical Stylesheet

The biggest benefit of an alphabetical stylesheet is being able to find anything right away. Need #footer? Scroll down to the f’s. It’s easy to add and remove. And it can avoid a lot of confusion.

For example, I was recently modifying a Wordpress theme. The original designer had used a structural design. One section included the #header, #sidebar, #content, and #footer. Unfortunately, he’d also put a second #sidebar in the miscellaneous code at the end. Perhaps he was modifying something too.

Anyway, all I wanted to do was edit the sidebar, but it took me a long time to figure out why changing the width wasn’t working. I didn’t even think of looking for a second section which also defined its width. In an alphabetical stylesheet this would never have happened. If the designer had been better organized that would work too, but alphabetizing means that organization comes naturally.

Even if there aren’t double items, structural code may be arranged non-intuitively. In every Wordpress theme, I have to go looking for an element and find it somewhere I would never have thought logical. The alphabet is never illogical.

Cons of an Alphabetical Stylesheet

On the other hand, it can be quite handy to have the stylesheet arranged in sections. For example, if you want to modify the widths of the #header, #sidebar, #content, and #footer, you can do it without having to scroll up and down the page. Ideally, you also know all the main page divisions (unless they stuck one farther down).

Or if you’re modifying various elements in the sidebar, they’re all grouped together (except width). You don’t miss any of them.

Still, if you have the code of the sidebar itself, you can just look up each element you use in the alphabetical list.

Structural or Alphabetical?

I don’t think there’s a concrete answer on which one is better. Alphabetical means less outright organizing, but you may have to check the code it’s being applied to to figure out which styles you have to modify. It’s probably easier to put together initially, because there’s no question about where an object belongs.

Structural is generally easy to modify, provided it was put together right in the first place. Highly conditional. Also, what you think is a good organizational structure may make no sense to everyone else. And you have to figure out what to do with misc elements like blockquote or abbr.

Right now I’m leaning towards alphabetical. What about you?

(You’ll notice that the CSS of this theme isn’t alphabetical. That’s because I did the primary work on it months ago before I considered arranging it differently, so I just left things as the original designer had done them.)

Related posts:

• Changing the Header in Cutline 3-Column Split (or Right) Wordpress Theme
• A Coder/Designer’s Best Reference Manual Is . . . a Search Engine