Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress header image 2

Cutline 1.1 — Running a Killer Website Just Got Easier

February 2nd, 2007 · 240 Comments · Release Notes

Pimped out ride

Ladies and gentlemen, today’s a great day in the history of Cutline, and it really has little to do with the fact that version 1.1 is now on the table (get it here). The most excellent thing about this new release is that I’ve tweaked the theme in such a way that your life might now be easier.

I realize that with past theme updates, you tweakers and hackers out there have had a rough go of things. Adapting modified styles and sifting through stylesheets isn’t anyone’s idea of a good time, so in addition to playing nicely with WordPress 2.1, finding a way for you guys to futureproof design modifications was priority number one.

Thanks to a handy little custom stylesheet solution, your CSS changes will no longer be affected by future versions of the theme. This excellent update stands at the top of the list of this release’s major changes, which you can read about below.

Cutline 1.1 Changelog

In past releases, I tried to modify as little XHTML as possible in order to simplify each update. However, as I’ve learned more and more about site development, I realized that some of my markup just made no sense semantically. Also, I felt like the theme was lacking some key elements that aid in user experience, so I figured now was as good a time as any to add those bells and whistles.

So, here are the changes that you need to know about:

1. Custom stylesheet to segregate user-initiated design changes
For all you theme-tweakers out there, this is huge. I’ve appended the <body> tag with a CSS class called “custom,” and then I’ve added a separate CSS file called custom.css that you can use to implement your modified styles. You can find further instructions inside custom.css.
2. Hacks for IE6 and 7 moved to separate CSS files
Best practices for Web standards call for the use of conditional stylesheets to specify CSS declarations that are browser-specific. Cutline has a reputation for being squeaky clean, and strict adherence to Web standards is a must if that reputation is going to persist.
3. Tagline added to the header
We might as well throw a ticker-tape parade for this one. The crowd roars. I smile. And I know a little more about your site because you’ve got a killer tagline up top.
4. Comments link behavior in the tags area (after a post) changed
I thought the underline behavior looked ugly, especially when Georgia’s (the default font) 3s, 4s, 5s, 7s and 9s, which descend beneath the baseline, intersected with the underline. Okay, so I’m a freak.
5. XHTML elements after each post changed
In previous versions, <h4> tags were used to indicate the end of a post and also to create the whitespace between post listings on the front page. Semantically, this is beyond dumb, and there were also inconsistencies across different browsers in terms of margin rendering. In order to rectify this, the most obvious element to use is a styled <hr /> tag. Instead, however, I elected to use a special clearing <div> element because it will cause less confusion for folks who might choose to change the background color of the theme (because not all browsers handle <hr /> elements the same way).
6. Comment numbers added to each comment, and comment permalinks moved to these numbers
On sites with a lot of comments, I’ve noticed that people often refer to each other by comment number rather than by name. I think this is a natural and effective means of communication, and since it aids in understanding (and therefore user experience), I’ve chosen to include that feature in Cutline. Personally, this is one of my favorite additions to the theme.
7. Comment spacing tweaked
With comments like the ones on this theme, it’s a constant battle to try and achieve perfect spacing. The primary goal is to maximize scannability, but it’s also important to make them as concise as possible so as to keep pages from getting too vertical.
8. Comment submit button now completely wicked
The old comment submit button was a flat piece of garbage. The new one is totally cool.
9. CSS for blogroll adapted to better code in WordPress 2.1
The 2.0.x series of WordPress releases generated some pretty lame XHTML when outputting blogrolls. As a result, theme developers were forced to resort to tricks or bloated CSS in order to have things display properly. In 2.1, the code has gotten a little bit smarter, but it’s still not where I’d like to see it. Either way, it works, and I was able to drop about 1kB of code from the stylesheet.
10. Added an Archives link after the recent post listing in the sidebar
Being able to move easily between different parts of your site is key, and this is oftentimes most evident to the site owner, as he/she is the person most likely to traverse all sections of the site. I caught myself looking in recent posts all the time, only to find that the post I was looking for was buried deeper in the archives. Instead of getting frustrated over the fact that I now had to find the Sitemap or the Archives page, I just added a link in this location to solve the problem.
11. Archives and Sitemap pages updated to reflect template tag changes
If you upgraded to WordPress 2.1 while still using Cutline 1.03, you might have noticed that your Archives and Sitemap pages either behaved strangely or stopped working entirely. This was due to the fact that the template tags I used in those versions to generate category listings are no longer supported in WordPress 2.1. Naturally, I changed the code and brought this bad boy up to spec, so now you’re good to go.
12. Changed the footer entirely
The old footer sucked and was an eyesore. This one doesn’t and isn’t.

Special Upgrade Notes

Cutline 1.1 is only intended for use on blogs running WordPress 2.1 or higher. If you install this version of Cutline on an older version of WordPress, your blogrolls will be totally whack, and your Archives and Sitemap pages will crap out.

Also, if you’re looking for updated versions of the random header image generator files, you can find them here:

Finally, if you had already upgraded to Cutline 1.1 before reading this, please check your files! There’s a good chance that you don’t have the custom CSS solution described above, and trust me — this is one feature that you don’t want to live without!

Tags:


240 Comments so far ↓

  • Daniel

    For everyone’s information.:

    I did discover an issue with validation. Whether I may have overlooked an instruction in the process is unknown – but this is a simple note that may help others.

    1. Make sure when you unzip the package that you’ve downloaded for Cutline 1.1 – you rename the theme folder to Cutline only. The W3C validation service doesn’t appreciate the space.

    2. If you’re renaming your theme after it’s been installed – don’t worry, because here’s what’s going to happen, and here’s what you do.

    2a. The default theme will initially show as your theme when you rename the directory. (Don’t freak out!)

    2b. Go back to your admin panel and select the Cutline theme as your theme. This should instantly take you back to your theme without any issues.

    Then you can relax and say, “Thank you Chris, for a really shweet theme – but please update your download package so there isn’t a space.”

    And then carry on adding content until you turn a slight shade of blue. Just because you can.

  • Michael

    Thank Daniel, worked perfectly.

    I noticed something wrong with either WordPress or Cutline today though…

    When I upload an image, and send to Editor, then publish post, the image shows up fine on the Frontpage and Post page. But when I view multiple posts in the “Category” view, the images don’t show up.

    However, I noticed the images on this site embedded in posts are showing up in category view. What has to be done to get the same feature?

  • Chris

    Michael — Category view pages utilize the_excerpt(), a WordPress function that strips out most XHTML.

    You can, however, force the_excerpt() to display whatever you like by making use of the Optional Excerpt field with each of your posts.

    Here’s a great tutorial on how to spruce up your archives.

  • Drew

    Chris,

    Do you know when this theme will be upgraded on WordPress.com? I figured I would wait a month, but still no luck.

    Also, the sidebar search widget disappears on WordPress.com whenever you add widgets. Which kinda stinks because the new widgets aren’t aligned correctly and you have search.

    Any help would be great

  • lina

    I cannot find the installation instruction to install Cutline 1.1. How can I intall it and make it compatible with my wordpress?

  • Michael

    Thank you Chris. Once again, your advice worked perfectly. I appreciate your helpfulness; amidst your posts and comments you are a rare example of friendliness and courtesy I don’t find very often online.

  • Brad Bolman

    Is there any chance of you making a bbPress port of this theme. I love cutline and I use bbPress, and I’d love to have theme integrated.

  • Humphrey

    It’s a very nice blog you have here. I must say I’m impressed with great traffic too on Alexa. I was actually viewing a different blog when references were made to your blog. So I decised to check it out. But I guess it must be alotta hard work though. I’m still trying to tweak and fine-tune mine? Any ideas please? It will be highly welcome.

  • Daniel

    A great plugin to solve the post title’s next and previous links from breaking formatting by limiting the characters displayed.:

    http://www.italyisfalling.com/wordpress-plugins-better-nearby-posts-links

    I’ve noticed this in Cutline, so I think will be a welcome addition to anyone using the theme (including me!).

  • gio

    hi Chris,

    remember this http://cutline.tubetorial.com/how-to-improve-your-front-page-and-gain-page-views-in-10-seconds/#comment-579

    i asked for your permission before to modify and publish it with your links of course and mine. You said its ok as long I retain the attribution links in both the footer and the stylesheet (as they are my site.

    Yesterday i uploaded it to http://themes.wordpress.net and was very happy to see that lots of users loved and downloaded it. The thing is some people are commenting at http://themes.wordpress.net/columns/2-columns/1739/presscut-theme-10/ saying that i stole you cutline. If you can leave a comment from that would be great just to clarify tthings.

    thanks.

  • Rick Beckman

    I’m having trouble changing the background of the “container” DIV; when I specify a background for #container, it is only applied in the masthead area. The remainder of the DIV is white, per the BODY background.

    Adding a control statement to #container, such as font-weight:bold yields expected results (all text within that DIV is bolded), but the background color stops at the masthead.

    Why is that? You can view the test site here; my browser is Firefox 2.0.0.2.

  • Rory

    I’m having a similar problem to Rick (above). I can’t get the background colour of the #container to show. It seems to be over-ridden by the .
    I tried to highlight it with a border, but this is not showing either.

  • Rory

    [please delete this, Chris.] My last comment should have read “It seems to be over-ridden by the #body background.”

  • Rory

    Okay, I’ve just been sensible and done more research on this question of the #container div.

    Am I correct in reading that because it does not have a “float” element, it does not wrap the rest of the content, so any background you apply to the #container div will not register on the other divs?

    So, by jigging the padding, it should cover the offending grey areas.

    That being the case, how would you surround the whole site with a border, if that was ones aim? I noticed you were going to write a separate post to answer this question.

  • Hummerbie

    Hello Rick,

    Its really a Firefox and IE thing, then in IE is is just as you like it..

    But if you want it the same way all over, you have to change al the [ core layout elements ] to the same background.

    That will still leave the Picture an menu with a white background, but you have to play with the [ header styles ] setting to get that stuff right.

    Luckely I think you can try all the options via the custom.css whitout hurting you basic template.

    Hope this helps

  • Rick Beckman

    You’re right; it does work in Internet Explorer (7, anyway).

    It’s unbelievable that Firefox’s behavior is actually the unexpected one. Arg.

  • Anand Dhingra

    Great theme, Chris! I’m slowly getting it dialed in to work with ZenPhoto, which is a great photo gallery system.

    The typography in Cutline is the most compelling reason to adopt this theme. It’s quite clear that Chris has taken a lot of thought, hard work, and experimentation to make a very readable, attractive, kick-ass theme.

    Good work!

  • ramzwatcher

    my blog at http://rajablog.info/blog works wonderfull with this new themes – thanks for the great works!

  • Getting the Adsense-Decoded-Review.com Blog Started

    […] love this theme, called Cutline by Chris Pearson. It is very clean and strong, but also is good for SEO by basically just staying […]

  • Rick McCharles

    Problem with YouTube embedded videos after upgrade to Cutline.

    They play in all browsers on a Mac. But not on IE7 on windows.

    Any suggestions?

    They do play on Firefox for Windows.

  • javipas

    Hi all,

    I installed this theme recently and I’m really happy with it except for one thing:

    Images don’t display on IE

    No header, no post images, nothing. It’s weird, because some images on old post do work. But I can’t tell the difference.

    I’ve read in the WordPress Codex that I should resize images to a smaller size in order to get them work on IE/Cutline, but this didn’t help either.

    Any ideas?

  • Rian

    I’m hoping someone knows CSS better than I do. Since upgrading to the new Cutline and WP 2.1.2, my main header graphic is out of alignment and I can’t seem to get it back. What’s strange is that in IE 6/7 it looks fine, but in FF 2.0, it’s off. So I’m not sure if it’s a CSS problem or maybe just a browser issue. I made most of my mods in the style.css, not the custom.css. havent had time to port it over.
    Anyone want a crack at it? It’d sure be appreciated.
    http://www.rianbrooklyn.com/blog/wp-content/themes/Cutline 1.1/style.css

    Thanks.
    – Rian

  • e

    Just set up the theme on my site. That was about the easiest theme setup I’ve done so far. Thank you!!

  • imani

    great theme.

    been using it for a minute know.

    ive been noticing that my margins are acting screwing in IE6x. i read that there are css hacks available for the new Cutline theme but i’m not sure if they are activated or if i need to add some info to theme to get them to work correctly…looking for some help here.

    thanx

  • Jeff Blaine

    Chris, long time no speak.

    What is your policy on Cutline credits in the footer of a site with a heavily modified Cutline theme for a miniscule company I am starting related to autos/motorsports? Can I credit you on my “About” page instead?

  • nobugsonme

    Chris,
    Thanks for a wonderful theme!
    I have been looking but having trouble finding the answer to this one:
    how can I change the number of comments and posts that display in “recent comments”, “recent posts” in the sidebar widgets? (In the cutline on wordpress.com, there’s a spot to fill in the number, but I don’t see it on the stand-alone wordpress, and I’m new to all this.

    Thanks!

  • Jill

    Chris,

    Thanks so much for your wonderful theme. I am a beginner and have a few questions and was wondering if you could help me out:

    *I was trying to put vodpod in my sidebar for the videos, and in the process I did something funky and the sidebar has a syntax error. I tried fixing it in ftp but it didn’t work. Yikes! Your sidebar is awesome on Pearsonified- can you show me how to do that and help me on where to put the vodpod code?

    *Sometimes my random header images don’t show up – how can I fix this?

    *on Pearsonified, you have black in the background – can I make that modification on Cutline?

    So sorry about the newbie questions, but I really appreciate your help.

    Also read your 5 things post and wanted to give you a big hug – you handled yourself very well. There is no shame in walking away – mean people suck.

    Thanks so much!

    Jill

  • Chris

    Hey Chris. First off I absolutely love the theme. I have just installed widgets and I am running into some problems now. The font in the sidebar is suddenly smaller and the spacing between sidebar widgets is almost gone.
    All help is much appreciated!

  • nobugsonme

    One more question– this may seem like a dumb question, but is the cutline sitemap going to have the same effect on search engines as a google sitemap? (Someone explained that I should use google’s sitemap tool, but if the Cutline one is as good, I’d rather use that.)
    Thanks again!

  • Melissa Moreno

    I think it works perfect do not see any problems at all thanks

  • Brenda

    Hi Chris,
    Thanks for the great theme.
    I’ve upgraded with no big issues. Just one small problem – Adsense won’t show in the Sidebar on the Frontpage. I use WP Sidebar Widgets and copy the code into a text block. It worked in the previous version of Cutline, but not since the upgrade.
    Any thoughts?
    Many thanks,
    Brenda

  • tech

    cool theme for wordpress colics 🙂

    i’ll use it on my personal blog

    thanks…

  • Wes

    In case anyone is interested in Edit links on the front end, it’s very simple.

    Within index.php, on the 12th line, you need to add before the .

    Within single.php on the 12th line as well, you’ll do the same exact thing.

  • Laura

    Hi Chris,

    Your theme is awesome. I had been using PressRow for a few months, but just switched over to Cutline. I love them both, so it’s been hard for me to decide, but I think I like Cutline just a little bit more.

    I have a question for you: I’m trying to add pictures into my sidebar but I don’t use Flickr. I used to run a modified Kubrick theme and was able to add img tags into my sidebar to post the thumbnails. But with both PressRow and Cutline I’ve had difficulty doing this—it seems that any time I add an img tag the entire sidebar disappears (as the case is with Cutline) or everything below the tag disappears and the photo doesn’t show up (as is the case with PR).

    Do you know a good way to work around this issue?

    I’d appreciate any help you might have to offer.

    Thanks!
    Laura

  • Laura

    PS, I’m running Firefox 2.0.0.3 on Mac OS 10.3.9, if that makes a difference.

  • Tom

    Hey Chris,

    Fantastic theme, but I have a question.

    On my Front Page (where I am using split posts) everything below the first post snippet, starting with that post’s tags, just started displaying in larger size text. I didn’t change anything except to begin using split posts.

    Any help?

  • Mark Dowling

    Chris,

    Not sure if this is the place for my question, but here goes.

    Whenever I attempt to put javascript in the sidebar or footer (eg the google analytics script), I get sent straight to the 404 page. Even an empty script tag will do this.

    What can I be doing wrong? The same code works fine on another blog (not cutline) but I can’t get it to work with cutline.

    Please can you give me some hints. I’m out of ideas.

    Thanks and regards
    Mark

  • Timen

    Chris,

    Thanks for all your work on Cutline. It’s really a great theme.

  • Sue Olson

    I may be in over my head right now but I am obsessed with creating a great blog…I am having trouble uploading cutline and the tutorial is suggesting that I use installation instructions from you. Like what file should things be extracted to etc… I seem WAY out of my league compared to all the other comments but we all have to start somewhere. Much appreciated!

  • Brandon Hull

    Can anyone help with this: I’m suddenly get notification that an image is missing: http://www.salesteamtools.com/wp-content/themes/Cutline/images/submit_comment.gif

    Makes no sense, as I don’t find that file in the Cutline zip distribution.

    Thanks in advance.

  • Neeraj Kumar

    I am using cutline and it is working great. However I would like to provide RSS feed to the comments for each individual post.

    Is there a way to turn that feature on in cutline?

  • Peter

    Chris, for new users installing this theme on a fresh WP install, you should mention that you need the Ultimate Tag Warrior plugin or it doesn’t work.

  • Janet

    Chris, I like the theme and I LOVE the way you obviously are supporting it. I wanted a three-column theme, but I hadn’t found one that satisfied me. Tomorrow’s project: download Cutline (as an old newspaper person, I even know what “cutline” mean!) and commit to it for my newish blog.

  • Kapil

    Chris, how can I separate my trackbacks and pings from the comments. Is there a plugin you would recommend? Please help. Thanks.

  • Anders

    Hi – I am testing cutline on my localhost. I’m running WordPress 2.1.3 and I deactivated all my plugins, and then switched to the cutline theme and got a long list of errors at the top of the page, like this one:

    WordPress database error: [Data truncated for column ‘autoload’ at row 1]
    INSERT INTO wp_options (option_name, option_value, option_description, autoload) VALUES (‘k2asidesposition’, ‘0’, ‘Whether to use inline or sidebar asides’, ”)

    Any idea what the problem might be?

    Thnx!

    -Anders

  • Phat Handbags

    Chris,

    Thanks for creating Cutline , I just started this new site and plan on a few more…

  • Joseph

    Hi, great theme. I’m using it at http://www.thebasketballforum.com with some modifications. I would like to show a feedburner subscribe to email box to the right of the h1 title but I cannot find where to insert it. When I insert it in the header (in several different places), it pushes the h1 title down. How can I do this?

  • Joseph

    Nevermind, I used pos_abs to solve the problem. Thanks for the theme. I have followed your instructions in the tubetorial video. I even put the sidebar on the left. Feel free to use it as an example site.

    Can’t thank you enough for the theme, and the custom css is pure genious!

Leave a Comment (Need help? Visit our Support page and Forums first.)