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.
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.
As 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!
Bookmark and Promote!
Related Articles
Copyblogger runs on the Thesis Theme for WordPress
Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.
With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like Copyblogger, but also to enable the site to run far more efficiently than it ever has before.
{ 91 trackbacks }
{ 120 comments… read them below or add one }
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!
Wow, nice theme! Thanks a lot, much appreciated!
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!
Missing an “s” in that last “Download the Copybloger theme”
A valuable contribution to the WordPress theme pool. I can’t wait to see a three-column version.
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!
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
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!
What can I say about your generous contribution. Outstanding to say the least.
Good Man! I will do justice to this theme
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!
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
Do a little customizing and you’ll be sold
Thanks!
What an attractive theme! I so enjoy the various themes developed for Web 2.0 of late. Give me “widget ready” any day too.
Matt — Yep, it’s widget-ready!
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!
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!
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
Uh-oh ! I feel a new Theme acomin’ to my blog !
A very nice contribution, Chris. Thanks to both you and Brian.
what is the code for having an Edit link on your posts when logged in as a blog owner?
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!
Brad — You can easily flip the two columns by adding a single definition to your
custom.cssfile:.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.cssfile by adding the following definition:.custom #content { padding: 0 0 0 5.9em; }That should do it!
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.
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:
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.
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?
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.
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…
Chris P. has done it again! The man’s a machine.
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
imgtag).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!
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
Wow - this theme is simple and it rocks anyway! http://www.uncleboob.de will use this one immediately
brilliant! thanks
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
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?
Chris, this theme is very cool! Thanks very much.
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.
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.phpfile 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.
Nice theme! looking forward to 3 column version.
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
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
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
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
Dan and Jennifer — You’ve done everything correctly, but you still need to make a small change to the
ie7.cssfile to get the theme to display properly in both IE6 and IE7.Currently, your
ie7.cssfile 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!
Bruce — I certainly appreciate that, but I am not available for hire.
Wow, nice theme!
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
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
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
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
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
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
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
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
Glad to hear that it worked well Dan. I second your appreciation of Chris: superb theme!
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
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.
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
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.
Nice. Anyway to make this available, or would that violate your terms Chris?
I second Bruce. A nice look that would be even better if released.
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
Azzam,
How did you add the second sidebar?
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.”
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.
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.