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.com.
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.
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.
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!).
{ 7 trackbacks }
{ 144 comments… read them below or add one }
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.
Great post Kristarella. I’ve already said that you did a great job with this theme, and it’s nice to now see how you did it!
I like your modified theme much more than the original! :D
Thanks Michael and pablopabla – appreciate your visits and comments!
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
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 :)
Oh and also, those numbers and letters are hexadecimal codes. If you need a reference for them there’s one in a recent post at The Foo Logs and I left a comment with some links there as well.
I’ve been thinking about using the Copyblogger theme. I love your site design and I appreciate you sharing your awesome design secrets!
Thanks Career Counselor and you’re welcome :)
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
Hi Bruce, you’re right. I did miss something. In custom.css it says
.custom #logo abefore the}I inserteddisplay: none;.Ooh, sorry – green is hard to see on the pink – if you highlight it it’s more visible :P
Thanks Kristarella, a piece of cake when you know how. Maybe I will try a new color scheme as well soon.
Bruce
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).
Hey Simon,
Thanks for visiting! I like your header modification, very nice.
It should be simple. Instead of
.custom #headerhavingborder-bottom-color: #fff;change it toborder-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. :)
Thanks Kristarella. That worked beautifully.
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
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! :)
Kristarella.
Thanks once again.
Bruce
: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:
That’s excellent Nika! Hope you’re happy with the results. Thanks for stopping by. :D
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.
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.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?
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.
Wow, I can’t believe I just now found this. Excellent work!
What, THE Brian Clark???
Thanks Brian :grin:
Simon, you’re hilarious! I’ll take him at his word and secretly think “Heh, wow.”
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
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?
whoa,
I really didnt expect an answer. Thanks. If you can take a look I would very much appreciate it.
The site is at http://www.profitablesistas.com
You are great.
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
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!
no problen Krist. Thanks for your reply.
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?
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.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
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.
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
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.
Ah, I see. Now that’s where a cheap used PC would come in handy for you. I got a great deal on a couple of off-lease Dells.
:-)
John
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!
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. :)
Well – I’m not sure what to say other than thanks! But that somehow seems inappropriate for you solving hours of my toiling with a few lines of code.
Check it out at http://www.EngineersCanSell.com
So … thanks a lot!
You’re welcome…
I hope I did fix it, have you implemented it yet?
Do you do theme customization?
I have a site at http://www.realestatetwincities.net. I am thinking about migrating the site to another host and changing the theme to a copyblogger style. I would like to retain some of the colors, look, and the photo header of the current theme.
What do you think this would cost?
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
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.
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?
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
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.
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
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" />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
That’s correct :)
I’ll let you know when the site is live, and if ever I can help you with anything, just ask :-)
John
I implemented your changes and it works like a charm! I feel guilty asking another question, but how do you control the placement of the navigation menu – really all I want to do is center it.
Thanks again!
Eric
http://www.EngineersCanSell.com
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.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.
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;} */.Thank you Kristarella. I’ll implement it as soon as I have the time. :)
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, http://www.kristarella.com/feed/ redirects to feedburner. Thank you for your help.
Hi Sean,
I think the redirection might be the magic caused by the FeedBurner FeedSmith plugin.
It’s spoken about and can be downloaded here.
Yes, it is the magic of Feedsmith. Thanks for your help. Enjoy San Fran.
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!
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?
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.customputborder: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
redwith#ff0000– or whatever colours are in your colour scheme.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?
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_boxin 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#contentor#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.
thanks for the quick response…ill try to play around with it some more.
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!
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. :)
:cry: 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
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.
just the site my name links to…/blog
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 #headerin custom.css the heading should be centered.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.
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 putbackground:none;orbackground:#fff;for the :hover nav links rather than just deleting it.Thanks again for the info. I was able to successfully modify my colors with your help.
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:
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
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
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.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() ?>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 …
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 :)
The gravitar code works like a charm in wp2.5. I followed your suggestion and doubled the pixel size.
Thanks!
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.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
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.
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! :-)
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
endwhileput,<?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.
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?