The Copyblogger Theme for WordPress

by Chris Pearson

When Brian rolled out the latest design for Copyblogger, he promised to chain me to a computer and whip me until I was able to resurrect the old design as a ubiquitous WordPress theme.

Copyblogger Theme for WordPress

Today, I’m happy to announce that the chains have come off, the welts on my back are beginning to heal, and you, my friends, have a brand new toy—the Copyblogger Theme for WordPress.

“Even Better than the Real Thing”

When Bono sang those lyrics for U2, he was almost certainly talking about this new theme (yeah, he’s clairvoyant). With a completely updated XHTML and CSS framework, the new version of Copyblogger 1.0 is leaner, cleaner, and more intricately detailed than its predecessor, which graced this site for 14 months before being swept into the electronic dustbin.

Here are just a few highlights of the new Copyblogger theme:

  • Clean markup that has been meticulously optimized for maximum SEO performance
  • Em-based sizing, so the layout scales beautifully and maintains aspect ratios even when text is resized
  • Typography set to a very strict grid which produces a clean vertical harmony between the main content and the sidebar content as you scroll down the page
  • Killer comments
  • Widget ready
  • Totally customizable color schemes via the use of custom.css, a special stylesheet that you can tweak without fear of messing up anything on the theme!

Check out the stylistic goodness for yourself over at the Copyblogger Theme Demo.

So You Want to Customize It…

One of the things that I’ve found to be true in the theme development world is that you simply cannot give people enough flexibility with regard to the elements they can customize on their own—things like colors, type faces, sidebar widgets, etc. The challenge, of course, is to accommodate all of these things in an elegant, seamless manner that does not “break” the theme or even disrupt the continuity of the text on the page.

To deal with this problem, I created a customizable skeletal framework on a separate stylesheet called custom.css. This fully-outfitted CSS file contains definitions for every element whose color can be changed. The end result is a remarkable flexibility that will allow you to tweak colors and fonts without the hassle of digging through confusing CSS or worrying that you might be causing irreparable damage to the stylesheet.

Copyblogger OrganicAs with most things of this nature, the best way to learn it is to do it, and to help you do it, I’ve created a special custom style package for the Copyblogger theme called Organic. It makes exclusive use of the custom.css file to initiate all of the styling changes, so in theory, the ambitious among you ought to be able to produce something that is uniquely customized to suit your taste.

Installing the Organic style package (or any custom style package, for that matter) is pretty darn simple. All you have to do is place the custom.css file and the /custom folder inside your Copyblogger theme directory, refresh your Web site, and boom—new styles!

Download it Already

If you change themes more often than you change clothes or if you’re simply looking for a top-notch theme that’s been given inordinate amounts of TLC, the Copyblogger Theme for WordPress has got you covered.

Check out the demo site for more info on the theme and to take it for a spin!

Download the Copyblogger theme.

Download the Organic custom style package.

Questions or comments about the theme? Head over to the demo site, which contains detailed answers to common questions you might have. Thanks!

Thanks!

Related Articles

166 comments... add one

  • #1 Peter Cooper → 05.22.07 at 1:00 pm

    That totally, totally kicks butt. I am sure to use this somewhere or other.. because I really loved that design (more than the current one I’m afraid, sorry!) and this is a really slick implementation. Kudos!

  • #2 MN Web Design → 05.22.07 at 1:09 pm

    Wow, nice theme! Thanks a lot, much appreciated!

  • #3 Jonathan-C. Phillips → 05.22.07 at 1:12 pm

    awesome! will definitely try it out on a blog or two, though this theme is kind of a “signature” theme, everyone knows about copyblogger and the clean theme Brian had before, but it’s surely gonna be hugely popular! good job Chris! :)

  • #4 Copyblogger | Unmatched Themes → 05.22.07 at 1:38 pm

    […] Download This Theme […]

  • #5 Shane → 05.22.07 at 1:40 pm

    Missing an “s” in that last “Download the Copybloger theme” :)

  • #6 Ed → 05.22.07 at 1:44 pm

    A valuable contribution to the WordPress theme pool. I can’t wait to see a three-column version.

  • #7 Chris P. → 05.22.07 at 1:45 pm Copyblogger

    Jonathan — One of my goals was to provide you with a simple system for modifying the theme in order to get away from that “signature” look you mentioned.

    The Organic style package, which you can see at the demo site if you click on the “Organic Copyblogger” link in the sidebar, is one example that I think is barely reminiscent of its red, black, and white cousin.

    Over the coming weeks, I’ll be very interested to see what kinds of color combinations people come up with!

  • #8 Copyblogger Theme GOES Public : WordPress Themes → 05.22.07 at 1:48 pm

    […] over and check it out, demo it, and download […]

  • #9 ClarkeW → 05.22.07 at 2:00 pm

    This is great, I’m a huge fan of Cutline and have developed 3 sites using it so far. I’m actually in the process of getting ready to redesign my own blog, so I think I’ll give this one a try!

    Thanks

  • #10 Bruce → 05.22.07 at 2:41 pm

    Great job, Chris.
    I currently have it up and running at
    http://www.dkeener.com/keenstuff/blog/

    and have noticed that the Share This plugin is not behaving very well with it: the text and image runs together. I would appreciate you looking at the site and making a recommendation on how to fix. Notice that I did not have this problem with Cutline.

    Thank you!

  • #11 Azzam → 05.22.07 at 2:42 pm

    What can I say about your generous contribution. Outstanding to say the least.

    Good Man! I will do justice to this theme

  • #12 Chris P. → 05.22.07 at 2:48 pm Copyblogger

    Bruce — The very last definition in the “share this” stylesheet looks like this:

    .akst_share_link {
      background: 1px 0 url(share-icon-16x16.gif) no-repeat;
      padding: 1px 0 3px 22px;
    }

    You need to add “!important” to the padding declaration, so that it now looks like this:

    padding: 1px 0 3px 22px !important;

    That should do it!

  • #13 Bruce → 05.22.07 at 3:05 pm

    Chris,

    That worked perfectly. Thank You!

    Again, super work. Now I have the hard decision of going with this theme or Cutline. I like both a lot.

    Bruce

  • #14 Chris P. → 05.22.07 at 3:06 pm Copyblogger

    Do a little customizing and you’ll be sold :)

  • #15 Bruce → 05.22.07 at 3:10 pm

    Thanks! :)

  • #16 Matt Keegan → 05.22.07 at 4:58 pm

    What an attractive theme! I so enjoy the various themes developed for Web 2.0 of late. Give me “widget ready” any day too.

  • #17 Chris P. → 05.22.07 at 5:02 pm Copyblogger

    Matt — Yep, it’s widget-ready!

  • #18 J.D. → 05.22.07 at 5:26 pm

    Sweet. I’ve always coveted this design. (Actually, I’ve always coveted a custom design from you, Chris, but your site says you’re not taking on new work.)

    Do you have any suggestions for implementing archives with this theme? I love the way you handle archives at your personal site, but don’t have the skillz to pull that off. I’d be grateful for guidance!

  • #19 Jonathan-C. Phillips → 05.22.07 at 6:48 pm

    Chris, thanx a lot for the fast reply! really appreciated! I downloaded the theme and the organic package, it will probably take me some time to go over everything, but i have a feeling i’ll be using it on a new blog i’m working on! :) Good job Chris!

  • #20   WordPress Theme: Copyblogger by Blogging Pro → 05.22.07 at 8:09 pm

    […] great addition to the free, quality WordPress themes. Check out their post on Copyblogger, as well as the […]

  • #21 Brad → 05.22.07 at 8:14 pm

    Hey-

    If anyone out there decides to give a try at making this theme with the sidebar on the left, Please Please Please email me!

    Thanks,

    Brad

  • #22 Mike → 05.22.07 at 9:20 pm

    Uh-oh ! I feel a new Theme acomin’ to my blog !

  • #23 Time to Try The New Copyblogger Wordpress Theme → 05.22.07 at 9:42 pm

    […] Pearson.  Well now that he sold the Cutline theme, he released a new theme in conjunction with Copyblogger.  So far from what I’ve read it basically resembles the old Copyblogger design and is fully […]

  • #24 Chris Baskind → 05.23.07 at 12:35 am

    A very nice contribution, Chris. Thanks to both you and Brian. :-)

  • #25 kevin → 05.23.07 at 12:55 am

    what is the code for having an Edit link on your posts when logged in as a blog owner?

  • #26 WordPress Theme: Copyblogger - Money Making Blog How To → 05.23.07 at 6:15 am

    […] great addition to the free, quality WordPress themes. Check out their post on Copyblogger, as well as the demo. Written by Arrie on May 23rd, 2007 with no comments. Read more articles on […]

  • #27 Chris P. → 05.23.07 at 9:36 am Copyblogger

    J.D. — I have yet to post a “how-to” on the demo site about creating an Archives page, but the process is identical to that first introduced on the Cutline theme. So basically, all you have to do is create a page with a page slug of “archives” that utilizes the “Archives” Page Template.

    Jonathan — Thanks!

  • #28 Blog News Watch » Blog Archive » Wednesday Roundup: May 23, 2007 → 05.23.07 at 9:41 am

    […] has big news - it’s its own Wordpress theme! Now you can share in the […]

  • #29 Chris P. → 05.23.07 at 9:47 am Copyblogger

    Brad — You can easily flip the two columns by adding a single definition to your custom.css file:

    .custom #content { padding: 0 0 0 6em; float: right; }

    Once you do this, IE will still be messed up, so you’ll also need to edit the ie7.css file by adding the following definition:

    .custom #content { padding: 0 0 0 5.9em; }

    That should do it!

  • #30 J.D. → 05.23.07 at 10:07 am

    Hi, Chris. Thanks for the reply.

    Installing archives with Cutline presupposes an “options” subhead in the theme editor. There isn’t one for the Copyblogger them (at least not for me).

    I’ve created an empty archives page. I see the archives template in the theme editor. But how do I get the two to connect for archival goodness?

    (Actually, I just noticed that my theme editor has two files labeled “archives”: archive.php and archives.php. Presumably these are two different methods of handling archives.)

    Thanks for your help. And thanks for the theme.

  • #31 New Theme to use for WordPress - Idiot Affilate → 05.23.07 at 10:16 am

    […] go to his site and download the theme for keepsake if nothing else. Share and Enjoy: These icons link to social bookmarking sites […]

  • #32 Chris P. → 05.23.07 at 11:19 am Copyblogger

    J.D. — You’re totally right about that; I had completely forgotten about that silly options page (which never worked properly anyway).

    Follow these steps and you’ll have an Archives page:

    1. Create a page
    2. Enter whatever you want in the title, but do not enter any content
    3. Select “Archives” from the Page Template dropdown menu on the right
    4. Enter “archives” (without the quotes) in the Page Slug field, which is also on the right
    5. Save/publish your page

  • #33 J.D. → 05.23.07 at 11:39 am

    Thank you, Chris. If you’re ever interested in creating a custom design for Get Rich Slowly, drop me a line. I may not be able to afford it, but I’m certainly willing to talk about it.

    @kevin
    To add the edit link, I used the following code:

    I added it to the Main Index Template and to the Single Post template, on the same line as the date and category.

    I’m quite pleased with this template so far. It’s exactly what I wanted for my new site.

  • #34 Ashwin → 05.23.07 at 11:45 am

    Thanks a lot for the theme, Chris! Awesome stuff. I’ll be using this theme soon enough for my blog.

    I’ve a quick question to ask you. How did ya put up the “CopyBlogger” image thing in the footer? Just place an image and we’re ready or it needs some stuffs to do?

  • #35 Michael → 05.23.07 at 12:11 pm

    There needs to be an extra step in the instructions to create an Archives page.

    After following Chris’s steps, change your permalink structure to “Numeric.” This will allow the pages to actually connect without editing any code.

  • #36 Davor → 05.23.07 at 12:24 pm

    Really cool theme. I already installed it on my blog. I moved the navigation to previous and next articles below the current article… Too bad there is no nice styling for a tag cloud…

  • #37 Yu^2 → 05.23.07 at 12:57 pm

    Chris P. has done it again! The man’s a machine.

  • #38 Copyblogger WordPress Theme → 05.23.07 at 1:12 pm

    […] download the Copyblogger WordPress theme […]

  • #39 Miscellania VI — Inklings • The Copywriter’s Blog → 05.23.07 at 1:58 pm

    […] 30 minutes! Many thanks to Chris Pearson and  Copyblogger. You can download the theme, gratis, here. Powered by Gregarious […]

  • #40 Chris P. → 05.23.07 at 2:13 pm Copyblogger

    Ashwin — I think you’re talking about the footer image on this site and not the theme, since there is no image in the theme’s footer :)

    If you are, then I positioned that element using CSS (without using an actual img tag).

    Davor — Great point about the tag cloud. My primary concern, however, is that a plugin with proprietary CSS classes is probably the most common means of implementing a tag cloud… I’d much prefer to use code that I know will be universal to WordPress, and I think the best answer here will occur when a tag cloud widget is included with a new WP install.

    Yu^2 — Hardly a machine… I need to get to work!

  • #41 Bruce → 05.23.07 at 2:35 pm

    Chris,

    Have you considered making a 3-column version of this (or any of your other themes) available? I know that Brian Gardner is working on a 3-column version of Cutline, but wondered if you are working on any 3′ers yourself. Not totally sure I want to go to a 3-column approach, as about 3% of my readers still have 800×600 displays, but the increased ability to position ads without overshadowing other sidebar items intrigues me.

    Thanks. I do like the copyblogger theme a lot, and might not even do any customizations on it at all: it is really clean and professional.

    Bruce

  • #42 uncleboob → 05.24.07 at 1:47 am

    Wow - this theme is simple and it rocks anyway! http://www.uncleboob.de will use this one immediately

  • #43 Weblog Tools Collection » Blog Archive » WordPress Theme Releases for 05/24 → 05.24.07 at 5:42 am

    […] fixes and everything about blogging, especially with Wordpress. Go ahead, subscribe to our feed!Copyblogger is a two column, fixed width, widget ready theme, SEO optimized theme based on the original […]

  • #44 TC → 05.24.07 at 9:13 am

    brilliant! thanks

  • #45 Bruce → 05.24.07 at 2:53 pm

    One final thing, Chris, and then I’ll try to not bother you again. Have you tested this on WordPress 2.2 ? I assume it would have no problem, but wanted to know if you or anyone else has tried it out on 2.2. I am considering upgrading from 2.1.3 to 2.2 over the weekend.

    Thanks again for another Wonderful theme. I really like how it makes my site look.

    Bruce

  • #46 Robert → 05.24.07 at 5:09 pm

    Real nice design Chris.

    I’m trying unsuccessfully to add SiteMap and Contact into the header.

    Also, how would I add a tagline beneath the site title?

    Can you offer a suggestion?

  • #47 Ryan → 05.24.07 at 7:05 pm

    Chris, this theme is very cool! Thanks very much.

  • #48 Bruce → 05.24.07 at 8:45 pm

    I decided to go ahead and do the 2.2 WP upgrade, and CopyBlogger works fine with it. The upgrade went smoothly and it appears that nothing in CopyBlogger broke as a result of the upgrade (I did not really think it would, but now we all know that it works great).

    I have viewed in Firefox and Safari on my Mac and in IE7 on Windows.

  • #49 Chris P. → 05.24.07 at 11:12 pm Copyblogger

    Bruce — I actually wrote and tested the code within the WordPress 2.2 environment, and I’m glad that the upgrade went off without a hitch!

    Robert — In order to add links to your header, you’ll need to edit the nav_menu.php file in your Copyblogger theme folder. Simply follow the style of the link to the about page, and you should be fine.

    Regarding the tagline, check out this comment over at the demo site.

  • #50 Customizing Wordpress Themes | Pajama Professional → 05.25.07 at 9:10 am

    […] has their Wordpress theme available for download and I think I might start there. It’s clean and cool, not to mention SEO optimized. The […]

  • #51 Copyblogger Theme — guillaumelecrocq.fr → 05.25.07 at 4:56 pm

    […] am now using the kicking-ass Copyblogger Theme for WordPress by Chris Pearson. It is clean, highly customizable and WordPress 2.2 Widget […]

  • #52 Alwitt → 05.25.07 at 8:15 pm

    Nice theme! looking forward to 3 column version.

  • #53 Dan and Jennifer → 05.25.07 at 8:17 pm

    Hey Chris,

    Thanks, this is a really wesome theme! A question for you please.

    I’m trying to move the nav to the left side, which seems easy enough at first. It looks great in Firefox, but breaks in IE.

    Here are the 2 changes I made to style.css:
    - line 84: removed the #content right padding
    #content { width: 46.8em; padding: 0 0 0 0; float: right; }
    - line 86: added right padding to sidebar
    #sidebar { width: 20em; padding: 0 6em 0 0; float: left; }

    Looks as expected in Firefox, but in both IE6 and IE7 the sidebar gets pushed to the bottom of the page.

    Here’s the very rough test site:
    http://www.blogsuccessjournal.com/

    Any suggestions?

    Thanks!
    Dan

  • #54 Robert → 05.26.07 at 12:22 pm

    I have been searching for a replacement theme since December 2006. Then I blogged about it and then a couple of days later - BINGO! I found this remakable Copyblogger theme!

    It is fantastice. no problemo - how do I incorporate mt logo into the header? I am not a coder , so if you know , please write it out step by step and draw diagrams in a ‘join the dots’ style!

    I am useless at coding.

    I hope you can help

    Regards

    RObert

  • #55 Bruce → 05.26.07 at 3:07 pm

    Chris,

    I wanted to experiment with a wider theme so I added the following custom code:


    .custom #container { width: 970px; margin: 0 auto; }

    .custom #content_box { width: 970px; }

    .custom #content { width: 690px; padding: 0 6em 0 0; float: left; }

    .custom #sidebar { width: 200px; float: left; }

    Is it likely that I have broke anything in doing this?
    BTW, not clear to me that the wider design is truly what I want but wanted to know if this sort of experimenting is going to put break anything with one of the browsers.

    Best regards, and have a great holiday weekend!

    Bruce

  • #56 Bruce → 05.27.07 at 11:45 am

    Chris,
    Never mind on the re-size I attempted: I decided to not use it.

    However, like J.D. of Get Rich Slowly, I would like to discuss a custom design with you once your schedule becomes available. Also, like J.D., I’m not sure I can afford it, but I sure would like to discuss. Basically, I love the Copyblogger theme but would ultimately like to have a version of it that has a left and right sidebar.

    Again, thank you for making this incredible design available.

    Best Regards,
    Bruce

  • #57 WeblogToolsCollection DE » Blog Archive → 05.27.07 at 12:40 pm

    […] Copyblogger ist ein zwei-spaltiges Theme mit fester Breite und Unterstützung für Widgets. Es ist für Suchmaschinen optimiert und farblich weiß mit schwarzem Header und roten Akzenten. […]

  • #58 Chris P. → 05.27.07 at 2:04 pm Copyblogger

    Dan and Jennifer — You’ve done everything correctly, but you still need to make a small change to the ie7.css file to get the theme to display properly in both IE6 and IE7.

    Currently, your ie7.css file contains the following definition:

    #content { padding: 0 5.9em 0 0; }

    You need to change that to:

    #content { padding: 0 0 0 5.9em; }

    That should do it!

  • #59 Chris P. → 05.27.07 at 2:05 pm Copyblogger

    Bruce — I certainly appreciate that, but I am not available for hire.

  • #60 Slipping into a New Skin — Mental Shrapnel → 05.27.07 at 2:10 pm

    […] Time for a little change. Time to slap on the newly available Copyblogger theme. […]

  • #61 j david macor.com » Blog Archive » 6 Hot New Wordpress Themes → 05.27.07 at 3:46 pm

    […] The Copyblogger Theme […]

  • #62 WeblogToolsCollection Español » Blog Archive » Temas de WordPress publicados 24/5 → 05.28.07 at 10:31 am

    […] Copyblogger es un tema a 2 columnas, de ancho fijo, listo para widgets, optimizado para SEO, basado en el diseño orignal de CopyBlogger.comKolorful es un tema a 3 columnas, de ancho fijo, con página de opciones e impresión de la pagina de estilo. […]

  • #63 Technobuzz.net → 05.28.07 at 10:31 am

    Wow, nice theme!

  • #64 Copyblogger : un thème WordPress qui prend soin de la typo → 05.28.07 at 3:38 pm

    […] Présentation de ce thème WordPress (d’après le site de son éditeur). […]

  • #65 Robert → 05.28.07 at 5:51 pm

    Hi Chris.

    Thanks so much for the advice on tagline insertion and adding Contact and Sitemap to header.

    Both worked. But I need a space between the tagline and red line at the bottom of the header.

    I’ve looked at almost every template but can’t find where to make a change.

    One last bit of help…please?

    Regards
    Robert

  • #66 Dan and Jennifer → 05.28.07 at 7:39 pm

    Hey Chris,

    Thanks. I made this change to ie7.css and deployed it, but the sidebar is still dropping to the bottom of the screen in both IE6 and IE7. :-(

    Cleared cache, reloaded, same thing. Of course it still looks great in Firefox. :-)

    Do you have another suggestion I could try?

    Here again are the 2 changes I made to style.css so you don’t have to hunt down my original comment:
    - current line 84: removed the #content right padding
    #content { width: 46.8em; padding: 0 0 0 0; float: right; }
    - current line 86: added right padding to sidebar
    #sidebar { width: 20em; padding: 0 6em 0 0; float: left; }

    I didn’t make any other style changes.

    Looks as expected in Firefox, but in both IE6 and IE7 the sidebar gets pushed to the bottom of the page.

    Here’s the site again:
    http://www.BlogSuccessJournal.com

    Thank you!
    Dan

  • #67 Bruce → 05.29.07 at 10:29 am

    I’m running the Left-Column version right now over at
    Keener Living:

    http://www.dkeener.com/keenstuff/blog

    I’ve tested in Firefox 2, Safari, and IE7 but do not have access to IE6 or Firefox 1.5

    Would appreciate if any of you who use IE6 or FF1.5 would verify that is working good. I am testing a few other designs but this one is the most appealing.

    Chris, if you ever make a 3-column available, please let us know the second you do! Your themes are absolutely top-notch!

    Regards,
    Bruce

  • #68 Dan and Jennifer → 05.29.07 at 10:40 am

    Bruce,

    Looks good in IE6 and Firefox 2.0.

    So exactly what style changes did you make to get the sidebar on the left? :-)

    Thanks!
    Dan

  • #69 Bruce → 05.29.07 at 10:55 am

    Hi Dan,

    I did _only_ the ones that Chris showed above, and absolutely no other changes (will customize a bit later). That is, I did just the one code change to custom.css and the one to ie7.css

    Thanks for letting me know about IE6!

    Bruce

  • #70 Dan and Jennifer → 05.29.07 at 11:06 am

    Hey Bruce,

    Can you please paste here the changed lines from both of these files? I pasted mine above but apparently I’m doing something just a bit off. :-)

    Thanks!
    Dan

  • #71 Bruce → 05.29.07 at 11:13 am

    Dan,

    I added this to the bottom of custom.css:
    .custom #content { padding: 0 0 0 6em; float: right; }

    and this to the bottom of ie7.css:
    .custom #content { padding: 0 0 0 5.9em; }

    I made no other changes.

    Good luck on it!
    Bruce

  • #72 Dan and Jennifer → 05.29.07 at 8:52 pm

    Thanks Bruce, that worked great!

    I had made my changes to style.css not custom.css.

    So you added those directives to the END of custom.css and ie7.css, effectively overriding the values set earlier on. Interesting approach, but it works fine.

    Oh well, it works great now.

    @ Chris - Thanks, this is a really excellent theme.

    We’re currently using MistyLook for our AskDanAndJennifer.com Dating & Relationship advice column (our main site) and we were looking for a cool new look for our new blog about Power Blogging - literally last week when your post about the CopyBlogger theme came out.

    And unfortunately I’m not done tinkering with it yet. Now to make it a little wider. :-)

    Have an awesome day!
    Dan

  • #73 Bruce → 05.29.07 at 9:04 pm

    Glad to hear that it worked well Dan. I second your appreciation of Chris: superb theme!

  • #74 WordPress Weekly Buzz Links → 05.30.07 at 9:02 am

    […] The Copyblogger Theme for WordPress | Copyblogger Comments by SU: ArttuR rated 7 days ago Professional WordPress theme now available for free. Used formerly by Copyblogger. […]

  • #75 Update on Site Design : Keener Living → 05.30.07 at 11:30 am

    […] of you of are visiting this site expecting to see a design based on either Chris Pearson’s Copyblogger or Cutline designs and many of you are expecting to see Brian Gardner’s Blue Zinfandel […]

  • #76 Wordpress Theme - The CopyBlogger Theme at WPThemesPlugin.com - Wordpress Themes | Plugins | Blog Tools | Interviews | Make Money Online → 05.30.07 at 12:55 pm

    […] Visit and Download […]

  • #77 Dan and Jennifer → 05.30.07 at 6:24 pm

    Hey Chris,

    Before I do something potentially unholy to your beautiful theme, I was wondering if you could suggest an elegant way to add Tags.

    In order to get Technorati syndicating your blog, it needs to find tags on the post detail pages. That plus tag pages rank really well in Google - a very good thing.

    Here’s how we use Tags on our main Dating & Relationship advice blog - see the gray “tags” list right under the post body:
    http://www.askdanandjennifer.com/sex-and-intimacy/legalize-prostitution-the-shocking-poll-results-are-in/

    I was going to butcher it in myself, but being COMPLETELY non-artistically-inclined (as you can see by what I’ve done to our MistyLook to date), I thought it’d be best to ask if you could suggest an elegant way of doing this without messing up this really cool theme. :-)

    Thanks Chris.

    Have an awesome day!
    Dan

  • #78 Brian Clark → 05.30.07 at 6:33 pm

    Hey Dan, Technorati treats categories the same as tags, so that’s why I don’t use them. Every time you place a post in a category you’re “tagging” it as far as they are concerned.

    But there are also tag plugins for WordPress that can do them separately if you’d like.

  • #79 Dan and Jennifer → 05.30.07 at 6:39 pm

    Hey Brian,

    Thanks. Yeah, I know about that, but we’ve become pretty tag happy over the past year, especially since tag pages started ranking very well on Google. We tag every post very specifically so it gets ranked for those specific terms.

    You can see what I mean on the example post I mentioned above. Those tags are way too specific to list as categories. In our sidebar, we have around 7 categories (we call them Channels now) - trying to keep it easy to digest for the first time reader.

    Thought I’d put it out there in case Chris might suggest a simple HTML addition so I don’t pervert this elegant theme. :-)

    Thanks Brian.
    Dan

  • #80 azzam → 05.31.07 at 3:55 am

    We have made the theme wider and add the additional sidebar to make it look three column.
    Thinking of converting into a Joomla template in a few weeks also.
    Check it here at http://www.oscandy.com.

  • #81 Bruce → 05.31.07 at 7:14 am

    Nice. Anyway to make this available, or would that violate your terms Chris?

  • #82 Ed → 05.31.07 at 7:17 am

    I second Bruce. A nice look that would be even better if released.

  • #83 azzam → 05.31.07 at 7:28 am

    There is is not an issue to disclose how the 3 columns were created and the template made wider. There is no need to release another template as it is internal hack, however it is not a new column but a sidebar added to the template

  • #84 Ed → 05.31.07 at 7:36 am

    Azzam,

    How did you add the second sidebar?

  • #85 Chris P. → 05.31.07 at 9:24 am Copyblogger

    Dan and Jennifer — Regarding the tags, I think you have a couple of options. You can use the Technorati tags plugin or the Ultimate Tag Warrior plugin—either one should integrate nicely. My only advice would be to wrap the “tags” in <p> tags and not <div> tags, as the <p> tags will be automatically styled.

    Azzam — Looks really nice! You did a fine job with that.

    Bruce, Ed — He would be free to release the theme as long as he retained the original attribution from both the footer and the stylesheet. The Creative Commons 2.5 ShareAlike License stipulates that attribution on modified releases must be “at least as prominent as the original.”

  • #86 azzam → 05.31.07 at 9:29 am

    oh shucks :)

    But I can not take credit for it, if I must tell a secret I screwed up the template and Taras co-author on the blog and the developer fixed it up.

  • #87 Bruce → 05.31.07 at 9:30 am

    Chris — Thanks for the clarification … much appreciated, as is the original design. I am actually using another, wider screen design right now, but I wonder if I made a bad decision. Copyblogger is the Cleanest design I have ever seen.

    Azzam — you guys really did do a fantastic job with this customization. Let us all know if you decide to release it with the Creative Commons 2.5 ShareAlike License intact.

    Thanks again.

  • #88 The Newspaper Blog on Armani → 05.31.07 at 9:45 am

    […] After using the Fast Track theme for over 17 months, it’s time that I changed to a new and a better theme. Now this blog sports CopyBlogger theme. […]

  • #89 Bruce → 05.31.07 at 11:31 am

    Azzam — Thought you should know, that, while I can access your site via my Mac and Firefox, I have not been able to access it via Windows and IE7. The page initially appears to load, then Windows gives an error message that it cannot load the site, and then it unloads it so that it is not visible and accessible through a retry. I’ve verified this a few times. You might need to make changes to the ie6 and ie7 stylesheets, or perhaps there is something odd going on with my Windows machine, but I thought you should have this data point.

  • #90 Azzam → 05.31.07 at 12:05 pm

    Thanks for the feedback, but what IE6 and IE7?? LOL
    Will get onto it.

  • #91 Azzam → 05.31.07 at 12:43 pm

    Hi Chris,

    We want to release the theme but wanted to understand and clarify whether we are ok to add our credits into the them i.e., in the footer alongside your info’. Not really too fussed about the stylesheet.

    Cheers

  • #92 Webquills.net » The Web Master Skill No One Talks About → 05.31.07 at 9:59 pm

    […] but I hope I’ll redeem myself by throwing some traffic in that direction. (Also, the Copyblogger theme for Wordpress deserves a […]

  • #93 De cara nova — BlogueIsso! → 05.31.07 at 11:55 pm

    […] cansei de mexer nisso e vou ficar com o Copyblogger, mais rápido, igualmente interessante como o Redoable (tá, eu sei, o outro era mais legal) e […]

  • #94 Chris P. → 06.01.07 at 6:03 am Copyblogger

    Azzam — Just add a new <p> in the footer that says “3 column mod by oscandy” or something to that effect :)

  • #95 azzam → 06.01.07 at 6:14 am

    We was wondering if you wanted to release the theme by doing a post and we just give it to you and the users can download from this blog

  • #96 Friday Night Links | Copyblogger → 06.01.07 at 6:01 pm

    […] auto-bury got you down? Try these alternatives (nice theme mod, […]

  • #97 Bruce → 06.01.07 at 9:29 pm

    Chris (or anyone who knows the answer):

    I just do not understand CSS design well enough to understand em-based translation into pixels. I’ve read up on it, but still really don’t get it. You can send me off to read some, as I suppose I need to understand it at some point, but would help if you could tell me what the largest pixel width picture I could comfortably put into a post.

    Sorry to bug you with what I am sure is such trivia to you, but would be very helpful for me to know.

    Thank you very much, and have a great weekend.

  • #98 blogpaul :: tech . tattoos . talk » Stolen Link Love → 06.02.07 at 12:40 am

    […] auto-bury got you down? Try these alternatives (nice theme mod, […]

  • #99 Ashwin → 06.02.07 at 8:15 am

    Chris -
    I’ve installed this theme on my blog and I’m very much happy with the end result. Thanks for the theme. :)

    I have 4 quick questions:

    1. How do I add my blog name (for eg, ‘copyblogger’) in the footer as in this blog? I’ve asked this before, but you said css class. Do I have to insert in the same way as we do for the image ussing the class=”left” thing?

    2. How can I have a image like in this blog placed in the header with my blog’s title? Where should the image be located in the theme files? Do I need to use the class=right/left things?

    3. What’s the 6 digit hexa code for the link color. I want to mach it with my Adsense links. Where can I find it out?

    4. If anyone posts some URL in the comments, then the comment box gets broken to accomodate the link, but here it’s proper. How can I get rid of the problem?

  • #100 Ashwin → 06.02.07 at 8:21 am

    One more question that I forgot to ask.

    The theme shuts off comments by default on pages. How do I enable them?

  • #101 Chris P. → 06.02.07 at 11:15 am Copyblogger

    Azzam — I’ll mention the fact that you’ve got a 3-column version available for download in the next post on the demo site.

    Bruce — If you’ve not made any adjustments to the width of the theme, then the maximum picture width that you can place in the content column is 468px. Also, I wrote about using images with the theme over at the demo site (link above), and I covered things like widths and available classes in that article.

    Ashwin

    The footer graphic is placed by using CSS absolute/relative positioning techniques, and it’s something that you would have to implement yourself. The only reason I used it on this site was because I wanted to establish a visual connection between the logo in the header and the one in the footer.
    The left and right classes only apply to images used within the body of posts or pages. On this site, the tagline is a custom graphic that is once again moved into place through the use of a CSS-only absolute positioning technique. If you check the markup, you’ll see that it’s not an img but actually just an empty div with id="tagline" appended to it. Again, this is totally custom, so it’s something you’d have to implement on your own.
    The default link color on the Copyblogger Theme is #a90000. On the Organic version, the default link color is #d2382c.
    Unfortunately, the URL problem is something that you have to address manually on a case-by-case basis. So, if a user leaves a comment with a big URL in it, what you have to do is convert that URL to a link (<a>) and provide just a couple words of anchor text. That way, the URL doesn’t actually show up in the comment—it’s just a normal link. The URL “breaks” the comment block because it contains no spaces and is treated like one huge word, which is completely undesirable.
    I forgot to include the code to allow comments on pages, and that’s something I’ll add in for the next release of the theme.

  • #102 Bruce → 06.02.07 at 11:58 am

    Chris, thank you for the reminder on the link: I had forgotten that you had already provided that guidance. 468px is more than adequate for me.

  • #103 Copyblogger Theme For Wordpress 3 column version — Open Source Candy → 06.02.07 at 4:10 pm

    […] Pearson had a theme created that is the mother load of all wordpress themes that had to have a ‘boost of coding steroid’ injected to enhance its performance.  […]

  • #104 Azzam → 06.02.07 at 4:14 pm

    Hey all,

    You can head over to download the 3 column version.

    Enjoy! :)

  • #105 Ed → 06.03.07 at 3:17 pm

    Azzam, thanks for the mod; it’s what I needed to switch to the CopyBlogger theme. A question: what plugin do you use to accomplish the “bookmark” feature at the end of the post?

  • #106 Azzam → 06.03.07 at 3:27 pm

    addthis.com, it has a wordpress plugin so just ‘plug and play’.

  • #107 wpthemes → 06.04.07 at 5:23 am

    Copyblogger WordPress theme…

  • #108 The Copyblogger Wordpress Theme Now Comes in Three Columns | Copyblogger → 06.04.07 at 8:10 am

    […] updated the Copyblogger Theme page so that everyone will have a choice between two columns and three. Many thanks to the guys at Open […]

  • #109 Dan and Jennifer → 06.04.07 at 10:12 am

    @ Ashwin,

    Regarding long URLs that break the comment block (break out of the div), there’s a WP plugin that will truncate them automagicaly shorten the URL shown - it’s called “Chunk URLs”.

    Have an awesome day!
    Dan & Jennifer

  • #110 vijay → 06.05.07 at 1:44 am

    Was searching a good theme for so many days to start with Wordpress!
    Got it! Thanks copyblogger.
    Lets see how can I customise it.

  • #111 azzam → 06.05.07 at 4:14 am

    Please do share any customisation here with the community.

  • #112 vijay → 06.05.07 at 1:46 pm

    Chris
    I had copied the 3 column copyblogger theme on softwaretestinghelp.com .. but dont know why its not showing left sidebar?
    I am totaly new to wordpress so explain me the problem in detail please!
    and your solution to Archive page also not worked for me :( i.e creating a page selecting it as archive template and slug as archive..

  • #113 azzam → 06.05.07 at 1:53 pm

    In regards to the archive page you will have to create an archive page in the header.
    The example of the ‘home’ and the ‘about’ links in the header should give enough details, just duplicate for the ‘archive’. In regards to the sidebar Taras is away and therefore he would need to look at the problem prior to assessing what is wrong, he can look at it when he gets back

  • #114 Bruce → 06.05.07 at 2:00 pm

    vijay - try viewing it on my site to see if the left column is visible there for you. Let me know whether you see it or not. It is visible to me on every platform and browser I have, but wondering if your platform or browser arrangement may be preventing you seeing it. Not likely, but could be possible.

  • #115 Gustavo → 06.05.07 at 9:57 pm

    Thanks for the release of your Blog theme Chris, it’s much appreciated, I’m working on it on my site.

  • #116 Show #7 - What Are The Best Podcasting Mics? The Answer May Surprise You: An Interview With Mark Jensen | MedSqod: Podcasting for Medical Professionals → 06.06.07 at 1:15 am

    […] Connections Reloaded 1.5, for its modernity and elegance, but both Cutline and its sister theme, Copyblogger, focus on straightforward lines and ease of […]

  • #117 Bruce → 06.07.07 at 7:46 am

    Azzam, If you are still reading this post, thought I should let you know that the left column of the three column version behaves badly on Safari on a Mac. I have (at least temporarily) stopped using the theme because of it. Sometimes the left column is pushed to the bottom of the screen, sometimes the headers in the left column are enormous (same size as the title of the posts). Not sure how to fix it myself or I would. Looks great in all other browsers, but several of my readers use Safari.

  • #118 azzam → 06.07.07 at 7:49 am

    i was actually seeing a few bugs in firefox also. I will wait on taras to have a look at it and fix it up

  • #119 SEO Practices → 06.07.07 at 9:22 am

    Thanks Brian for the release of the Copyblogger theme. I’m almost done with the changes to my site, just need to do some customization to add a personal touch to my Blog. I have found a couple problems though:

    I use the SEO Title Tag plugin in conjunction with the UTW, and I have noticed that my Blog is not taking the title for the home page from the one I elaborated with se SEO Title Tag plugin, but instead it is taking the title from the tagline in the general options tab of the control panel of my Wordpress Blog. That tagline is usually displayed on the header as a short description of the Blog.

    Can you please tell me if you know of any conflicts of such type generated with the change to the copyblogger theme, or am I doing something wrong?

  • #120 Weblog Tools Collection » Blog Archive » Wordpress Theme Releases for 6/08 → 06.08.07 at 4:58 pm

    […] highly visible, expansive theme for Wordpress based on Cutline. It was the original theme for CopyBlogger that Chris […]

  • #121 Temas para WordPress para el 09 de junio - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo. → 06.08.07 at 6:43 pm

    […] CopyBlogger tiene dos columnas, es altamente visible y ampliable. Esta basado en el tema Cutline. […]

  • #122 Greg → 06.08.07 at 9:56 pm

    fixed it.

  • #123 Copyblogger theme — Roberta Ferguson → 06.08.07 at 11:06 pm

    […] Welcome to the way I’d like my website to look, this week. Just kidding. I do love this theme, though. It’s from the maker of the Cutline theme, Chris Pearson. Download it here. […]

  • #124 Gideon → 06.09.07 at 11:40 am

    Very nice theme. I tried using it on my site, but I ran into the same “Share This” problem. I saw your fix above, but was unable to locate the stylesheet for share this. Any guidance on where it might be?

    Also, when you click on the icon for “Share This”, the popup box that opens with links to the various sites shows only the icons for those sites. The text links are there, but the background color, the text color and the hover color are the same, so they appear blank.

    Finally, I tried to add all the pages that I currently have in the nav bar to the nav bar file as recommended above, however after about 5, they started wrapping on to the next line. Any idea how to prevent that from happening (other than fewer nav bar links)?

  • #125 Catchkin » Wordpress Theme Releases for 6/08 → 06.09.07 at 11:57 pm

    […] highly visible, expansive theme for Wordpress based on Cutline. It was the original theme for CopyBlogger that Chris […]

  • #126 Bruce → 06.10.07 at 10:09 am

    azzam, I think I found the Safari problem, and it could be a prob with other browsers, too, although I haven’t noticed in FireFox on Mac, Windows, or on IE7:

    In my downloaded copy, the } is missing from the end of the line .custom #left h2

    Hope this helps.

  • #127 azzam → 06.10.07 at 10:13 am

    which file is this code in

  • #128 Bruce → 06.10.07 at 10:19 am

    The file is the custom.css file. Sorry I overlooked specifying it.

  • #129 Chris P. → 06.10.07 at 12:45 pm Copyblogger

    Guys and gals,

    Please take your questions about theme usage over to the demo site, which contains more detailed answers to common questions you might have.

    Thanks!

  • #130 New Design, Finally Live! — ClarkeW.com → 07.12.07 at 12:22 am

    […] my blogs, but this time I chose to go ahead and customize the new Copyblogger theme that was recently released.  Overall I’m pretty pleased with the way the site turned out and I think it looks much […]

  • #131 Changement de style — Michael Carpentier → 07.17.07 at 9:41 pm

    […] fait un bon bout de temps que je reluquais le thème Copyblogger de Chris Pearson. J’ai profité du lancement de Vivre sans voiture pour donner un coup de […]

  • #132 Matt → 07.30.07 at 12:44 am

    Hey, thanks a lot for making this template and for the support you have provided.

    I was wondering how I can modify the big RSS button in the top right corner of the sidebar.

    I want to either:
    A) Edit this and move it below the search form
    B) Delete this, so the Search form is at the top.

    Could you please help me do this. Thanks.

  • #133 Top 100 Best Wordpress Theme at eBlog - The Entertainment Blog → 08.02.07 at 3:56 pm

    […] - CopyBlogger Theme Theme by Copyblogger | Live Demo | […]

  • #134 Fixing the archives link in the Copyblogger theme — Andy Sylvester’s Web → 08.11.07 at 1:32 pm

    […] navigation area, but it did not have any information on my problem. After some searching, I found a comment on the main Copyblogger site which had the details I […]

  • #135 David → 08.21.07 at 4:25 pm

    I really like copyblogger but have experienced an apparent incompatibility with Share This — the Share This logo is compress over itself. Do anyone know a fix? Thanks.

  • #136 A Small Difference is A Difference None The Less « Blogsreview.Net → 08.24.07 at 2:01 am

    […] One of the things I did here was to remove the giant red rectangle which came with the original theme. I then contacted the designer and asked him to move my page links to be placed from left to right. Finally, I decided to use my amateur skills to create a banner for RSS subscription (see top of sidebar), which is probably one of its kind because of the custom wordings used. I might create a banner for this site later to further differentiate the look of this site from its counter-parts. These are all little things which we can do to make a difference to our blogs to make it stand out from the others. The changes I did are amateurish and based on my current limited knowledge of wordpress codings. See what awesome customisation Kristarella did on her site and compare that with the original copyblogger theme. […]

  • #137 How to Find a great wordpress theme the simple way.. | Perfidy → 09.06.07 at 12:26 am

    […] mood.. 3 column, widget ready here.. 3. Simple Grey - minimalist 2 column, widget ready theme 4. Copyblogger Organic - Pearson’s world famous copyblogger theme in organic styling, SEO optimized off its […]

  • #138 RMWebs → 09.09.07 at 6:26 pm

    Thanks for the great theme :)

  • #139 Temi a tre colonne per WordPress → 09.13.07 at 5:21 am

    […] CopyBlogger […]

  • #140 Improve Your Look with a Customized WordPress Theme << Vandelay Website Design → 09.13.07 at 7:18 pm

    […] Copyblogger […]

  • #141 Introducing…SEO Boy! | The Adventures of SEO Boy → 09.16.07 at 9:19 pm

    […] I hope it won’t, but taking a hard look, it probably will. Luckily, I’ve installed Copyblogger’s theme, which has worked out great so far in conjuction with WordPress! It may end up becoming my […]

  • #142 Tema Copyblogger — Stefano Gorgoni → 09.19.07 at 2:08 am

    […] cambiato tema a questo blog. Sono passato da Subtle theme a Copyblogger theme (il nome del tema non è stato scelto a caso, […]

  • #143 Richa → 09.27.07 at 12:50 pm

    This theme really look cool.Me too going to come up with new themes :)

  • #144 Wordpress 2.3 et nouveau thème | Cmicblog → 10.01.07 at 5:17 pm

    […] Copyblogger est orienté typographie, avec une option intéressante : lorsqu’on change la taille des caractères dans le browser, cela affecte tous les éléments de la page et pas seulement le corps du texte. Essayez! D’autre part, la personnalisation est aisée par l’utilisation d’une feuille de style custom.css . Je trouve le thème sobre et assez zen, j’y apporterai sans doute encore des modifications. Le support pour ce thème est assez riche, c’est aussi une des raisons de mon choix. […]

  • #145 imagensmix.com » Blog Archive » WordPress Temas ( Os Melhores do ano de 2007 5º Parte ) → 10.07.07 at 6:02 pm

    […] - CopyBlogger Theme Theme by Copyblogger | Live Demo | […]

  • #146 Le premier billet — mozan → 10.08.07 at 8:11 am

    […] Après un petit temps d’acclimatation, de la mise en place et traduction du thème “Copyblogger“,  il est désormais temps d’annoncer l’ouverture officiel de mon […]

  • #147 db → 10.12.07 at 8:15 pm

    Finally got this up and running. Playing around with the custom css files without to much success. Any resource online that references the colours mentioned in the code?

  • #148 VegasFoo » HowTo: Wordpress 101 → 10.15.07 at 11:09 pm

    […] Sandbox. If you aren’t familiar with xhtml/css, the best theme, in my opinion, is Cutline or Copyblogger by Chris Pearson. These are some great themes, well structured, easy to learn from and easy to […]

  • #149 CopyBlogger » Freeminders → 10.23.07 at 1:23 pm

    […] | Download Bookmark […]

  • #150 Jason → 10.31.07 at 7:59 pm

    Hi,

    How do you replace the blog title text with an image (in the blog header), and still retain the link to the homepage?

    Thanks for releasing the theme.

  • #151