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.

First, activate Coraline from Appearance > Themes.

Open your Custom CSS in Appearance > Edit CSS.

Save your CSS edits to a text file for reference.

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:<br />
#masthead h1 a {<br />
/* styles */<br />
}<br />

Try the following:

<br />
#masthead #site-title a {<br />
/* styles */<br />
}<br />

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.

It's ludicrous to be announcing this with a mere four day heads up INCLUDING a weekend. People have many other things to deal with and many may be on vacation. On top of that, this could be a lot of work, which leads me to ask (a) why are you willy-nilly yanking a design; and (b) why aren't YOU making the changes OR paying for the transition?

To sum it up, you're imposing a major headache on your customers, and for reasons that I find completely unfathomable you're doing it in a way that forces them to drop whatever else they're doing in order to get it done in time, assuming they're not on vacation?

When we first added the Cutline theme to WordPress.com it was free software. That means the users of that theme had the freedom to use, share, and modify that theme as they wished—as long as they passed those freedoms on when they shared it. That freedom let us bring the Cutline theme here to WordPress.com and it’s the same freedom that’s made WordPress so popular.

Free software is something we believe is important: to use and promote.

Cutline was sold a few years ago and had a more restrictive license placed on it. The original author of the Cutline theme has gone on to produce other themes with more restrictive licenses. Using Cutline has been seen as a promotion of that work and that’s not something we want to do–so, we made something better: Coraline! The state of the art in themes has advanced quite a bit since Cutline and we’re happy to make the switch.

But don’t worry, we’re here to help you make the transition. Contact us in support or post your questions here and we can help you get your Custom CSS sorted out.

Well, we can all cheer free software, but the issue was the four day heads up including a weekend, which you didn't explain. I mean, you've been working on this change, right, so you certainly knew it was coming. You control the schedule, right, so giving customers a month heads up is the reasonable, fair AND professional approach.

I'm using Cutline without CSS changes. In testing Coraline, I notice a couple of problems. If Coraline is going to automatically replace Cutline, I'd appreciate it if some minor tweaks could be made so that there are no compatibility problems.

1. At the bottom of all my posts I have a line with several social bookmarking buttons. The buttons have a dot between them (made with alt-7). In the Coraline preview, those dots all drop down to a line of their own, which looks ridiculous. I've probably got a thousand posts with that line of buttons and dots, so at this point it's not possible to edit them. The only solution is to fix the Coraline theme to keep the dots in the same line as the buttons. Otherwise, all my posts will look disfigured.

2. Are the drop-down menus optional for Pages? I'd prefer not to have the sub-pages automatically show up, as I now have links in the the main pages if I want the sub-pages to be accessible.

3. The amount of indenting for blockquotes seems to be greater than with Cutline. This creates some formatting problems. In particular, at the bottom of all my posts I've got a "copyright" notice (in blockquotes) that has always fit into a single line. In Coraline that notice breaks into a second line, which looks awkward. I suppose I should have "centered" that notice, but blockquotes worked, so that's how I've always done it. I have this in over 1,000 posts, so I can't go back to edit it now. The only solution is for the Coraline theme to be edited so that its blockquote feature doesn't indent more than Cutline does.

4. If those changes can't be made in Coraline, would it be possible to leave Cutline as an option, because I'm afraid my blog has become too dependent on it to change.

Yes! Problems 1 and 3 are fixed. You guys are fast! I'll deal with #2, the custom menus, when the Great Change-over happens.

It occurred to me that the problem with the spill-over of my "copyright" line could also have been due to the fact that the widget column in Coraline seems wider than in Cutline, so there's less width for the main posting area. Maybe not. I donno what you did, but everything looks okay now.

Now I do notice something, but I don't think you can do anything about it. My tagline fits into one line when I'm doing a Coraline preview for my blog. That's fine .It's a big improvement, because Cutline doesn't display the tagline.

I have a test blog, so for that I actually installed Coraline. It's the same tagline, but when installed for the test blog the last word of the tagline spills over into a second line. It doesn't make sense. I guess I can re-write it to be shorter, but I don't know why the two blogs look different.

Okay. On the test blog I installed a wider header pic, which the new theme accommodates, thinking that might stretch things out. But the tagline still breaks into a second line.

As I said, I can edit the tagline when the conversion comes to my main blog, if that's necessary to keep it to one line. This isn't a problem for me. But it's odd that I'm getting different tagline results (just a single line) when I preview that theme for my main blog.

One other thing: I never noticed any staff announcement that Coraline was available as a new theme. Did you guys forget that, or did I miss it? Except for the sticky about CSS users, there's no thread on Coraline as there always is for new themes. This automatic change is going to catch a lot of Cutline users by surprise.

This is a problem that couldn't be resolved in the help forum, so I'll take advantage of staff presence here. Coraline is a great theme. My only problem with it is with the drop-down menu feature.

In Cutline, links to Pages automatically appear in the header, but not links to Sub-pages (child pages). That's the way I like it, as I use Sub-pages for material that isn't important enough to be in the header.

I've studied the documentation about menus, but I can't figure out if drop-down menus can be turned OFF for Pages listed in the header. I definitely want links to the parent Pages to show up in the header (which Coraline does by default), but I wish it were optional to have Sub-pages automatically show up in drop-down menus.

I went through the process of building a menu of Pages, without selecting the Sub-pages, but they still show up in drop-down menus. Is there any way to control that without shutting off the Page links completely?

I tested a help-forum suggestion by adding a new page. I already had created a custom menu with other pages in it (but obviously not the new one), and I had un-clicked the option to automatically add new top-level pages. The new test page still showed up in the header, which doesn't seem right. Presumably that's what would happen to an existing sub-page if I made it a parent page.

So either I'm missing something that ought to be obvious, or I'm stuck with a Coraline feature. Unless it's something that can be fixed. Any ideas?

@maxophil Coraline has multiple layouts you can choose from and has a flexible width below a certain browser window size—meaning, if you reduce the size of your browser window, Coraline will shrink to fit. You don't have to set anything to enable the latter feature. It just happens automatically.

Hi, i also had to adapt my design in a firefighting manier to the new coraline theme. Even tought it went fine, i was really surprised by the quick timeframe you have given us and also the reason why the cutline theme has to be removed:

Using Cutline has been seen as a promotion of that work and that’s not something we want to do

Did i understand you right, you'll remove the old cutline theme because the new one has a different license.model that you don't like? Why just not importing the new one then?

Giving the appearance of promoting themes with restrictive licenses is something we definitely don't want to do. But it's also a chance to take a popular design, improve it, and make a state-of-the-art WordPress theme.

My widgets have disappeared! I had more widgets on my site with Cutline. They have disappeared!! Does the text exist somewhere or do I have to write it all over again? This is preposterous. Will this happen again and is there some way to avoid waking up and finding that your blog now looks different and you have no control on that????