kristarella.blog

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

You are here: Home / Blogging / Personalising the Copyblogger theme

Personalising the Copyblogger theme

by

The Copyblogger theme by Chris Pearson is an elegant and simple template that is really easy to personalise to suit your blog. The theme is a “digitally remastered” version of what was in use at Copyblogger, which as you can see has undergone a makeover. Not plastic surgery, because it already had such a lovely facade, but some touching up to accommodate the quickly growing site.

When I decided to redo the look of my site I was looking for something simple, with fresh, clean template code. I felt that my old template code was full of things that it didn’t need, including things that have probably been deprecated by newer versions of WordPress. The Copyblogger theme is just that, fresh and clean.

I’ve received several compliments about the modifications I’ve made to the template and even a request to explain how I did it. That’s what this post is about – modifying the Copyblogger theme.

Update 15 May 2008: I’ve changed themes now, but you can see screenshots of my customisation at The Evolution of kristarella.blog.

Relevant Files

The most important files in this process are nav_menu.php, style.css, custom.css and footer.php. There is already a good post about changing or adding navigation links on the theme homepage, so I’m not going to talk about that.
Chris Pearson, on his own blog, wrote about preserving CSS changes. In light of that he’s used custom.css to make it easy to change certain elements of the template style. I have added styles into the custom.css rather than changing style.css.

Header Images

This theme isn’t “fluid” in the traditional sense, but it does have a certain level of fluidity as everything is defined in em rather than pixels so that it all holds together when a reader increases their font size (type Ctrl + and see what I mean). Due to this and the fact that people have different screen resolutions, I decided to go with a header image that spanned the top of any sized page.

The header image I have was made by me in Inkscape. It is in two parts. One is the main part of the image, the other is a small fragment that is repeated across the page.
blog header image

header repeating background

These files were put in a folder called ‘custom’, along with copies of the files that were in the ‘images’ folder (as per instructions that come with the Organic add-on style package). Then in the custom.css I changed
body.custom { background: #fff; color: #222; font-family: Verdana, sans-serif; }
to
body.custom { background: #fff url('custom/top-rpt.png') repeat-x; color: #222; font-family: Verdana, sans-serif; }

repeat-x causes the background image to be repeated horizontally across the width of the element. As expected repeat-y causes vertical repetition and repeat causes repetition over the whole page.

Then I changed
.custom #header { background: #000; border-bottom-color: #a90000; color: #fff; }
to
.custom #header { height: 400px; background: url('custom/red_tree-head.png') no-repeat; border-bottom-color: #fff; color: #fff; }

I also did a find-and-replace to change all instances of #a90000 with #aa0000 because I had used a slightly different red in my header image to the red of the headings and links.

Moving the navigation menu

To keep my page feeling fluid and help the header to feel centred (even though image is on the left) I moved the navigation to the top right. If you change the size of your web browser window you can see that it stays in the corner. If the page goes too small then it overlaps with the tree; I think you could give the page a minimum width so that it wouldn’t do that, but if the page is that small I don’t think it’s being looked at properly anyway.

To do this I simply added
.custom #nav { position: absolute; top: 1em; right: 1em; }
into custom.css. For neatness I put it near the other #nav styles in the file. If you wanted it on the left you would use left: 1em; instead of right. Then I swapped the colours, every instance of color:#a90000; became color:#fff; and vice versa (because I just went from a white background to a red one and the links would have disappeared into the background!).

Matching the footer to the header

I wanted my page to be consistent. So it would have been silly to leave the footer as it was when the only other black on my page was text. I created another image and a small repeating image.

blog footer image repeating footer image

I added
.custom #footer { background: #aa0000 url('custom/footer-rpt.png') repeat-x; clear: both; width: 100%; color: #fff; border: none; margin: 0; padding: 0; }
to custom.css. Then in footer.php I added <div id="credits"> all the links etc stay in here </div> within the footer div. This is the only time I’ve changed a template file (in this process) other than custom.css, this is only because I couldn’t think of another way; you wouldn’t need to add this div if you only use one background image in your footer.
Then I added
.custom .credits { background: url('custom/footer.png') right bottom no-repeat; height: 100px; width: 100%; text-align: center; margin: 0; }
to custom.css

Good luck!

That’s about the size of it. Please be careful where you get your images from, If you’re not sure whether an image you want to use as a header is under a free licence or whether the creator is happy for people to use their image please ask them!

If you’ve made some mods to the Copyblogger theme I’d like the see them – leave me a link! Feel free to ask me any questions, especially if you found something unclear (it’s so hard to know how to explain something with no idea how much previous knowledge others have!).

Reader Interactions

Comments

  1. I just realised that I also changed the author comments from yellow to red (#aa0000), by changing the relevant part in custom.css and editing the image files for the top and bottom sections.

  5. Found your site while searching change copyblogger. What I’m try to simply do is change the color of the header and footer. I loaded the custom CSS and I see a field.

    /*—:[ to change the colors of the header and footer… ]:—*/

    .custom #header { background: #a2b09d; border-bottom-color: #d2382c; color: #222; }

    .custom #footer { background: #a2b09d; border-top-color: #d2382c; color: #222; }

    I tried changing the 222 number but nothing happened. Any ideas??

    Thanks and I love your theme. I’d like to be able to get something that looks this good.
    db

  6. Thanks db!

    Yes, “color” refers to font colour. “background-color” refers to the colour of the whole background.
    You might find something useful here to help you find out those things.

    Hope you get it working 🙂

  10. Hi Kristarella. I have followed your instructions to modify the header, just with basic test header to see if it works for me. As you can see at http://www.brucewalls.com the repeat background is yellow and the header image is green so it works just fine.
    The name of the site is still showing through and is from the style.css I guess. Do you know how to eliminate that as you obviously don’t have the same problem.
    Bruce

  13. Thanks Kristarella, a piece of cake when you know how. Maybe I will try a new color scheme as well soon.
    Bruce

  14. Fantastically helpful post. I followed the advice here and it worked like a dream. There’s just one thing I still need to do. How do I get rid of the the bottom line across the header, the one that’s red in the original, but white after following these instruction. I don’t need it, and want to move the navigation tabs up flush with my header image? Any ideas, anyone? (I’m sure this is simple… once you know what to do).

  15. Hey Simon,
    Thanks for visiting! I like your header modification, very nice.
    It should be simple. Instead of .custom #header having border-bottom-color: #fff; change it to border-bottom: none;.
    That should bring the navigation up. If it doesn’t, it should only be some simple jiggery to get it up there. Let me know. 🙂

  17. Hi Kristarella. following your reply to Simon I changed border-bottom-color: #fff; color: #fff; to border-bottom: none: and tried border-bottom: none: color: #fff; as well but got the same unexpected result which I have left on display. What do you suggest.
    Bruce

  18. Sorry Bruce, I’m not sure what is unexpected in your result. :woops: Simon want his navigation to be up flush with the header and that’s what you both have now.

    Note that each CSS “command” has a semi-colon, not a colon after it (in case your CSS breaks because of that). So to not have a border you need border-bottom: none;. The bit after it: color: #fff; refers to font color.

    Having explained that, is that what’s wrong with your header? The red border has reappeared because it’s not recognising the border-bottom command in custom.css? If so, just change the colon to a semi-colon! 🙂

  20. :kiss: This is such a great help. I just saw the copyblogger theme and I wanted to use it on one of my domains but it was a bit too plain for me. Seeing what you’ve accomplished with it, I’ll definitely try it and see what I can come up with it using your tutorial. 🙂 :coffee:

  22. Thanks for all your help so far, it’s been really useful. I know it’s not really your job to answer this, but thought I’d ask in case you do know.
    First of all, is it possible to centre a header such as the one I’m using, so that the logo / sitename always stays in a precise place, rather than being fluid? At present there are two images used: one with the logo on that sits left, and another repeater, so that the stripy colour bars show up no matter how wide the browser goes. But the logo can end up all over the place, depending on the width of the browser window.
    Also, would it possible to frame the whole thing in a dark background colour? How easy / hard would that be? Thanks in advance.

  23. Hi Simon,

    It depends where you want the header to stay, but yes – I’d say it’s possible. Do you want it to always be in the centre of the browser? If that’s the case you can: change the #header css so that it is the width of your logo, then the current margins should take care of it; you can insert the logo as html in header.php and apply the same styles as .entry img .center has; there may be other options. A problem with that is that the striped background might not line up perfectly, but it might be subtle enough not to notice.

    Sorry, for not giving you more detail. I can if you want, I just didn’t want to give every option in detail. 🙂

    “Framing” in a colour can be done using border: 5px solid #000; or something like that. However, it would not be easy to do with the method that I’ve described in this post because the repeating background is in the body element. To put a border around it you could create a new div within the body and around the header. Then give it the repeating background that was placed in the body, then put the border around that. Not that difficult in itself, but it might take some tweaking to get it right.

  24. This post help me a lot. Thanks. BTW, how did you put external links into navigation menu? I was trying to do this, but I couldn’t figure out. Can you help me?

  25. Donghyup – you’re quite welcome.
    To put links in the navigation you need to edit navigation.php. That file is just a list of links, you can enter the links as you would with normal html links.

  29. Hi,

    Thanks for the great info. I have a question. Everytime I try to change the header it works on the home page, but the author, archives, etc pages get all screwed up. What on earth am I doing wrong. I have spend wayyyyy to much time on this.

    Any help would be appreciated.

    Deb

  30. deb – without seeing a working (or not working, as the case may be) version I can’t say much for sure. It is odd that on your archives page the description is inside
    <p id="tagline"> </p>,
    but on the home page it’s in
    <h1> </h1>. Maybe it has something to do with that.

    Do you have a test site where I can see the problem?
    What kind of “screwed up” is it? If you don’t have a test site could you take a screenshot of it?

  32. i just realized what you said. about the tagline. with that said how can i fix that. It’s driving me nuts

    Also, did i mention that it doesnt do that in firefox.

    Thanks

  33. Sorry for not replying sooner deb! The whole Christmas/New Year time was a bit busy.

    The tagline thing would have been a matter of checking that the class details were the same in index.php and archives.php and single.php where the description was being called up.
    I couldn’t see anything wrong with the header at your site, because it was the standard one. You’ve changed to an image that seems to be working now, so there’s not much more to say about that.

    Thanks for stopping by!

  35. Hi,

    Thanks for doing this. It’s a great help. I am developing a site using CopyBlogger. I am only changing a few things such as color, enabling the tagline, etc. I may use a graphic logo in the header; not sure yet.

    My problem is, in Firefox, the home page looks fine, but in I.E.7, the footer floats up, narrowing the vertical space between it and the sidebar, leaving about an inch of space below the footer.

    I haven’t changed anything in the footer except the background and border color. When I look at the footer codes using firebug, it is the same as on the CopyBlogger demo site, and yet I.E.7 doesn’t show this problem on the demo of CopyBlogger. Also, the problem does not show in I.E.7 on a single post page — just the home page.

    Do you have any idea why this is happening? Do you think adding a “clear: both” declaration to the footer css would help?

  36. Hi John, you’re welcome.
    Good luck with your development.

    Yes, inserting clear:both; is waht I was going to suggest. Even though the #container isn’t floated the content and sidebar inside it are, so the div might not have any height. Sometimes these CSS things behave differently than expected… it needs a bit of playing around. Hope that works.

  37. Hi back to you,

    In the last hour or so I have tried the clear: both declaration, by inserting it in the custom.css beneath the other coding for the footer, using the appropriate coding format etc. Nothing changed. Maybe that wasn’t the place to add it.

    But here is what I have just discovered: There was only one test post on the site, and it was only one line long, whereas on the single post page, the comment dialog box and one test comment took up more room. I was thinking that FireFox was able to compensate for the lack of vertical content height, but maybe IE7 could not. I published another post to take up some room, and it now displays fine in IE7. I guess it just needs more content to push the footer down. Odd, but it works.

    I am not at all familiar with CSS, and have only just begun with wordpress. My only experience is with two static HTML sites (this comment links to my art site), but I sure am intrigued with WordPress, CSS, and PHP. So I’m looking forward to getting my site developed (doing it locally first on Wamp server) and operational.

    Thank you for helping,

    John

  38. Hi John, yes, that sort of footer thing is a bit of an oddity, glad it’s working though. It’s probably not usually a problem because even in development you usually use more than one post.

    Internal servers are great, I’m using MAMP (mac version) to develop a new theme right now… the only disadvantage is that I can’t use browsershots.org to test problems in IE… I figured you were doing something similar, otherwise you would have linked to the site where the problem was.

  39. Yeah, it’s very handy to have the WAMP server on the home computer to use for developing. It’s much quicker to fiddle with this and that without having to ftp all the time. And — no one gets to see my mucking around 🙂

    I wasn’t aware of Browsershots.org. That looks quite useful. But as far as checking for problems in IE, why not just open the local development site using IE through your MAMP server?

    Firebug sure has been a godsend for me in learning where to find what I need in the custom.css. I’m also glad I found Chris’s themes. The custom.css idea is so smart, and his SEO is very good. I have looked at a lot of themes and most of them don’t make proper use of the “h” tags.

    Have fun with your new theme!

    John

  40. Yes, Chris’s themes use heading hierarchy well.

    They haven’t made IE for mac for many years and even then, it might not be exactly the same as Win IE. I just hope that if I use sensible code it will work! Then, when I put it up live I use browsershots.

  42. Thanks for the great post. I’m still having trouble that Simon mentioned – centering the header image. How do you use the .center option that you mentioned? Does it go right in the img declaration somehow?

    Second question not as important, but do you know how to center my RSS button in the left side bar.

    Thanks!

  43. Hi Eric,
    Yes, the class="center" goes into the img tag, it should be fine the way you’ve already done it. Then, you have to add the style into the CSS files. What’s already in your style.css is
    .entry img.center { display: block; margin: 0 auto 1.5385em auto; clear: both; }
    Copy and paste that into custom.css and change the class to
    .custom #logo img.center.

    Not sure why your RSS isn’t done the same way to how Chris made the theme, but if you add
    .custom #left .textwidget {text-align:center;}
    to your custom.css it’ll work. If you’re worried about other things that you might give the textwidget class to then give the RSS one a different class.

    Thanks for stopping by. 🙂

  47. Hi Again,

    A quick question: When I was testing a contact form plugin on my local (wamp server) site, I tried to activate php_mailparse, thinking it was required to test this plugin’s mail sending ability. Anyway, the server told me that there was an error and mailparse could not be activated, even though the check mark was applied.

    Well all the above is a round-about way of saying that after I realized that I could just test the plugin on my live site, I got an error notice in “Firebug” on the local site (no doubt due to trying to get the mail function to work). Anyway, the error referred to feedburner and had the feedburner address in it.

    My question is: since the standard WordPress feed isn’t feedburner, where did the feedburner reference come from? I haven’t activated feedburner on anything yet. Is CopyBlogger coded to use Feedburner as the default feed?

    I searched Chris’s site for reference to this with no success. If it is set up already to use feedburner, that would make it easy for me. I have read all sorts of posts warning about using the standard feedburner method of switching to them.

    Well this wasn’t a quick question after all was it? I am sorry for the novel. My head is not clear today I’m afraid.

    Thanks so much,
    John

  48. Hi kermit,
    I’ve never formally done a customisation for someone else, but I would consider it.
    I couldn’t just estimate a cost, I could estimate a time frame and then go by an hourly or daily rate. If you really want to talk more about it email me.

  49. John, the short answer is that Copyblogger doesn’t integrate Feedburner by default.

    I’ve never had any luck sending emails from my MAMP server.

    Do you have the Feedburner plugin installed?
    Which contact form are you trying? I use the delicious days one, which has worked fine.

    I’m not really sure how to use Firebug, but I looked at it on my contact page and couldn’t see a problem.

    Perhaps the feedburner error is a coincidence? Can you actually receive mail from the contact form?

  50. Hi,

    I’m using the scf2 Contact Form. It’s pretty good so far. I can receive and send mail no problem since I installed it on the live site (bare bones wp installation so far). You can view, reply to, and manage the contact emails from your WP Admin which is nice. I’m not going to try and get it to work on the local site, since that’s now irrelevant.

    No I don’t have any plugin for Feedburner. I think the reference in that error report from FireBug might have had something to do with a previous visit to the Feedburner site just prior to viewing my local site. It may have displayed the error and held it even when I was on the other tab looking at the local site. I poured through the copyblogger files and couldn’t find any reference to feedburner (as you know). I’ll chalk it up to coincidence.

    By the way, since you use feedburner, is that plugin a good way to switch? I have heard that using the plugin can cause problems, and that using an htaccess code (as detailed on askapche.com) for switching is the best way. Any thoughts? The feedburner site seems to suggest that all you need to do is type in your url and “burn the feed.” Is it really that simple?

    And thanks again. You are a great help. Enjoy your evening.

    John

  51. Cool, it was probably some residual error or something.

    Yep, FeedBurner is nice. It is that easy to create a FeedBurner feed, then you just change the links in your theme to direct to that link rather than the WordPress created feed.

    I haven’t had any problems with FeedBurner’s Feed Smith plugin. Although, htaccess would be a good way to do it, keeping plugins to a minimum can be a good thing.

    I don’t think I had heaps of subscribers on my WordPress feed so I figured that after a decent amount of time I could probably stop using the Feed Smith plugin; all new subscribers will have used the FeedBurner link.

  52. Hi,

    So am I understanding correctly that I don’t need to use the feedburner plugin, and all I have to do is to follow directions on the feedburner site, then change the links in the theme?

    If I don’t use the plugin, is there any need to alter the htaccess if I use the “burn a feed” function on feedburner?

    Also, can I tap your patience a bit further and ask which file in the theme I find those links?

    Thanks again,
    John

  53. That’s right, if you’re not worried about people already subscribed to your WordPress feed (which you wouldn’t be if your site isn’t live yet) then you don’t need to use their plugin. What it does is redirect the feed address from WordPress to FeedBurner. That’s what you’d be doing with htaccess too.

    You should change the link at the top of the sidebar in sidebar.php, also change in the header.php
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>>RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    to
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>>RSS Feed" href="http://feeds.feedburner.com/yourfeed" />

  54. That’s great. So when I am fully live with the developed site, do I just use the feedburner “burn the feed” function, then change the coding in the files — and that is ALL? Or do I ALSO have to change the htaccess file?

    From what you have said I am thinking that I don’t need to change the htaccess, since I will have no current subscribers to the standard wordpress feed to redirect. Am I right in that?

    Thanks a whole bunch,
    John

  58. Hi Eric, you’re always welcome to ask more questions. However, I’m afraid at this point in time I don’t have a good answer for that one. It is made difficult because all the list items that make the navigation are floated left so that they are horizontal. So, centering the ul doesn’t seem to do anything, the items still float to the left.

    The #nav has a width in style.css…
    The only thing I can think of at the moment is changing the width to approximately the size of your nav bar (will change for everyone who has added any links) and giving it margin:0 auto;. It works, but it’s clunky because you’ll have to change it when you add or remove navigation items.

  59. Hi Kristarella!

    I was able to modify the header of this blog…

    http://www.treasurenature.com

    following your instructions. Got a bit of a problem with the nav though. I used the code you gave…

    .custom #nav { position: absolute; top: 1em; right: 1em; }

    but the nav menu stays at the center. I changed it to left instead with a value of 900px just so it aligns with the right sidebar. Is there a better way?

    Thank you.

  60. Hi Bong! Glad I could be of help.

    Sorry, I might have forgot to mention that I removed the #nav width in style.css. It has a width of about 72em, so the links are floated to the left of that, which appears to be in the middle of your page. I commented it out, so it looks something like /* #nav {width: 72em;} */.

  62. Thanks Kristarella and John for helping me get feedburner squared away. K, I have followed the steps you shared with John, however how do you get the feed link /feed/ to redirect to the feedburner page? In your case, https:\/\/”www.”kristarella.blog/feed/ redirects to feedburner. Thank you for your help.

  65. Hi Kristarella~

    i’ve been trying to figure out this theme all day …
    could you help me with the code for inserting an image into the header…? i don’t need to change the whole thing, just add a graphic image header to the header…

    thanks!

  66. I love how youve enabled all of us to customize the copyblogger theme. I was wondering if there is an easy way to add constant borders to the sides of the content of the page?

  67. Satya – Sorry for my slow reply. I think what you want to do is open up header.php and insert
    <img src="http://www.example.com/image.jpg" alt="" />
    just before <div id=logo> or just after it.
    Insert the correct address to your image where I’ve put example.com. Hope that helps!

    Eric – If you mean borders to the whole page, then yes. There is a very easy way. In custom.css inside the curly braces of body.custom put border:5px solid red; replacing the measurement and style and colour with whatever you want.
    FYI, there are a bunch of colours that can be specified with words: red, blue, black, white etc. Otherwise we use the hexadecimal codes, so you could replace red with #ff0000 – or whatever colours are in your colour scheme.

  68. Im sorry, maybe i didnt specify it correctly. Right now, I have the custom header and footer, and I didn’t want the frame to go around that too. I was trying to make it so the body and side bar are constant widths (regardless of how much people zoom in/out on the text) with side bars that will match the header and footer. Does that make sense?

  69. Hmm, I’m not really sure I follow 100%, but I’ll try to share my thoughts.

    I already gave you the css for the border (if you’re actually wanting to border anything). If you apply it to .custom #content_box in custom.css it will go around the posts and the sidebar (if there isn’t a style called that in custom.css then you can just make one). Or it can go around #content or #sidebar.

    Elastic layout is a feature of this theme and it would not be very easy to change it seamlessly. If you really want to you should look in style.css at the widths for all the main elements. They’re in Ems, which is a relative size (sorry if I’m repeating stuff that you already know) and depends on the font size. 1em at 16pt font size = 16px. You would need to figure out how big you want your page to be and then figure out the proportions that the page already has and convert each section to pixels for a fixed width.

  71. Thank you K! you’re seriously one of my heroes right now…
    i’m wondering, though, since i replaced the the official blog title with an image 🙂 the header no longer links back to the home page. How can i direct the image to link to home, there must be a script, as most sites have this function. sorry, i’m just starting out with all this…

    also, how to change the rss button – i tried just changing out the picture file, but it stil doesn’t recognize

    – thanks again!

  72. No worries Satya,
    Just wrap the <img src="http://..." alt="" /> with a hyperlink – like so,
    <a href="http://www.example.com"><img src="http://..." alt="" /></a>.

    While you’re learning, you might find W3 Schools helpful too. 🙂

  73. 😥 it didn’t work when that chunk of code was placed after div logo (header disappeared) so placed it right in front – so now it links but header image scooted all the way to left of page – is there an easy trick to make it move over to the middle…?
    thanks again for your help

  74. Oh dear, do you have somewhere that I can look at it? It’s usually easier when I can see the problem and the code myself.

  76. Thanks!

    Ok, so if you added display:none; as I suggest at the top of the comments then that’s why it disappears inside the logo div.

    If you add text-align:center; in between the curly braces of .custom #header in custom.css the heading should be centered.

  77. Once again, I want to say thanks for all your help Kristarella.
    Unfortunately Ive come across another question: I am trying to change the navigation menu so that the links don’t turn red when the mouse hovers over them, but I can’t seem to find the code for that at all. I’ve tried looking for the red color throughout the code and some reason I can’t find it anywhere. Ideally, I would like to make it so only the text changes colors, and the background color stays constant.

  78. Hi Eric,
    Always happy to answer questions when I can 🙂
    I think it should be in custom.css under .custom #nav ul li a. When you change the colours for hover I think you need to put background:none; or background:#fff; for the :hover nav links rather than just deleting it.

  80. update – thanks to your intrepid guidance, i somehow made it work – for now anyway. thanks again and i hope i can bug you again down the line…! :angel:

  81. Dear Kristarella,

    the time has come when i am compelled by sheer necessity to request your intrepid guidance once again…

    the main problem i am facing right now, as i prepare my little corner of the universe, is incredibly slow page loads – 20-30 seconds at times…now i can’t imagine what’s wrong though i suspect it may be a simple problem with my code. I realize this may be beyond the scope of your knowledge but since you are indeed designing your own them right now, and of course are quite familiar with this one, you may be able to help!

    the other equally baffling one is this…my link code doesn’ t do anything – i try to insert it in myposts and get nothing! thanks in advance for any guidance you may be able to offer!

    gratefully yours,
    Satya

  82. how abou gravatar? can you tell me abou how to add gravatar in wp 2.5 with this themes..
    i try to add gravatar but its bad, i just want located gravatars in box of comment like other themes.
    Thanks kristella

  83. Hey Satya,

    Your page loaded at a normal rate for me. All the same, you could probably check the size of the images you’re using, they probably shouldn’t be more than 100kb (for a medium sized image).

    Also, there’s a few code errors. I’m not sure if they mean anything to you, but perhaps you could try to identify them on your page? Sometimes we can’t do much about them, but sometimes they cause problems.

    Links in posts should look like <a href="http://www.example.com/">Example</a> when you’re using the code editor. If you’re using the visual editor switch over to the code one to check that.

  84. donny – I only just started using 2.5 myself and haven’t played with the gravatar yet, but the code is,
    <?php echo get_avatar( $comment, 32 ); ?>
    I believe the “32” refers to the pixel size of the image, so you can change that at your pleasure.
    I guess the way Copyblogger comments display it would make sense to put a small gravatar near the commenter’s name. In comments.php the code to look for is <?php comment_author_link() ?>

  85. Thank you! i think i found the problem in the code that was holding things up just after i wrote to you, seems the attempt to solve it actually allowed it to happen – now checking all these error code messages…ayayay

    what exactly does all this invalid code actually add up to? i mean i’m wondering what are the actual effects if certain things can’t be solved …

  86. Glad it’s fixed!

    You actually don’t have too many errors Satya – some of them looked like repeats to me.
    If they can’t be fixed then I don’t think it will have much affect at all. The validation tool can just be helpful to clean out incorrect code and (heaven forbid) any mismatched tags, for example if you forgot to close something.

    I was using a plugin once that was breaking my layout and I couldn’t for the life of me figure out what it was: until I validated, found which line the error was, and went through my source code. There was an extra div opening somewhere and not closing.

    Unfortunately it’s usually other peoples things that aren’t valid: plugins, javascript, referrer links… they usually won’t stuff anything up though 🙂

  87. The gravitar code works like a charm in wp2.5. I followed your suggestion and doubled the pixel size.

    Thanks!

  88. Excellent! Looks good Bos.
    You might like to try adding img.avatar {vertical-align:middle;} to your CSS and see what happens. Might make it fit with the name and speech bubble even better.

  89. Hi there, your blog looks great. I have just made over my blog using the same theme and after a google search came across your very helpful blog.
    Can you tell me how I add comments to my pages, the option is ticked, but there is no where to comment on them… just wondering if this is fixable.
    Cheers 🙂

    Also, what plug in are you using for the “Notify Me f Follow-Up Comments Via Email”.

    I have had bad and unrecoverable experiences with plug ins and don’t like to use them unless they have been tried and tested! LOL

  90. Hi Lee!

    Thanks for visiting. Glad you found things helpful.

    I love your customisation! Great choice of colour and that header is great; unique and attractive. It makes me feel like I know what your blog is about just from the header (I might have to read more to confirm that though!).

    The plugin is Subscribe to Comments. I think it’s the one that most people use… never had a problem with it.

  91. Thanks for your kind comments Kristella, there is a certain sense of achievement when you can personalise your blog!
    I have installed the ‘Subscribe To Comments’ plugin and there have been no adverse effects, so thanks again.
    Do you know how I can add a comments section on my “About” and “Links” pages, I have ticked the box, but there is no where to comment.
    Thanks
    Lee
    PS I have enjoyed checking out your various blog entries, I think I will be back often! 🙂

  92. Doh! Sorry, I was so busy checking out your design I forgot about the comments on pages bit!

    Umm, there’s something a bit funky going on with the comments on my pages, but I can’t figure out what it is. There’s extra borders under things…

    Anyway, hopefully that won’t happen to you. To add comments on pages you need to make a copy of page.php and call it something else (mine is page+comments.php). At the top of the file put,
    <?php
    /*
    Template Name: Page+Comments
    */
    ?>

    Then after the post and before the endwhile put,
    <?php comments_template(); ?>

    Then for the page you want to have comments, select Page Template > Page + Comments. Unless you want all your pages to have comments, then you just add the comments_template bit to page.php.

  93. Thanks, Kristarella. I appreciate the suggestion, though I’m not sure where to stick the code in my CSS. :huh: What file and near about where should the code (img.avatar {vertical-align:middle;}) go?

  94. Sorry Bos, probably best place for it is at the bottom of the custom.css in which case it needs to be .custom img.avatar {vertical-align:middle;}.
    It’s not necessary of course, your gravatars are good, thought it would be worth a try though. 🙂

  95. Hi Kristella, Thanks I will give it a go…. I am thinking I have so little knowledge in coding that I need to do some sort of course, so far I have managed to blunder my way through…with trepidation I will give your solution a go! Thanks for your selfless help, oh and I have yet to fix my header shifting to the left problem, but will try that today.
    Thanks again 🙂

  96. Hi Lee,

    I found PHP more difficult to learn than HTML/XHTML, I guess it depends on how you learn and how quickly you want to learn. I pretty much taught myself by making different blog themes. It helps to have someone around who knows a bit about it (my boyfriend, now husband helped me with HTML), then there’s always Google.

    Also, for quicker playing around and testing things out, and possibly breaking things without breaking your site, you might like to try installing WAMP. It allows you to make a little server inside your computer to install things like WordPress.

  97. Hi Kristarella,

    I’ve been meaning to show you my modification of CopyBlogger (linked to my name above) that I am using for my site, Zen-Moments. You helped me out a couple times and I appreciate it.

    I have tried to design everything for ease of reading, focus on the main content, and to get a certain relaxing feel to the site. I made the main content area a little wider (510 px instead or 478 px), and generally changed quite a bit, if only subtly.

    I have enjoyed learning the smattering of CSS and PHP that I needed to design what I wanted.

    Have a look at the final product if you care to, and thanks again.

  98. Thanks for letting me know John!
    Really glad I could be of some help. I hope you enjoy your blogging journey and learning a bit more CSS and PHP 🙂

  99. Just wanted to say thanks for your help again, I have still been unable to fix my header issue, and I have tried everything I can think of (except, apparently the one right thing!), and can’t centre my header, but thanks anyway. You have been a wealth of knowledge and help.
    Have a great day 🙂

  100. Kristarella, thanks again for the help. I was able to put the code at the end of my custom css file and all is well.

  101. Hi Kristarella!

    The time has finally come for my site to be born into the world…

    unfortunately i’m having some issues, and i posted about it at http://www.pearsonified.com/th.....mment-8990

    in order to open the field and not lean on you too much…! if you have a minute to check it out and add your two cents, of course that would rock. I’m really not sure what exactly the ‘core wordpress files’ are…

    anyway, thanks a bunch! S

  103. Hi again Kristarella, just wondering if there is any way you can add another sidebar to the copyblogger theme that you know of?

  104. Help Kris!

    i got hacked by the pornbots already – and my site is now beridden by evil linkbait – don’t know how to get rid of it – researching now, but please let me know if you get this what to do – view source on my site at the bottom you can see it – can’t reach through control panel…

    thank you! S

  105. update: i found the spam in my index php and removed it – how do i prevent this from happening in the future, and how can i be sure the site is clear of other hacks and hidden spam links…?

  106. Oh my goodness! That’s bad 🙁 Glad you managed to get rid of the links.

    I haven’t had much experience with that sort of thing. I found a very thorough post, which I’d say is probably too thorough for my tastes. The first things I’d do is update to the latest version of WP – if you haven’t already (especially if it says it’s a security update). Remove the “write” permissions from your files. Have a look over the WordPress topic of securing WP as well. It tells you which permissions to use. They also suggest checking with your hosting company to see what security precautions they take – that’s a good idea.

    For checking for more malicious links I can only suggest opening your theme files and searching (ctrl+f) for “a href” or “http://” and checking them manually. There shouldn’t be too many of them since many links are generated by PHP.

  107. Hi Kristarella, I wonder if you can help me? I have been trying to follow your instructions to customise copyblogger, but my images will not show up on my site.

    I have tried putting diffent images in (JPEGs) , and it works perfectly, so obviously the problem is in the images I am using.

    The images were originally an EPS file which I purchased from istockphotos. I edited them in photoshop and saved them as jpegs. however I don’t know much about graphics and there were a lot of options to save them which I just guessed at really.

    Is there something really obvious I’m doing wrong when I save the images? I’d really appreciate it if you know!

    Regards,
    Vanessa

  108. Hi Vanessa,
    If you were trying to use the EPS files, then I don’t think that will work. As far as I know browsers only support JPEGs, PNGs and GIFs properly (and only some browsers use some PNGs properly).
    If you go to the address of your image, it says it contains errors.
    Try opening the eps file again in Photoshop. Check the image mode — RGB is probably the best for the web. If there are multiple layers, you might want to “flatten image”. Then go to “Save as” and save the file as a JPEG.
    I use GIMP, not Photoshop, so I’m not sure if this is the best approach – I’ll check to see if anyone on Twitter knows. 🙂

    Update: I just saved your file, saved as a JPEG with a different name and it opened in my browser, but yours wouldn’t. I think maybe something went wrong the first time you saved it. Perhaps make sure you’re saving as a JPEG and not just adding .jpg to the end of the file.

  109. Thankyou, thankyou, thankyou, thankyou!!!! it seems that setting the mode as RGB was the key. I just did a quick test and it worked.

    Really appreciate the super fast reply! It seems you are helping a lot of people with this, will be sending lots of good karma your way 🙂

    Cheers,
    Vanessa

  111. Marcus, I’m having difficulty troubleshooting the problem in with Firefox addons, but try using top center instead of 0% 50% for the background position.

  114. Is this the way the revision should read?

    .custom #header { height: 100px; width: 700px; background: url('custom/dallasownerfinancehomes1.gif') top center no-repeat; border-bottom-color: #fff; color: #fff; }

    If so, it didn’t change the position of the image.

  115. Hi Marcus,
    Sorry for my slowness responding. Yes, that was the code. Not sure why that didn’t work. How big is your image?
    I’ve installed the new Firebug so I should be able to check it out in FF now, but there’s an error connecting to the database, so I can’t see you blog now.
    Let me know if you want me to take a look and help troubleshoot some more.

  116. Hi Kristarella, this is probably a silly question, but I can’t figure it out! How do I add code in a blog post to demonstrate something, without it actually taking affect…. hmmm not sure my question is clear, hopefully you know what I mean :blush:
    Thanks in Advance 🙂
    Lee

  117. Hey Lee,
    Perfectly normal question 🙂
    You need to replace the things that make code “code” with their html entities.
    For example, when you’re typing it out,
    <a href="https:\/\/"www."kristarella.blog>my url</a>
    will look like,
    &lt;a href="https:\/\/"www."kristarella.blog&gt;my url&lt;/a&gt;
    Pretty much, replace the less than and greater than signs with &lt; and &gt; Hope that makes sense!

  118. OK is it too early in our relationship to say I love you?!

    Just joking (not stalking)… thank you soooo much, I have been trying to figure it out for weeks….

    I really appreciate your help, you are a fabulous resource and wonderfully quick to respond…. thanks again :cheers:

  120. Thanks so much for your header customization information! I’m a newbie blogger and have been learning as I go along!!! Hopefully, my blog will look more personalized!

  121. Hi Kristarella, I used your instructions to personalise my diet blog, and I’m really pleased with it, So thanks so much!

    I’m thinking of setting up another blog for some of my craft projects, and I had a quick question, do you think it would be possible to have two images in the header? one on the left and one on the absolute right?

  122. Hey Briana and Ness, so glad I could be of help 🙂

    Ness, it would be possible to use two pictures in a few different ways. What’s the position of the navigation going to be? Will it need to be on top of the picture on the right?

  123. Hi Kristarella, no I think I will leave the nav bar at the bottom, as the picture on the right would balance the header, so it wouldn’t be as important to move it.

  124. Ness, that should make things easier. In that case, you should be able to use one as a background image and one as an image in header.php.

    Do the background image as usual and then in header.php underneath <div id="header"> put <img id="top-right" src="http://example.com/image.jpg" alt="" />.

    Then, in custom.css put
    .custom #top-right {
    float:right;
    }

    You can change “top-right” to whatever you want and you can add some margins to the image in the CSS if you need to.

  125. Thanks Kristarella, I really appreciate your help! I will give that a try straightaway!

    Cheers,
    Ness

  126. I’ve an idea, why don’t you publish this as a custom style package for copyblogger theme ? I mean, your last copyblogger design ..

    ( like Chris have done, “Organic Style” )

  128. Hi Dawn,
    I’m using photoblogging software for my photoblog called PixelPost. There is a plugin you can get for it called Promote PixelPost, then you use a line of javascript to insert the thumbnails.
    You can do a similar thing with Flickr too.

  129. Hi I seem to be having a hard time getting my image to be in the center and linkable. Also I never could get my fancy footer to show up.

    Can you go over that again. Maybe I misunderstood something.

  130. Copyblogger is superb for a blog that’s primarily text-based. I’ve mashed it for a magazine-style resource site and I’m quickly getting to realize its limitations in that application. It’s so much work to make things gel.
    Wide peripheral vision is a huge advantage when choosing a theme. Some themes look so great you think they’ll fit the purpose of any site, but that’s short-sighted, and can result in a costly mis-judgement.

    Copyblogger does rock though, imo. Tip hat to CP.

  131. How do you get the .png in your header to show up correctly in explorer? I have inserted a png picture in my blog’s header and it works in everything EXCEPT explorer — even on down to the supposedly superior IE8!

    I tried some methods, including one here:
    http://blog.nkadesign.com/2006.....mment-9859

    None seem to work. How did you do it?

  132. babel — When I had the copyblogger theme I used a PNG with a white background. There were no transparency issues. The image I have right now is transparent in IE, but the image don’t get positioned properly, that’s with the Unit PNG Fix. The one I really recommend if you need transparency and positioning is DD belated PNG. It works well.

  133. Hi krista,
    Thanks for the quick response. I am beginning to think the png is not the only problem. I’ve tried other techniques, mostly slight modifications of your tutorial above, and the png does show up in the header — it just doesn’t show up correctly in IE — but at least it shows up. The problem I have with your method above is that when I put in the graphic, I lose the link back to the blog home because I am not leaving any text there. Like Satya above, I only need a simple non-repeating logo there, nothing else

    So, I went back to my original method which was also based off of one of your comments above to Satya:

    “I think what you want to do is open up header.php and insert

    just before or just after it.”

    I did this along with the hyperlink and it works perfect in Firefox and Safari (on a Mac) and, as far as I can tell, on every browser on a PC except for explorer. I am using copyblogger and in IE the graphic just disappears, leaving a just the navigation menu and the thin line above it. What I mean is that not even gifs or jpgs show up, it is not just a problem with pngs. Do you have any idea why IE is not seeing the graphic?

    And again, thank you for your great tutorial and help!

  134. babel — Sorry, I really don’t know why an image wouldn’t show up in IE. If you navigate to the address of the image in IE does it show up? Without seeing it in action I couldn’t even hypothesise.

    The code might not be showing up because you need to escape the characters, looks like you only escaped the first one.

    I’m going to write a tutorial about changing header images in Thesis, but I think it will partly apply to Copyblogger too because the bit referring to what you want to do is only CSS and Copyblogger and Thesis use the same #logo element.

  135. Yes, the image, when linked to directly, shows up in IE

    Here is the blog, and the image.

    I put the code for the logo in the header.php as you had suggested. I just wanted a clickable logo without the overlay text, that’s why.

  137. Fixed the error and tried it in Netrenderer and it showed up correctly in IE7. What a beautiful thing. Thanks Kristarella 😉

  138. Hi,

    let me say “thank you” first for all the help you offer an this side!

    I have a problem with Copyblogger, too. I want to customize my footer and followed your instructions, but it turned out that now the credit line (© xyz — Copyblogger theme design by Chris Pearson) appears above the new footer background image!?! Any ideas on what to do?

    Thanks in advance,
    Miko

  139. Miko, I’m not really sure without seeing it, but I’d suggest you might need .custom #footer padding-top:50px; or some other amount of padding on the footer element.

  142. Miko — Near where you added the background to #footer in custom.css try adding .custom #footer #credits {padding-top:5em;} on a new line.

  143. Good morning (where I am) respectively good evening (where you are) ;-),

    you just made my day!!! Thanks so much once again.
    I definitely will give you a place in my blogroll. With your help my site is nearly done and I can start blogging, yeah!

    Best regards,
    Miko…

  144. Hi there! I need some help with RSS button on my site. Can someone please explain in detail what do I have to do to make that big, fat button work? 🙂 I have feedburner account. I guess I have to link it somehow to the button but how?
    Any help is appreciated.