themeshaper on "Use Custom CSS and Cutline? Please Test Your Site"

In four days (next Monday) we'll be replacing the Cutline theme with a more-customizable theme named Coraline. The Cutline theme will no longer be available.

The two look largely the same but there's been some improvements made under the hood. We think you'll really like it.

If you're currently using Custom CSS with Cutline there are some changes to the theme you should know about that could affect your site design—but only if you use both Custom CSS and Cutline. If you're using Cutline without Custom CSS you might not even notice the change!

If your site uses Cutline and Custom CSS, please read on.

We want to give you a chance to activate Coraline, test out your CSS, and make any necessary changes before you absolutely have to.

1. First, activate Coraline from Appearance > Themes.
2. Open your Custom CSS in Appearance > Edit CSS.
3. Save your CSS edits to a text file for reference.
4. Edit your CSS based on the tips below, and save the Custom CSS.

You can use a tool like Firebug to quickly find spots where id and class names might have changed in the markup you're styling with Custom CSS.

Changes in Markup from Cutline to Coraline

Here is a list of some of the more-likely-to-be-styled changes.

• #content_box becomes #content-box
• Like the Twenty Ten theme, the blog title is only wrapped in the h1 tag on the home, or front page of your site. Instead of selecting this element with:
#masthead h1 a {
/* styles */
}


  Try the following:

  
#masthead #site-title a {
/* styles */
}


• The main menu items were #ul nav, and can now be targeted with #access ul
• #header_img is now #branding
• The "posts" and "pages" classes on the #content div have been replaced with the standard classes of "post" and "page" on the body tag. Change ".posts" to ".post" and ".pages" to ".page"
• The "hentry" class will allow you to select the content of both posts and pages.
• Styles targeting the h2 tag used for the entry title can now target .entry-title
• h2.archive_head is now h1.page-title.
• Styles targeting the h4 tag used to hold the post date can now target .entry-meta
• .entry becomes .entry-content on posts and pages and .entry-summary on archive pages.
• .tagged becomes .entry-info with some extra hooks for styling inside.
• .add_comment is now .comments-link
• Coraline has up to 7 available widget areas and that means changes to the sidebar markup. Luckily all the widget areas can now be selected with .widget-area
• Coraline has two main sidebars. Instead of selecting #sidebar, try #primary and #secondary or #main .widget-area
• Instead of just a class of comments_headers. There are now two types of comment headers that can be selected, #comments-title and #reply-title. You can target both with #comments h3
• #comment_form .text_input has been replaced with two selectable elements, #respond input[type=text] and #respond textarea.