The first thing people have to do when they start customizing the ComicPress theme, is find out what each item on the page is called in the CSS file. Only then can they start swapping the colors, sizes and fonts around.

I had been meaning to make a big chart that would break all this down, but I don’t really need to as there is a great Firefox Add-on that does this for you. It’s called CSS Viewer, download it. When running you will be able to hover your mouse over any part of the page and it will tell you what the style tag is called for that area, all the specs for it as well as outlining the DIV containers with dashed red lines.

Simply mouse over the page to see all the CSS tag information.

This add-on installs as a toolbar item, so you will need to drag it to a toolbar, I recommend dragging it to the end of the Web Developer toolbar. Just click View/Toolbars/Customize, then scroll down and you should see a little icon called CSSViewer, just drag that to the end of your Web Developer toolbar and click on it to activate it, and again to shut it off.

There is one little problem though, the text that identifies the style name will be “squished” and hard to read when editing the ComicPress theme, this is because it uses the H1 style, and to tighten up the text in the header the text spacing for the comic title is set to a negative number. Chances are you are not even using that style since you’ve probably changed the header or replaced it with an image. To fix this quick just open style.css and find the H1 section:

h1 {
  font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
  font-size: 4em;
  text-align: left;
  font-weight: normal;
  letter-spacing: -2px;
  }

Now just remove the line:

  letter-spacing: -2px;

Then it should be all set. You can even delete that whole section if you are not using it for your comic title.

Share This

This entry was posted on Sunday, November 12th, 2006 at 12:40 am and is filed under Web Developer Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.