The only thing better than a great WordPress theme is actually knowing how to max out the numerous features and styling benefits that it offers. In lieu of that earth-shattering revelation, I’d like to take you on a guided tour so you’ll be equipped with the knowledge you need to make the most of the Copyblogger Theme for WordPress.
First, a Word on the Layout
The layout you see today is not the original Copyblogger design—it’s one that’s been “digitally remastered” to achieve a quality standard that I feel is unsurpassed in the world of open-source theme development. I used relative (or em-based) sizing on nearly every element of the theme, making it an infinitely scalable layout that can accommodate visually-impaired users with ease. If you’re using FireFox, resize the text with ctrl + + to see how this works.
Also, I took extreme care to develop the theme so that it adheres quite strictly to a typographic grid. Click on the thumbnail above to get an idea what I mean, or read about setting type on the Web if you’re into that sort of thing.
Widget Support
With the news that WordPress 2.2 comes pre-packaged with the sidebar widget plugin, widgets have officially become a crucial part of the WordPress fabric. As a result, the Copyblogger Theme for WordPress supports widgets, but with one notable exception.
For some reason, the WordPress developers broke the XHTML markup convention on the search widget, and in addition, their solution is not as flexible as I would like. Because of this, I felt it was necessary to build a custom search widget that lay outside of the normal widget framework. As a result, I highly recommend that you do not use the search widget, and instead just let my built-in search function rock your sidebar.
Special Post Styling Elements
The Copyblogger Theme for WordPress features elegant treatments for traditional in-post styling elements like:
- Unordered lists:
<ul>→<li>, like the one you’re reading now - Ordered lists:
<ol>→<li> - Definition lists:
<dl>→<dt>→<dd> - Sub-headlines:
<h3> - Blockquotes:
<blockquote>- Pullquotes (more on this in a sec)
- Code:
<code>
While most of the above elements are pretty standard, one – the pullquote – requires further explanation in order to be used effectively.
Pullquotes
I’m sure you’ve heard of blockquotes, the pragmatic cousins of the more artsy, more eccentric pullquotes. In case you need a refresher, here’s what a standard blockquote looks like:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra velit vel purus. Nunc tempor, urna sit amet euismod elementum, erat tellus auctor erat, non condimentum dui wisi non orci. Nam fringilla leo sed dui. Vestibulum ac elit sit amet diam vehicula scelerisque.
All you have to do to achieve a result like the one above is wrap your quoted text inside <blockquote> tags, and the Copyblogger Theme for WordPress will tidy it up for you.
It’s kinda like a block quote, with a twist.
Pullquotes, however, are not quite as simple because there is no pre-defined XHTML tag for a pullquote. What I’ve done, then, is prepare two classes – “left” and “right” – that you can apply to any regular blockquote to transform it into a bit of publishing goodness like you see here.
For a pullquote aligned to the right (like the one above), your encompassing blockquote declaration should be <blockquote class="right">. For a pullquote aligned to the left, you’d simply write <blockquote class="left">.
I’d like to point out that certain feed readers may not be able to interpret pullquotes effectively, and this could result in repeated text or strange punctuation, both of which could confuse your readers. For what it’s worth, Bloglines does a nice job of floating the quotes to the left or to the right, and although they’re not styled, per-se, it’s evident that the pullquotes are not part of the body text of the associated paragraph.
Using These Styles
With each new release of WordPress, the visual text editor (which is your default posting interface) becomes more and more useful in terms of how it utilizes the styles and text treatments that I’ve introduced to you here. In spite of that, you cannot make use of all of these elements from the visual editor’s interface. Specifically, you won’t be able to create the following:
- Definition lists
- Sub-headlines
- Pullquotes
Fortunately, WordPress 2.1+ comes with a handy little tab switcher that allows you to jump between visual and code editing modes. Whenever you want to include one of the special elements from the list above, simply switch over to the code view, apply the appropriate tags to your text (remember to close them!), and then switch back to visual mode to write just as you normally would.
308 comments ↓
Chris, I’ve been admiring Copyblogger and your blog for a long time. This ‘theme’ is GREAT! I’m so glad to see it. Can I hire you to build my blog? Your site states ‘no new clients’ … but hoping you’ll make an exception or at least put me on your waiting list. Thank you!
/s/ Lynn Roberts, 800.583.5310, lynn@lawyerlynn.com.
PS, I’m fun to work with, and have great ideas for making money, but I haven’t found a blog/designer I like until you. I don’t want to settle for less. Please call!
You know, I wish I’d thought of that “waiting list” thing to put in the comments section. (Props to you Linda! That’s a smart idea!!)
How about…got any protegeee-eee-ees roaming around looking for work? Desperate starving code-artists that you know from the WP shelter? Anything? I’m terribly un-fun and a bore to talk to. I may even pick my nose…it’s a total crapshoot.
Back to the point. Copyblogger is great, your remastering is fantastic. Thanks for doing what you do. You are appreciated.
I, too, have been admiring Copyblogger — in fact, that’s why I switched over from my prior theme to Cutline 1.1. It was the closest I could get, and I tweaked the font colors and sidebar borders to shift the reader emphasis back to the blog, like CB does.
2 questions:
1) CB does work with WP 2.2, yes?
2) Is there an option, via custom.css or the organic add-on, to easily insert a picture at the top of the header?
Sorry, another question just occurred:
3) Will CB accomoadate a long main title — does it just wrap it around, and enlarge the “box” of black that it sits in, pushing everything downward but maintaining the navigations links, etc?
With all due respect,
to alter font size in Firefox
it is CTRL + and CTRL -
Not ALT + and ALT -
Nice to see this released. I really like it. Will be fun to use.
Can you offer any suggestions to me to get my tagline to show up below the weblog title? (It appears like its in the header.php file but doesn’t seem to work.)
Thanks, and kudos for such a nice design!
Lynn — I am certainly flattered by your interest, but I’m afraid it’s true—I’m not available for hire.
Peter — Hopefully these answers will clear things up for ya…
Les — Thanks for clearing that up. I’m a Mac user, so that was pretty much a guess
Mark — If you want your tagline to appear, you’ll need to add the following definition to your
custom.cssfile:.custom #logo h1, .custom #logo #tagline { display: block; }I love the design !! I’ve made it permanent for my site. But, Chris, I would like to suggest to add a feature you use on your site.
I mean those small “snipped-thingys” on the left showing the corresponding categories of a post. I love it. Can you include it in the next version ?
Congrats on one of the best free designs for Wordpress !!
First off, thanks so much for sharing, what an awesome design! I’ve got one small problem though.
I’ve downloaded the copyblogger theme and tried using it(the same as any other theme), however I can’t seem to get it to work. It looks like the ‘frame’ is working but not the CSS(maybe?). I’m no programmer, any help would be greatly appreciated! Thanks in advance, you rock.
Sreejith — I have no idea what you’re talking about. Is there an example that you could point me towards so that I can better understand what you mean? Thanks!
Aaron — It looks like the entire theme may not have loaded properly. Delete it from your server and then try uploading again. Also, check to make sure the
style.cssfile appears in the Copyblogger theme folder, because right now your server is saying that the file cannot be found.Chris,
Thanks for replying! I’ve downloaded and uploaded it again, with the same result. I’ve checked in the theme editor and these css files appear in this order:
ie6.css
Stylesheet(style.css)
ie7.css
custom.css(this one is empty, no text)
I’m not sure what i’m missing. Any ideas? Thanks again.
Chris, thanks so much for putting this theme together. It is so clean and the comments are a huge help.
[...] In our first example scenario, we want to align an image to the left, and we’d also like to have our paragraph text wrap around the image so as to maintain a clean, uninterrupted flow. You’ll start by inserting an image into your post just as you normally would, but in order to apply the proper CSS class, you’ll need to switch over to code view by clicking on the “Code” tab. A quick explanation of that process along with a visual can be found here. [...]
Aaron — It looks like there is a directory permissions issue that is preventing the server from reading the CSS file. Using an FTP client, navigate to the Copyblogger theme directory and change its permissions to 777. If that doesn’t work, you may have to make the entire
wp-contentfolder 777. Good luck!Ryan — Glad I could help. Be sure to take a look at the new image styling tutorial—I think you’ll be able to put it to good use!
Happy birthday Chris!! Thank you for the theme.
Still learning, tweaking, importing and stuff like that on my testsite and if I don’t get it I wil put the question here, but for today, have a ball
Thanks Chris!! Works like a charm now!!
Well, I lied just a little:). Everything works, except when making new pages. New pages created don’t appear on the site. The pages ‘archive’ and ‘about’ give me an error when I click on them and I can’t delete them because they don’t appear on the control panel side of wordpress. Hmm?
If it’s really your B-Day, then happy birthday! Thanks for all the help.
Ben — Thank you very much!
Aaron — You need to change your WordPress permalink structure. Have a look at this video.
The theme is great — and I LOVE the organic style version. Thanks for sharing it.
Chris, I added the tagline as outlined above, but just noticed that the style seems to be different between my index page and all other pages. I may have done this myself and not even realized it, but I haven’t edited the style.css…any ideas? Thanks.
Well…I’ve now got a new permalink structure(cool tubetorial btw), but still no dice on the editing/adding/viewing of the pages. Don’t know what the deal is. Maybe the .htaccess file(wp didn’t give me code to create one)? I hate to be ‘that’ guy, but I can’t seem to figure it out. Thanks again!!
I think the clipped thingies the commenter above is referring to are those little signs that stick out at an angle to your posts on the first page. Can I do that?
Ryan — Good catch there. The default version of the theme comes with the tagline turned off, and admittedly, I didn’t test it at all. Either way, you can fix the problem by adding a new definition to
custom.css:.custom #logo #tagline { letter-spacing: -1px; }Aaron — I did not include those post editing buttons in the code of the theme. I think there’s enough room beneath the posts to accommodate them, so I guess I’m out of excuses for not including them
I’ll see if I can cook them up for the next release.
Donna B. — That’s what makes my design custom
Thanks Chris. That fixed it.
“You may not access this page without a valid key.”
Is the message I get when I want to manage my subscrition (made a typo in my e-mail adress.
Ben — I just did some light testing and research, and it appears that the Subscribe to Comments function is not yet fully-compatible with WordPress 2.2. Mark, the plugin’s creator, is a great guy, though, so I’m sure he’ll release an update soon.
Keeping up with changes and new releases is oftentimes the hardest (and worst) part about being a theme or plugin developer, so I feel his pain.
I’m a very WordPress newbey so could you please tell me which widgets you used for the Calender and the Recent Comments?
Google Reader does a nice job on the blockquotes as well. It shows separated indented lines.
Hi . . . I really like your new theme, it’s brilliant.
I have a suggestion though ; How about a CopperBlogger version with multiple [ 3 ] columns in the footer ? I would really love that.
Anyways, thanks for your effort.
I love the theme and your work!
On pictures in the header:
I’m using your Random Image Tutorial to make this work at livetardy.com. I am confident that I’ve set it up wrong, but for a site with no content: it seems to work. Should I make improvements on this setup?
Added this code to the Custom Style Sheet:
#nav a img {width: 100%; border: 1px solid #000000; }Removed the extra padding below the header in the original CSS file
Added the following to the header file…
<a href="http://www.livetardy.com/blog" rel="nofollow">.jpg" width="100%" alt=”Live Tardy Home” /></a>after this section of code…?php include (TEMPLATEPATH . '/nav_menu.php'); ?>Ben — The calendar and recent comments widgets are, to the best of my knowledge, default widgets that come with the WordPress Widgets Plugin. For WP versions 2.2 and higher, the wigets plugin actually comes pre-installed with the very widgets you mentioned (among others).
Kirk T — Your setup could certainly be improved upon, but the bottom line is that it flat out works. I say go with it
I’ve tried installing CoppyBlogger Organic Theme into WP 2.1.3 but an error shows up. When I go into the Presentation tab, I’m told that I need a stylesheet and template. I renamed custom.css to style.css and that cleared up the stylesheet problem but I’m still told that I need a template. What next? Thanks for your help.
Hi Chris,
Could you show us how to flip that column over to the left?
Chris,
It looks like the archives button is still not functioning correctly, even on this site. Any news on getting that working correctly?
Narcolept — I just haven’t set up the Archives page on this site yet, which was an oversight on my part. Follow these steps to make it happen.
Matt L — Follow these steps to move your sidebar to the left.
Jan — Delete the Copyblogger theme from your
themesfolder and then reinstall it. Next, drop the contents of the Organic style package into the Copyblogger theme folder, and you should be good to go. Never rename your stylesheets, as that will mess up the theme entirely.If I confused you at any point on this issue, please show me where you were led astray, as I would like to fix that as quickly as possible.
Chris,
I need to use my logo instead of the standard text that you provide in the header of Copyblogger. I have studied your instructions to make this change in your old Cutline theme, but I’m still not sure how to do it in Copyblooger. I have my logo sitting in the Copyblogger images file. I would appreciate any help you could provide. Thanks, and thanks for a nice clean theme.
Regards, Steve
Great theme, love the 3 column layout. Has anyone thought of creating a website template to match?
I could use one of these but my html is not really up to it!
Well done on a great theme.
I too would prefer to add a logo image above or below the name of my blog.
But I hate to edit your code because, possibly, one day it will cause me grief after updating to a new version of WP or Copyblogger.
A plugin would be ideal for non-coders like myself.
Really helpful. I plan on using this theme and I am in the middle of customizing the layout.
I am having some trouble adding my own personal header though. A little help about where to add my code would be helpful.
Chris, i am having problems with copyblogger and pressrow displaying my blogroll. The Widget just has an empty Links widget, no customization is possible.
Please help
Copying my comment from the other site:
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)?
Thanks in advance!
Great theme!
One question: the post slug fails to turn my post urls from /p=# into something more google friendly.
Any way to change that (plugin, code change, etc)?
Thanks so much!
Anyone successfully make this wider? I post code samples occasionally and the wider I can get the content area the better. So far my attempts at hacking up custom.css have been unsuccessful.
Hi Chris,
I’ve been using the Organic Copyblogger theme for my blog and I’m loving it. However, I u pgraded to 2.2 and can’t get my sidebard widgets to appear. I get this message:
Fatal error: Cannot use string offset as an array in /home/walterbu/public_html/wordpress/wp-includes/widgets.php on line 495.
Any suggestions?
Rick — Unfortunately, creating a ride-along plugin to modify the header would require a complete remodeling of the code in
header.php, so that really isn’t an option.Trey — If you want to customize your header, you’ll want to make your HTML changes inside
header.php.Gideon — Getting the “Share This” plugin to play nicely requires brief editing of the “Share This” stylesheet, which is located inside that plugin’s folder. Check out this comment for specifics.
Also, regarding the pages in your navigation menu, you’ll probably need to make the font size smaller in order to accommodate more items.
Tyler — You actually have to change your WordPress permalink structure in order to make that happen (it’s not theme-dependent, it’s WordPress-dependent). Check out this video to see how it’s done.
Jim — Making the content area wider has some pretty significant ramifications on the stylesheet code and also on the graphics used in the theme (namely, the comment bubbles). It’s too intensive for me to go into here, and I’m afraid this is one topic I’ll have to leave up to the independent developers out there who have a reasonable knowledge of CSS. The theme can definitely be made wider, but it would take me forever to explain it adequately.
Walter — That’s an issue with your new WordPress installation and not with the theme. I recommend that you back up your database, and then try to reinstall WordPress 2.2. Make sure that when you reinstall, you overwrite the existing
wp-includesdirectory.Chris, I did as instructed for the Share This plugin and yet there is an overlap between the text and the icon and the entries in the popup dialog box are still blank. Any input? I edited the akst.css file.
Gideon — I need a URL from you so I can properly diagnose the problem.
I was just coming back to post that…
the URL is http://test.apublicdefender.com
Chris,
I’m running into problems adding a page to nav_menu.php. I’ve added the page (Links) in WP using the default template, added the page slug (links) and added the line to nav_menu.php thusly …
href=”/links/”>links
Permalinks are set and work for test postings. However, when clicking on ‘links’ in the header nav I get …
Warning: require_once(../lib-common.php) [function.require-once]: failed to open stream: No such file or directory in /var/www/html/links/index.php on line 57
Fatal error: require_once() [function.require]: Failed opening required ‘../lib-common.php’ (include_path=’.:/usr/lib/php/:/usr/share/pear/’) in /var/www/html/links/index.php on line 57
I’ve moved my WP installation so that the WP URL is “http://www.example.com/wordpress” and the blog URL is “http://www.example.com”. I’m running on my own Apache server.
Have I missed something obvious? Any help appreciated.
Chris, my sidebar works now!
I love this theme.
Lawton
I use firefox and I must set the minimum size of font to 12 or the font on some website will be too small like google. But in that way, the font of this theme looks too big, how to fix it?
Hi Chris,
The search function doesn’t seem to be working on my site. Only a blank screen comes up. I wonder if anyone else has experienced this.
Paul — I’d definitely like to actually see the site that you’re talking about in order to determine what’s really going on… From the looks of things, though, I’d guess that the location of your WordPress directory is the problem. I would highly recommend placing WordPress in your root directory (
http://www.example.com) and trying everything with that structure.Limon — I’m not 100% sure what you’re talking about, but if you’ve increased the default browser font size, then it’s likely that you’re viewing this theme with a font size that is 2px larger than it’s supposed to be.
All of my sizing is em-based, and the universal browser default is 16px. For all browsers set up this way, the body text on the Copyblogger Theme renders at 13px. I think you’ve changed your universal default to the equivalent of 18px, and thus your Copyblogger Theme body copy is showing up at 15px, which makes Verdana look pretty chunky and ugly.
Set your browser text back to the default size and see if that doesn’t solve your problem. You can compare the size results to this image to see if you’re looking at the theme the way it was meant to be seen.
Maricar — Very strange indeed. I really have no idea what’s going on there, so I’d simply recommend re-installing the
search.phpfile from the Copyblogger Theme.Very strange - when I go to a single post page the sidebar jumps underneath the posts. Example, the red line is outlining div.posts single, where it seems the sidebar is included. Adding another end div in single.php solves the problem, but I’m not sure if this is the right thing to do.
I have added any divs above this, could this be a problem in WP that adds a div somewhere on the single page?
kristarella — Either you’ve added a
divinside your post that is not closed off properly, or else you’ve put something in the body of your post that is greater than 468px wide (or less than that if you’ve added a frame to an image).Yah, thanks. After some more eager scouring I think I’ve found that it might be a plugin I’m using that isn’t closing off properly.
Thanks for your brilliant coding on this, it’s really lovely to work with!
Hi Chris,
I notice that when I used the tagline code you list above it uses the white text color for two of the three pages I’m testing, but on the home page it seems to pick up the red color from the header border. I’m checking out the custom.css to see if I can fix this, but no luck yet. Any ideas? Thanks!
Mark Smallwood
I can’t get the previous posts link to work on the index or archives pages. The tags just seem to generate
Any ideas on why this is happening would be greatly appreciated.
Sorry, the code tags didn’t happen… perhaps easier to just visit my site and see that the navigation links aren’t there, just some paragraph marks.
Hi Chris,
I figured out that to get the Home page tagline to appear white instead of #a90000, I added a color: #fff to the end of this line in style.css:
#logo h1, #logo #tagline { display: none; font: normal 1.8em “Helvetica Neue”, Helvetica, Arial, sans-serif; }
It now reads:
#logo h1, #logo #tagline { display: none; font: normal 1.8em “Helvetica Neue”, Helvetica, Arial, sans-serif; color: #fff }
That works, although the font on the Home page tagline looks like it’s a different size than on the other pages. I will try to figure that out.
Mark
Oops. Just needed to add the letter-spacing to
.custom #logo h1, .custom #logo #tagline { display: block; letter-spacing: -1px; }
That did the trick!
Chris, thanks so much for the incredible theme.
Chris:
Spent the last four days trying to learn this WP blog thing for my sites. What a learning curve.
First I found your Cutline and really like it, then I found CopyBlogger and really love how clean it is.
I’m sure it’s really simple and probably a stupid question, but I haven’t been able to figure out how to put my ads in the sidebar.
Can you point me in the right direction?
Roy,
One of the easiest ways to do this if you’re using something like Amazon ads, is to paste the code you get from Amazon into a Text widget and drag that up to the sidebar. You can do this in the WP admin console. Go to Presentation > Widgets. You can create multiple Text widgets and put the iframe elements in them (or multiple iframes in each widget, I believe._ May not be the most elegant way to do it, but it seems to work for me.
Mark:
I have a number of self designed banner ads selling my own stuff or affiliates products, jpeg’s and gifs mostly.
My difficulty is in knowing where to place the code.
I messed with the sidebar.php and managed to get an ad to post, but when I went to the widget manager, I lost everything and can’t figure out where the code is.
I appreciate the help.
Roy
When you activate the widgets, you blow out the hard code for the sidebar (s).
What I do is activate the widgets, place the code in a text widget, and rock and roll. It is much easier coding the site this way for a novice.
Down at the bottom of the widget page you can add up to 9 text boxs to work with so you can use this technique multiple times.
Best of luck…
Also, if you are using the 3 column version, you can change the width of the left column in the custom.css file. Just change”
.custom #container { width: 101.8em; margin: 0 auto; }
.custom #content_box { float: right; }
.custom #left { width: 25em; float: left; }
I added 5 to the custom container and custom left and it gave a bit more room in the theme if you are looking to gain space for advertising or images.
Chris, thanks for the advice. The problem was that I already had a directory called ‘links’ in the doc_root of my web server. I removed that and all is good.
[...] How to Use the Copyblogger Theme Like a Pro ? Copyblogger Theme - [...]
Many thanks for the theme, Chris. It’s helped out this WP newby a lot.
How do I add a graphic to the header? What size does the graphic need to be?
Thanks!
kristarella — If you have implemented a "showposts=x" declaration on your
index.php,archive.php, orsearch.phppages, then this is likely why you aren’t seeing any navigation links.If, in fact, you’re controlling the number of posts through the WordPress dashboard options, then I’m not really sure what the culprit is here. I remember having a similar issue like this last year, though, and it was because I used the
showpostsattribute in my WordPress loop.Mark — The tagline is a disaster. It seriously interrupts the mojo in the header, and I didn’t do any hard core testing to ensure that it would display properly. As Murphy’s Law would have it, the tagline is all messed up, and I’m sorry you’re fighting my poor code there.
You’ve done the right things to fix the display across the different types of pages, though, so nicely done there!
Roy — Tom has given you sound advice about including ads in your sidebar. If you’re using widgets, then you’ll have to place the ad code inside a “text box” widget. If you’re not using widgets, then you’ll have to mimic the sidebar markup code in order to have your ads display properly.
Jayne — Adding a graphic to the header requires a bit of proficiency with CSS and HTML. That said, you can add an
imgdeclaration to the header by editing theheader.phpfile that comes with the Copyblogger Theme.I’d recommend placing the image after the tagline declaration inside the
divwithid="logo". Your image should be no more than 728 pixels wide.Hmm, thanks for you reply. I’m not using showposts, I’m just using the index.php and everything as is from the copyblogger theme. Bummer…
Sorry to ask an old question…
But, I am having problems with the archive link as well (I just get the 404 page). Chris’s link to “the steps” has nothing relevant in it.
So, anyone help a guy out?
PS. I have my permalink set correctly.
Heh…as always happens when I post a question: I figure it out shortly afterwards.
Sooooo….ingore that post above
Shane,
I am having the same issue with the all the links on the top nav bar. Would you please share the solution you discovered? Thanks.
Jayne
Chris,
Thanks for the suggestion on the header graphic I will see if I can get that to work for me tomorrow. Have a great 4th Holiday.
Jayne
How do I get the page nav to work? I get a “HTTP Error 404 - File or directory not found.” when I click on archive and about.
Jayne and Larry,
You need to have the about and archive pages set up for the links to work. This article in the codex might help. If you don’t have the pretty permalinks enabled then the address to your about page will be /?page_id=2/ (if it’s on the original page) rather than /about.
Jayne and Larry.
I’m new, so I’ll explain as best as I can (I haven’t had a full coffee yet either, so…
)
Firstly, make sure you have your permalink structure set correctly as Chris mentioned above. He provided a great link to a video tutorial:
http://www.tubetorial.com/blog-permalinks-word/
Secondly, You’ll need to add the archive page within Wordpress’ admin section: Select the archives template when adding the page and “archives” as the “post Slug”.
I found the answers by googling and looking at Chris’s comments here and his Cutline theme…others had the same questions (I don’t say this to tell you to “google”, only to say that I’m sorry i can’t be more clear
).
Hope all that makes sense…
I Managed to find the links that allowed me to “clue in”
This one
and
This one
They should give you an idea what you need to do
Thanks for your help ShaneR. My version of Wordpress (2.2.1) doesn’t give me the .htaccess code and doesn’t even tell me to to change it like in the video. I’m searching the Internet now but there is no clear answer.
I might just stick with Blogger because this is way more trouble than it worth.
Well I think I’ve read everything available on the internet on the permalink and .htaccess issue and have come up empty. I’m running Wordpress on a Windows server and the frontpage extensions are not installed but is seems that Wordpress will not generate a .htaccess file and even when I upload an empty .htaccess file to the server it doesn’t see it.
Using the Custom structure: /%postname%/ does not generate the error and thus doesn’t give me the code necessary to place in my .htaccess file.
Has anyone encountered this problem and is there some magic fix to it that I’m not aware of?
Shane, thanks for the tip on the permalinks.
I have tried to get a header image to show up per Chris’s instructions and by searching the WP Codex for clues … alas I’m still clueless. Can anyone suggest what bit of code in the header file might make my image show up? I have loaded my image in the size Chris suggested to the image directory. Thanks.
Thanks ShaneR but permalinks will not work on my Windows server so I will have to use Solution #2 and change my header file and see if that works.
There is a good article about making permalinks work on a Windows server and I guess it has worked for some people but not for me
The header file for Solution #2 on the page doesn’t look anything like what I have. This is my first experience with PHP and Wordpress so I don’t have a clue. I put in a trouble ticket to my hosting service to see if they can help but I’m not confident. I’m a VB.NET developer so I’m not completely clueless but this is something I just don’t want to take time figuring out. Right now I don’t see PHP in my future as a programmer. If my hosting service has the answer I may mess around with this some more and move to Wordpress if not I’ll stay on Blogger. I’ve spend enough time on this already but thanks for your help.
kristarella — Change the number of posts that get displayed on the front page from 3 to 10, and see if that makes any difference at all with the navigation links.
Larry — I just installed WordPress 2.2.1 for a friend, and I did not have to edit my
.htaccessfile in order to get the nice permalinks working. It looks as though this is a new and welcome feature of WordPress 2.2+, so you should be good on that front.Send me a link to your test site, and I may be able to better determine what’s going on.
Larry — The Windows server is definitely the problem. You should check out an affordable Linux host for running your blogs. You simply can’t beat WordPress from a value/extensibility standpoint, and I think you’ll find that in the long run, it’s definitely the right move to make.
Jayne — If you want your image to appear, then you need to insert an
imgtag in your header that points to the image you want to display.You need to upload the image to your server so that you can point to it, and this is accomplished via FTP.
Jayne — I just re-read your comment from earlier, and I think you’re doing just about everything right…
Send me a link to your test site, and I should be able to tell you exactly what to do.
Thanks Chris, I have tried everything that I can find on the net about this subject and nothing works. I really don’t want the added expense of another host and have 4 domains hosted with that service now. My test site is http://flyballblog.i-flyball.com/ .
Thanks for the help, Chris. The test site url is http://www.webbizdiva.com/blog.
Sorry Chris, number of posts doesn’t seem to make a difference.
Jayne, I think you still need to put the img tags in the header properly. http://www.w3schools.com/html/html_images.asp
Kristarella,
Thank you for the link to HTML code. I figured out a bit to get the image there and not the name. I’m almost there. I can see that an image will be displayed but it’s not displaying it correctly. I’ve uploaded the image but maybe not pointing to it correctly.
Chris, is there a way to turn Permalinks off so that I can make your theme work on my server? I can see the advantages of using them but it does look like it’s possible with my current hosting service.
Disregard my last post. I was able to change the nav_menu.php to make it work without Permalinks.
Thanks for this lovely themes you done. Just ask, how can I made and ads block like I see at copyblogger blog and how can I change my sidebar colour using the custom.css. i couldn’t find it.
I managed to get the header image to work by using the Cutline header image code as an example. I am still trying to figure out how to get it centered.
I am also interested in playing with sidebar color.
hi,
i’ve just unzipped the copyblogger theme and organic. in the ‘read me’ for organic it says:
“Oh, and you may have noticed the included Photoshop file with the .psd extension”
i don’t see this anywhere. please help if you can.
cheers,
nathalie
Hi Nathalie,
I just downloaded the organic package and the psd file is definitely there. It’s “copyblogger_theme.psd” and it’s in the “organic” folder. If it doesn’t appear, you might have a corrupted download. I’d suggest downloading it again.
thanks mark…that’s embarrassing, it was right in front of my face! one question though; when i opened it with photoshop cs2 it was only a graphic of the comment bubble. how do i change the colors of the theme?
cheers,
nathalie
Hi, Nathalie.
I’m assuming you mean the colours for the background, text, and header etc?
Changing the colours for these involves editing the custom.css file Chris has included with the theme.
Prior to mucking around and blowing the theme clean apart:
I would like to decrease the size of the font for the post headlines somewhat. I believe that’s done in the style.css file, but I’m unsure (although I have a good idea) which line of code I should be looking at.
Thanks!
ShaneR — You can adjust the size of the post titles across the various pages of your site with one simple CSS tweak:
.custom h1, .custom h2 { font-size: x; }where x is a value less than 2.8em, which is the default font size for headlines (equal to 28px in this case).
Jayne — Move the
imgdeclaration inside thediv id="logo", and then be sure to turn the visibility of thelogo divback on. Placing theimgtag inside thelogo divwill center it.Thanks, Chris.
That was crazy simple.
Methinks I need to spend some time studyin’
Chris, I’ve done the same thing with my logo and I can’t get my logo to center. Could there be something else in the css stopping it?
I finally got it. I had changed something in the style sheet which caused the problem.
Jayne
I cheated and showed what a fan I am of Chris’s work.
I did a little tweaking and took the images from Cutline and incorporated them into my copyblogger 3 column.
The main reason I did this is because the readers loved the cutline theme but I wanted the flexibility of Copyblogger.
Check it out at http://www.therealestatebloggers.com to see and I will check back if you have any questions.
Well done Jayne! From the way you were talking I thought you were going to butcher it. It’s still nice and clean though
Tom
I like what you did! I just took the header code and added my own graphic (same one on every page). It seems to work.
The centering problem I solved in perhaps an unorthodox way but it seems to work too. I stated in the header image code that it was a 1000 px and it filled up the space. I don’t know if it will work across the board yet but it looks good on IE6.
I’m still building my blog but if you want to look at it so far the url is http//:webbizdiva.com
Kristarella-
I thought I might butcher it too! But I always leave bread crumbs so I can get back to where I was when I try out some tweak. Thanks for the compliment.
Nathalie - The line you’ll need to change if you want to change the background color is in the custom.css file.
body.custom { background: #FFF; color: #222; font-family: Verdana, sans-serif; }
Change the #fff to #fffff0 (that’s a zero) to see what happens. You can use a color picker to find a color you like. This one isn’t the greatest, but it works ok:
http://www.colorschemer.com/online.html
or just pick one from Photoshop or Gimp, or whatever design program you’re using. When Chris says that you’ll need to update the .psd file and the .gif files, it’s because other page elements are already set to a particular color. If you don’t change them to match or complement your new color, it could look pretty ugly.
As ShaneR points out, you can change the header color and other element colors in the custom.css file also.
cheers! i’ve just gotten the 3 column version to work so now i am playing with the look…and learning the code at the same time. it’s gonna be a long night.
all of your help has been great.
I want to add a background image to the top right side…like the post-it note on copyblogger. Can anyone tell me the, i’m sure, lengthy process?
Hi Chris,
I love this WP theme and want to use it for my new site. I finally got GoDaddy to make WP work but copyblogger doesn’t come up as one of the selections for a theme, just the default and classic. I have uploaded it to the site by putting the copyblogger folder that I downloaded from your site into the wp-content/themes folder. So it is wp-content/themes/copyblogger.
Any ideas on how I can get it to come up as a selection so I can start using it?
Thanks a bunch!
Hi Lisa,
Check out Chris’s comment #16 above to Aaron about permissions. You may need to change the permissions on your content folder. You’ll do this using your FTP client, typically.
Mark
Hi Mark,
Thanks for that. I tried both - changing permissions for both copyblogger and wp-content to 777 and it still doesn’t show up in options for themes.
Hmm…
Hi Lisa,
Well, that’s annoying, isn’t it!? Let me make sure that everything is where I think it is. So, your path should be \\wp-content\themes\copyblogger where is typically your site’s name.
If you’re on a multi-domain server setup it might look like:
\lisamain\public_html\lisablog\wp-content\themes\copyblogger
or it could just be
\lisablog\wp-content\themes\copyblogger
Is that right so far?
Oops, I forgot to escape my brackets. Should read:
So, your path should be \root\wp-content\themes\copyblogger where root is typically your site’s name.
Hi Mark,
Yes, that is correct.
\root\wp-content\themes\copyblogger
the ones that show up are
\root\wp-content\themes\default
\root\wp-content\themes\classic
I am on GoDaddy and use Dreamweaver. I copied the copyblogger folder to my local file and then used Dreamweaver to upload to my site. http://www.365parentingtips.com.
I set the permissions for copyblogger to 777 and then for the entire wp-content folder - they were 755 and I changed to 777.
Still not showing up as an option in my presentation menu on the admin panel.
Thanks for your help.
Lisa
I just found something funky. I have a wordpress folder on my server what has wp-content in it without copyblogger and wp-admin that has the wp-content in it with copyblogger.
I think I can figure this out now.
I’ll let you know.
Ah, ok. Try deleting the one without the copyblogger folder in it, or at least renaming the original WP folder.
That worked. Thanks.
Great! Way to go.
Hi Chris ive just had a good go at adding a header and footer.
I think its ok but for the life of me I cant seem to get rid the title/description of the site off header.php (you will see why) I have placed the graphic as background in the custom.php - #header code - ive tried different ways but I am struggling to work out where to put using php etc
Just figured it out so no need to reply—I just commented out the appropriate line in
header.php.Hi Chris,
Sorry to bug you about this, because it’s probably very simple. I can’t seem to get my permalink structure to come out exactly the way it’s described in the tubetorial.
When I do all the steps, I end up with
http://eversmall.com/index.php/get-help-when-you-need-it/
As you can see, I get the index.php in the path, which isn’t what I want.
I’m also willing to bet that I’m just completely and utterly clueless at this point. I’m sure it’s pilot error, but if you get a chance maybe you could point out the error of my ways.
Many thanks,
Mark
I’m just getting set up on Google Adwords. Does anyone know how to/where to put the tracking code in this (or any other) WP theme? I’m know how to do it in my FrontPage sites but not sure for my blogs.
I figured out the Google Analytics- it’s a plugin.
Does anyone else but me see a formating problem with the comments on this post. I have not been able to seem my last two comments and the text box is misshapen. It appears like there is some funky code in the comments somehow.
Is it possible to leave the background color of the side bar different from the post colum? I would like this two colum to appear differents, like one is withe and other is black…
I must be a total newbe in that I cant seem to get my site to look much at all like yours!
Your copyblogger theme is GREAT and I would really like for my site to have a very similar look but I just cant figure out how to make it happen.
So, what do I need to do to get my site to have the same look and feel as yours?
Something here is goin wrong, since comment #130 i can’t see others commentary, not even the comment form, in firefox or ie.
On my site (WP 2.2.1), the visited link is coming up in a shade a gray while my active links are showing the regular red (#a90000) color. I’ve been trying to change the visited link to stay the same color as any other active link within a Page or Post.
I don’t have access to an image editor where I am so I can’t just find the code for that shade of gray and do a search in the Stylesheet for that specific color code. What am I missing?!
http://www.lehighvalleymma.com (Very new site!)
What do I need to do to obtain the colored navigation links like the ones that are on the thop right of pearsonfied.com?
What do I need to do to obtain the colored navigation links like the ones that are on the the top right of pearsonfied.com?
I am trying to get the new pages I made to show up on the copyblogger theme at pwkproductions.com.
I think I followed the instructions - my Archive page and About page work, but the new pages I created…Contact us, Distributors, don’t.
Please help.
Why don’t the comments from an author show up in yellow on the comment page anymore? Anyone fill me in? Thanks
Hi, Chris! This is Patricia from Rio de Janeiro, Brazil. I’ve been looking for a new theme for my blog and don’t know exactly how I reached your page. I really appreciate the possibility of costumizing the layout, so that the blog looks a bit more personal. From this, we could say that the Copyblogger theme is the best solution. But… I must confess I preffer the header of the Cutline theme, the one where we can put random images. Is there any possibility of kinda “mixing” both themes? Well, in fact, what I would like the best is to have a space for images on the top, as well as the name of my blog with a small sentence below (just like Cutline) BUT with the rest as Copyblogger and all its features. Is it possible? Could you help me? Thank you a lot!
Chris, thanks for the great theme. My question is; the position of certain elements on the post pages looks a little different than the home page and seeing the shift going from one page to another is a little weird. How can I make sure everything is positioned the same? (Basically the content on the post pages is lower than the content on the homepage)
Thanks,
-onur
I have a customized google search bar which I’m using. How do I disable your custom search field and remove it from my site?
C
Is there a reason my comments-questions are not getting posted?
J
c
maybe I have the computer problem not you. Please forgive above comment.
I cannot seem to get a header image in my blog - can you help. I followed the random image tutorial and to no avail. Where exactly in the header.php file do you insert the code?
Thanks
J
I would like to place the top with navigation closer to the content on the page. Where exactly do I change the code? I think it is possible to place it about 20 px closer and gain room for the articles….
Roger
Roger,
you’ll just need to mess around with the CSS in the custom.css file to see what works.
Mark
Mark,
Thank you for the advice.
I´m working on that know…
Roger
Hey,
Nice theme working to make mine look real custom but i’m having a problem with uploading the image in to the header. Its not stretching across the top of the page and it stops about half way. i put liquid design measurements in the stylesheet.css file and placed the tag below “logo” in header.php. still nothing and if you have a chance i’m working to change the background colors in the sidbars. but the first issue is definitely more important. thanks
Peter, you need to give the header some kind of background. The easiest would be to figure out what the colour is at the very edge of your image and insert
.custom #logo {background:#000000;}into your custom.css with the hex value of the colour. The gradient used for the lighting effect doesn’t resolve at the edge though, so it makes matching the colour difficult - perhaps you could extend the image a bit?thanks for the help i’m gonna get on that right now.
help please,
the image comes up on the home page but not on the rest of the pages, i.e., about page and archives pages. thanks.
It might have something to do with the URL you’ve used for the image. You put in something like
"img/better.jpg"so when you go to a page with the address http://netowls.com/about/ it’s going to think that the image is at http://netowls.com/about/img/better.jpgYou’d be better off giving it a more definite URL such as (gee I hope this code doesn’t go haywire)
"/img/better.jpg"Ok, so the code didn’t go well…
Have a look at your header.php and notice that the links to the stylesheets uses a bloginfo(’template_url’) thing. Copy that link and change the custom.css to /img/better.jpg and use that as your image source (assuming your image is in the template folder in a folder called img).
lol, no way the addition of that forward slash in front of the “img” was the trick. thanks alot kristarella, you were a huge help.
Great Theme… just implemented on my site with a few modifications… your work is very professional and beyond anything out there… keep it up! Thanks
Hi there,
I am trying to make the post field size larger in the admin area - but no matter what I put in the Options>writing page, it won’t change.
Any one have any ideas?
Thanks.
Before I start messing up with the code, I thought I should throw the question out there. Is there an easy way to add a link next to the “comments” link under the posts? You know, something like “add a comment” so for example it looks like:
3 comments | add a comment›
Thanks,
-onur
Hola. A footer question:
How can I modify the footer, so that it includes a link to my sitemap?
I’ve generated the latter using Copyblogger’s easy “create a Page” method, and it looks fine, but I’d like to link to it in the footer.
I would like to use Cutline style (one thick line above heading and one dotted line below) sidebar headings to the sidebar objects instead of CopyBlogger’s double line under the heading. Is it possible?
Thank you very much for your help.
Hi Peter,
you can add an anchor link (a href) to the footer.php file. I added one on my site in the copyright notice that was already there. Your link needs to follow the footer div tag.
Hope this helps.
Onur - in the index.php go to
class="post-meta"and change the bit that says'No Comments', '1 Comment', '% Comments'to'add a comment'(if that doesn’t work properly replace each individual phrase with add a comment). Then add the comment number link that’s described in the wordpress docs.Bill - if you find
#sidebar h2in the style.css it saysborder-bottom: 0.166667em double #ccc;. That’s what is making the double bottom border.I remember reading something by Chris suggesting that it’s better to localise changes to you template to the custom.css as much as you can (so you know where all your changes are, can’t find where I read it). If you find the css from Cutline that creates the heading borders you can put it in the custom.css. I’m not sure exactly what it is, but from looking at the theme, you want something like
.custom #sidebar h2 {border-top:0.5em solid #000; border-bottom:0.2em dotted #000;}. Beware - this is going to make your sidebar different to the post headings and bottoms.Thanks kristarella, that works fine. I guess I was also trying to put the number of comments as just an indicator, and not part of the link. So in the example below, only “add a comment” would be a link.
3 comments | add a comment›
Yep, I understand that - the “comments_number” tag is not a link.
The comments_number tag is exactly what I needed. Thanks a lot.
Thanks kristarella, I will give it a try.
It worked. Thanks kristarella. However even if I change the color of the borders, the color does not change. So, I have started to learn how to write CSS.
Goodo! My favourite resource for CSS reference is at W3C CSS Specs, if you got to the index you can find alphabetically most things you need. Things are often called what you think they would be (e.g. font) so it’s not that hard to find.
Also if you have one CSS style in your style sheet and then another one relating to the same thing later, the second one overrides the first (if they’re about the same thing). That might be why the borders don’t change colour. You might have
#sidebar h2, but later there might be another one just abouth2, which covers all the different h2s. If you want to be sure, put your CSS at the end of custom.css.I have created Drop caps and am able to apply to my first paragraphs using the tag . It works well.
However i have to insert this tag for each article manually. Is there a way to make it automatic by changing something in template files?
Thank you.
Thank you.
I expect the easiest way would be to make it a CSS class and then add the class manually to the start of each paragraph (only slightly easier than adding the style to each paragraph). Here’s a good example.
Or Google for a plugin, your guess is as good as mine for which one is a good plugin.
I notice that comments are not enabled on pages. Is there a way to add them.
I don’t mean posts, I mean pages.
If you want comments on all the pages you can add
<?php comments_template(); ?>into page.php above<?php endwhile; endif; ?>.You can also have comments on selected pages by creating a page template. I’ve called mine page+comments.php and it’s the same as page.php except with the comments_template call (as above) and then at the top it has
<?php/*
Template Name: Page+Comments
*/
?>
To implement it you make a page as normal and in the sidebar on the right it has “Page Template” with a dropdown menu that should include Page+Comments.
Hope that makes sense! I recommend the second option, it might be odd to have comments on all your pages. If you ever had a disclosure policy or something like that it wouldn’t need comments.
kristarella,
Worked perfect thanks.
hi chris,
downloaded copyblooger smart theme.
having a problem, nothing shows where catagories are on sidebar. I have tried everything and can get nothing there, any suggestions
cheers
kevin
Hi Chris, thank you for the theme! I love it. Is there a way to incorporate the code for google analytics? I couldn’t work out how to do it!
Thank you!
Helen,
Just add the code Google gives you into the footer.php file before the ending body tag. Alternatively, you can add it into a text widget, but I prefer to reserve those for other items.
Mark
I would like to move the RSS feed button up to the header (lots of room up their right now).
Can anyone post some code that might make that work.
Thanks.
db - I don’t want to sound narky, so please don’t take it that way. Have you looked up (Google or wherever) how you might be able to do it? It’s just that it takes some time to just “post some code” and it’s hard to tell how much know-how you have to implement it.
Essentially it would involve taking the bit from the sidebar that says
<p id="rss">until</p>and putting in header.php, but you might need more CSS to get it in the right place.kevin - More information! What’s “everything”? Do you have the wigdet sidebar enabled?
Kristarella, no problem, I actually tried that and the RSS button ended up floating above the whole header (I put it baack up there right now so you can see-Friday evening). I was hoping someone might have already done this (move the RSS button) and than it would be just a quick posting of code.
Ooh, yep… okay
All of your content needs to go within the “body” tags. So you’ve put the icon just before the
</head>tag, but it should go after the body one just below it. I think the best place would be after<div id="logo"> whole bunch of code </div>but before the next</div>.Try that and then we can see what needs to be added to custom.css.
Thanks for the help. Tried a bunch of different spots in that area. I think it needs some sort of command to make it justify to the right. I’ll leave it below the title for now. Getting to late for me to keep thinking straight. Any more ideas I’m willing to try them out.
Yes, that’s what I mean by “style”. CSS lets us position things properly.
To put it to the right you need either (in custom.css)
# rss {float:right;
}
or
#rss {position: absolute;
top: 1em;
right:1em;
}
In the first it might need more “styling” to prevent it floating on top of the header border. In the second, those numbers can be changed to suit where you want it.
Actually you might need to put
.custom #rss {for the first line.You may also want to find an image that wasn’t designed to go on white, perhaps at Feed Icons.
Hi there
I’m in need of a helping hand!!!!!
I am using the 3 col C.B. theme and have created a template that has two columns with a left sidebar. My problem is that the pages that use this template render badly in IE6. I have done a lot research into the problem but have not found any concrete solution. e.g. http://www.kawasakigear.co.uk/products-page/
I am fully aware of all the things relating to this prob and scanned the bug files and hacks but cant put finger on it.
I know also its something to with my css file .
Can anyone help?
thanks Graham
Graham,
Did you do anything to the custom.css or style.css files or are they just as when downloaded? In other words, will we need to look at the css or just the source of the link you provided? I can definitely see the problem, but don’t want to muck around for a solution if I need to see the css. Thanks.
Mark
Hi Mark , Thank you v much for replying. I did create copy and rename both custom and style.css files to create a new template. Not done that much to format so probably quick to fix. How would you want to view css?
Hi Graham,
You can email either the copies of the CSS to me or just the parts that you changed (copy them into a text file and put the header comment for each section that you changed, so I can find it in my copies of the original stylesheets).
email to marks at eversmall.com, replacing at with the at-sign, of course.