Inside the newly created directory under themes, in your installation, you're going to want to put a style.css file, .. mind you, this is *not* the original style.css that is inside the comicpress installed directory, this child theme style.css is unique to your custom theme.  Again, the best method would probably to take the style.css from inside of the comicpress-boxed.zip or comicpress-silver.zip and use that as a base.

Inside the child theme now, is the basic style.css for that child theme, at the top of that style.css should be this information:

/*
Theme Name: ComicPress <yourchildthemenamehere>
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  <a href="http://comicpress.org">Visit the ComicPress Website.</a>
Author: <who you are>
Author URI: <yourwebsitesurl>
Version: 1.0
.
The CSS, XHTML and design is released under GPL v3:

http://www.opensource.org/licenses/gpl-3.0.html

.
*/

@import url("../comicpress/style.css");

The "Theme Name: ComicPress " needs to be a unique name, pretty much denoting your comic/sites name as well as something identifying the directory name you chose.

This part, "Template: comicpress" means that the comicpress theme (/themes/comicpress/) is what is going to be used as the parent, and the "@import url("../comicpress/style.css");" means to use the style.css from inside the parent theme, then everything *after* that will be overrides or changes to that parent style sheet, pretty much like how you would use theme companion.

Now, your themes directory on your server looks something like this (using my frumph child theme as example):

/wp-content/themes/
/wp-content/themes/comicpress
/wp-content/themes/comicpress/* .. all the files used with comicpress parent.
/wp-content/themes/comicpress-frumph
/wp-content/themes/comicpress-frumph/style.css

When customizing your theme, all the 'new changes to the css' can go into the style.css of your custom child theme that you created, for example if you wanted to change the background of the body (using the frumph child theme example again):

/*
Theme Name: ComicPress Frumph
Theme URI: http://comicpress.org
Template: comicpress
Description: Publish a comic with WordPress.  <a href="http://comicpress.org">Visit the ComicPress Website.</a>
Author: Philip M. Hofer (Frumph)
Author URI: http://www.frumph.net/
Version: 1.0
.
The CSS, XHTML and design is released under GPL v3:

http://www.opensource.org/licenses/gpl-3.0.html

.
*/

@import url("../comicpress/style.css");

body {
	background: #271200 url('images/background.jpg') top center repeat-x;
}

Create an "images" directory inside the child theme and put the background.jpg inside of it. Since I am "ONLY" putting changes that I want the CSS to have inside the child themes style.css and not the full replication of the original style.css, I can find the changes I made easily. This also lets me upgrade ComicPress and use the original comicpress parent themes style.css without editing the original and making some horrible change that I won't be able to fix. Since I am not touching the original there will not be that problem.

The directory structure looks like this:

/wp-content/themes/
/wp-content/themes/comicpress
/wp-content/themes/comicpress/* .. all the files used with comicpress parent.
/wp-content/themes/comicpress-frumph
/wp-content/themes/comicpress-frumph/style.css
/wp-content/themes/comicpress-frumph/images
/wp-content/themes/comicpress-frumph/images/background.jpg

Any images I create for my site, I will put inside of the images directory for the child theme.

There's a bit of logic used in the menubar area of the site design. First it defaults with the default menubar turned on and active.  Like all of the sidebar's #sidebar-menubar will not show unless there's a widget inside of it.

You can disable the default menubar in the ComicPress Options, this will let you not have it appear if you wish to use the ComicPress Menubar widget and place the menubar in any sidebar area on the side.

#menubar itself has just two unique areas inside of it.

#menubar {
     #menunav {}
     #menu {}
}

The #menunav area contains the min-navigation, button for RSS and the search box if enabled, while the #menu area contains the home button, dynamically generated menu options based on the pages you create and the possibility of other menubar items if you created a links category called menubar and added links into it.

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 {}

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.

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.

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.

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