Click on the area to go to the page that has a more descriptive explanation.

1. body { } & #sidebar-aboveheader
2. #page-wrap {} / #page-wide-wrap {}
3. #page {} / #page-wide
4. #header / #sidebar-header
5. #sidebar-menubar #menubar
6. #content-wrapper
7. #comic-head #sidebar-overcomic
8. #sidebar-comicleft
9. #comic
10. #sidebar-comicright
11. #sidebar-undercomic
12. #subcontent-wrapper
13. #sidebar-overblog
14. #sidebar-left
15. .narrowcolumn / .column
16. #sidebar-right
17. .comic-post
18. #blogheader
19. #sidebar-blog
20. .uentry .post .entry
21. #sidebar-underblog
22. #sidebar-footer
23. #footer

• .sidebar

The body element is standard for all websites, it contains the default look and feel of the site which includes the text color and background of the entire area of the browser.

Default elements that are not contained in the body {} but handle the sitewide look and feel are:

• a
  • The link color.
• a:hover
  • The link hover color.
• a:focus
• a img
• p
• img
  • Set’s images max-width to 100% of the available space, it can resize images to fit in whatever css container it needs to.
• small
• hr
• blockquote
• cite
• acronym, abbr, span.caps
• code
• form
• input, textarea

Above the regular page of the website there’s a sidebar that is not a part of the restrains. #sidebar-aboveheader is like any of the other sidebars (except sidebar-left/right) where it contains:

• .customsidebar
• .sidebar
  • The .sidebar is configurable to be used in the comicpress options.

More about the .sidebar code later.

These elements are a wrap around to #page and #page-wide. By default they do not actually contain anything inside it.

However there are some cool things you can do with it, your #page and #page-wide contain the static width of either 780px or 980px and say you want to extend the outside of that area by a few pixels and put something around the outside this is what you would use.

For example:

#page-wide-wrap {
       padding: 0px 10px;
       background: #ccc;
}

This will make it so that there is a 10px outline on the left and right of the static width #page-wide area. You can put a background there if you like, some people have put a background that repeat-y’s down the side of the #page-wide like a drop shadow or some funkey design.

These elements are what constrains your contents width. For the Standard and Vertical layouts it uses the #page and for all of the others it uses #page-wide.

/* THE PAGE WRAPPER */

#page {
	width: 780px;
	margin: 0px auto;
}

#page-wide {
	width: 980px;
	margin: 0px auto;
}

If you edit the width of the site make sure you remember to change the width of .narrowcolumn to compensate either larger or small width.

This area of the site code is a bit tricky. Sure you have the standard CSS that goes with it. First there’s no default height or width in the header and the generic height is dependant on the page title – tagline.

#header {}
	#header h1 a {}
	#header .description {}

If the Plugin Wonderful plugin is active and you set one of your ads as ‘header’ then it will open up another CSS element.

	#header .headerpwad {}

Also if you decide to put anything into the Header sidebar area it will open up another css element inside of #header. Which doesn’t have any default styling.

#sidebar-header {}

Browser Specific ‘targetting’ CSS element identifiers:

.lynx
.gecko
.opera
.ns4
.safari
.chrome
.ie
.iphone

Basically if you use any of these identifiers *before* another css Class or ID in your css it will specifically only be used for that browser that views the page.

For example:

.somecssbox {
      margin-top: 10px;
}

^ The above will make a margin-top of 10px on whatever CSS element you chose, however say it doesn’t look correct in IE browsers because IE does whatever IE does and gives it another additional pixel.

So this is how you override it by being browser specific”

.somecssbox {
      margin-top: 10px;
}

.ie .somecssbox {
      margin-top: 9px;
}

All browsers will use the margin-top: 10px; and because you put the .ie .somecssbox directly after it, all IE based browsers will use the 9px margin-top. Which fixes the look of your site specifically for IE.

You of course can do this for all the other browser types as well. [2. iphone refers to most mobile phones apparently.]