Raise your hand if you’ve ever tried to tinker with your blog’s theme or site’s template and you found yourself with a complete mess. Something that used to line up perfectly, right where it should be, is suddenly in a completely different spot. Or maybe the font changed and you have no clue why. There are dozens of typical little messes we can cause just by tweaking “one little thing”. So how do you fix it?

Well of course you could simply undo the change, and that’s probably the best answer, but that’s not what this little tutorial is about. We’ll pretend for now that undo isn’t an option for whatever reason, and we’ll look at how I diagnose these things, as well as how you can use this same technique just to temporarily try out almost any CSS change you care to make to your site – or anyone else’s.

Let’s Fix A Test Site – Techcrunch

For this lesson, I chose a popular site – Techcrunch.com – as our test site. What if Techcrunch’s site designer asked you to help figure out how to move the Google search box in the upper right corner to the upper left corner? For this exercise, we’ll pretend that’s where it is supposed to be, but Mr. Designer messed it up somehow and it moved to the right. We’ll also pretend Mr. Designer has forgotten everything he knows about designing, which is why he’s come to you for help. Below is a screenshot of Techcrunch showing the Google search box in the upper right corner.

You could diagnose this by simply viewing the page’s source code, finding the URL of the stylesheet(s) used, opening that link, and looking through all of the CSS to see what’s controlling the placement of the search box. But that’s the hard way. Let’s use readily available tools that make the job easier instead.

Use Handy CSS Debug Tools

Although I routinely use Google Chrome as my browser of choice, I usually open Firefox for this kind of task because the Web Developer addon has the features I like to use (and Chrome’s Web Developer extension is still missing one or two features that I need). So your first step, if you don’t already have it, is to install the Web Developer addon into Firefox. While you’re adding extensions, make sure you also add Firebug as well.

Now, you can right-click anywhere on the Techcrunch page and choose Web Developer > CSS > View Style Information (as shown below).

Web Developer Information Bar

This adds an extra bar under your current toolbars. When you hover your mouse over any part of Techcrunch’s page, two things happen: the element you hover over is outlined in a thin red line and the element’s style hierarchy is shown in the bar that showed up under your toolbars. See the image below to see what I mean. In the example image below, the Web Developer bar shows me that the element I hovered over (the Google search box) is an input field in a form with an ID of cse-search-box, which is within a div with an ID of #top_right. (It gives us even more structure up the hiearchy, but for now, this is enough for me to work with).

Firebug View

There’s also another way to get similar information, and it really depends upon which “view” works best for you and the situation, so I’ll quickly show you how to get that same info in a different way.

Right-click on or very near the element you’re investigating (in this example, the Google search box), and choose Inspect Element (as shown below).

This will open a split window under the web page you’re viewing, showing lots of information (using the Firebug addon you installed earlier). In the image below (though it’s difficult to read), you can see side-by-side, the HTML surrounding the element (in the left pane) and the corresponding CSS of the element in the right pane. If you click on the various HTML lines in the left pane, the CSS info in the right pane will change to reflect which HTML line you’ve clicked.

So, regardless of which method you choose to use, it’s clear that the Google search box is being controlled by a CSS ID called top_right, so we need to find that CSS ID and see if we can change it to move the search box to the left.

The Real Fun Begins – Play With Changes

You, of course, don’t have access to Techcrunch’s files, so you can’t make changes that will be reflected live to the general public. But that doesn’t matter. What you CAN do, with the help of our Web Developer addon, is edit the CSS temporarily – just on your own computer – that no one else will see. This allows you to play with changes as much as you want, seeing how each change would affect the Techcrunch page, but since it’s not live, only you will see what you do. There’s no danger of you messing up Techcrunch’s site for real so feel free to test whatever you want! Here’s how.

Right-click anywhere on the Techcrunch page and choose Web Developer > CSS > Edit CSS. This will open a split window with Techcrunch’s CSS displayed on the left, and the Techcrunch page on the right, as shown below.

In some cases, there will only be one stylesheet to choose from, and in other cases, like this one, there will be several stylesheets controlling the page. I usually start with whichever stylesheet I believe is likely the main one – in this case, style.css. I then do a search if it’s a large stylesheet for whichever style I’m looking for. In this example, we want to look at the style for the ID of top_right. In the image below, you’ll see I’ve typed top_right into the search box, and it took me to the portion of the stylesheet that displays that information.

The information in the left pane isn’t just there for your viewing pleasure.

You can actually TYPE in that window, CHANGE anything you see there, and SEE the effect of those changes on the page in the right window!

Go ahead and try it. You can see in the image below, that I changed the #top_right info from float:right to float:left, and you can also see how that change I made affected the Google search box on the Techcrunch page. It immediately moved it to the left! Just what our worried web designer wanted.

Again, this is just something you and you alone will see on your own computer. Techcrunch’s page didn’t really change. No one else in the world will see that Google search box on the left. But you now know exactly what needs to be changed for the poor, worried web designer to fix his mistake, and you can tell him exactly where to make the fix in the real files.

Job Well Done!

Chrome’s Options

I do want to mention that Google Chrome can be useful for these purposes as well, but I haven’t yet been able to figure out how to do all that I want, as easily as I can with the above methods. However, I do want to show a couple of screenshots of Chrome’s Inspect Element option, which gives a lot of great information (see images below).

I’m sure many of you have your own preferred methods of accomplishing these same tasks, and it would be great to have you share them with me and others.

Now go on, go play around with the CSS of any site on the web, and you’ll quickly get the hang of how to find and adjust anything you might mess up on your own sites in the future. It’s ok, you won’t destroy anything. Really!