With the release of my DIYTheme last week, I promised I would show you step by step how to customize it. I know there are a lot of people who would probably like to change some things about their current theme, but just aren’t sure where to begin, and don’t want to go editing code because they’re afraid they might completely screw it up and not be able to fix it. My aim in this article is to show you a way to play around with your CSS risk free, and then to show how to make a simple font color change using the DIYTheme as an example. (If you’re unsure what I mean by CSS, you might want to watch my Basics of CSS sketchcast first.)
If you only have IE on your computer, you will need to get Firefox, and then get the add-on for Firefox called Firebug. Once that is installed you will see a little bug icon in the bottom of your browser: 
Open the web site you’d like to edit, and click once on that icon. That should open a pane at the bottom of your screen that looks like this:
One of the things you can do with Firebug is edit the CSS for the page right in that pane, and see the results of the changes you made in the page above immediately. This does not affect the CSS that is saved in your WordPress theme editor at all – this is just temporary in the window/tab you have open in Firefox.
Edit the CSS in Firebug
So, let’s say you’ve downloaded the DIYTheme and you like the header with the water droplet and you want to change the sidebar headings to a blue color to match. You can see what piece of the CSS the headings are styled in by clicking CSS and then click Inspect. Then mouse over the elements in the page – see how they get a blue box around them? Mouse over one of the sidebar headings and then click on it once, to tell Firebug that’s the element you want to inspect. In the right side of the Firebug pane, you’ll see the various pieces of CSS code that affect that heading. If I do this in the DIYTheme demo, I see this:
H5 designates the heading, and below it are the styles applied to that heading. The first line says “color: #000000″ which means the font color is styled with the color code for black. Now we need to go find that piece of CSS and edit it. In the Firebug pane, click CSS then click Edit, and scroll down until you see that section of code- about a quarter of the way down in the DIYTheme. Then you can click on the color code and change the 000000 to something like 003399 for a nice blue color, (check this page out for a list of hexidecimal color codes) and voila, you have blue headings!
Edit the CSS in your theme
If you’ve made changes you like, and would like them to be permanent, then do the following:
- Go into your Admin panel in WordPress, and go to the Presentation tab and click on Theme Editor.
- Make sure you’re in the Stylesheet file, and first make a backup copy of the CSS by selecting all of it and pasting it into a Notepad document on your computer.
- Then make the same change in the CSS as you did using Firebug, and then click the Update File button at the bottom.
- If you make lots of changes and just want to copy over the entire file, you can highlight all the code in Firebug (Cntl-A to select all, Cntl-C to copy it) and paste it over top of your current CSS (Cntl-A to select all, Cntl-V to paste the new code over top), and then save.
I would encourage you to play around with the CSS in Firebug, to get comfortable with making changes. You might want to refer to the CSS Reference Guide to see all the different types of style selectors that are available to you. It’s a great way to learn CSS and to get comfortable making changes with no worries!
Any questions? Ask in the comments!
[...] here for full [...]
[...] check the full story here [...]
Thank you so much for this post! I have always thought I wasn’t smart enough to do this but now I see, with your easy to understand instructions, that even I can make changes to a theme. I feel empowered! I am going to link to this post so I will always have the information.
Thanks again!
Denise
Great tips, Randa! Thanks so much.
Wow! This is so cool! I always struggle with CSS! Looks like I have to give this a try! Thanks!
Great info, I do like tinkering under the hood, these posts to help me know what I am actually doing under there definitely help.
I have wanted to learn CSS for so long. I have used wikipedia and nearly everything else but it is really unclear. This article helps me (a dummy). Thanks for the great article. Im a frequent visitor. Keep up the great work.
Some times learning by example is the best way.
Love the new design for the site.
Jamie
[...] Clay Design is one of my blogging buddies and she made this great, in-depth and awesomely helpful blog post that teaches you, step by step, how to learn CSS the easy way and customize your blog [...]
What happened to “dofollow”?
Chad – if you’re wondering why links don’t show up as being followed right away, it’s because I have the plugin set to wait a couple of days to follow them, so I have time to moderate comments.
Why does CSS have to be so strict? Why can’t there be a simple config file that looks like this:
background: white
text: black
quotes color: green
link color: blue
That way anybody could update their blog without learning a programming language. Blogs are for people, no?
Randa,
Today I decided to create a “Rainy Day Projects” folder in my favorites. I’ve got this page saved and am determined to learn how to do this. THANK YOU!!
I do have a question. What if your site doesn’t use CSS? Is it hard to implement CSS to a site that is put together by scratch page-for-page?
@Angela- if you’ve got a site that’s just in HTML, with tables, etc. it can definitely be redone in CSS. It can be challenging if you’re new to CSS, but it’s a good way to learn.
Thanks for the information above. Well i started to understand deeper with CSS. Well im a newbie to this field, and it used to mess up my brain. Now i get clearer vision on what to do.
Thanks Randa for the great tipps with the firefox plug-in!
This sounds like such a cool add-on for firefox! I’ve never really done much with CSS, but I’ll be sure to check it out if it’s this easy to play around with and learn! Thanks so much!
Great tip, I have never thought it is so easy ! Jamy
Finding the time is another ball game for sure! That’s why I had to save the examination for a later time.
Great Tips……I always wonder how one can work with CSS easily and thats just seems to be the right way to work with CSS easily.
Once again, Thanks.
[...] and typography can make, so I thought I would make some adjustments to the site (using the great Firebug tool for editing CSS live) to [...]
Damn, this is a good post – just what I was looking for.
This seems like it would be so much easier than going through the steps to configure Dreamweaver to work with Wordpress and edit a theme.
Bookmarked!
Thank you for the lesson. I have been wanting to learn more about CSS and modifying WP themes. Great blog btw..another one to add to my reader.
Hi. Great tip – I just wondered where I can easily play with css without messing something up. Thanks:)
I like this initiative, Randa. Not many designers are open or helpful for beginners like this, and you’ve just introduced me to Firebug. Can’t wait to try this!
Ok, I had to stop back by and tell you that my husband is learning about CSS in his college course that he is taking. How ironic is that!?
I recently found some CSS code and decided to try and tweak it to see if I could do it and I think I was pretty successful at it.
It’s actually my Myspace template at the moment. Eventually I will get this all figured out. When that day comes we’ll have to have a party!
Just wanted to drop you a line and say ‘Thanks!’ for your very cool designs on my blogs. You do good work, Randa!
I have been looking for a quality instructional on how to learn CSS….so thanks a bunch!! It should be easy enough for me to transfer this to actually applying it on my blog but you know how that can go!! Thanks again!
Wow, Randa – thanks for the info about firebug. I had not heard of this before. Firefox has so many add-ons, i haven’t even begun to explore them. This guide is priceless!
This is an excellent guide. I’m working on my own theme myself and will find this page invaluable. Thank you.
Hi Randa-
Thanks for the great tips. I actually implemented DIY on my blog and I’ve been trying to test some minor tweaks out. For some reason the changes don’t seem to be taking. For example, I tried to change the header height and found the place to make the change using Firebug, in the #head section. The change took effect in the preview pane and then when I changed it in my blog’s code, no change. Am I supposed to be making the changes anywhere else except the style.css file? I tried modifying some other themes and I had the same problem. Can you help??
Thanks!
Erika
@Erika- did you get any error message when you clicked the Update File button, like “if this file were editable you could save it”? That can happen if the permissions on the files in your site are not set so that you can edit files. That setting can be changed in your FTP client – change the permissions to 777.
There is no reason it should not have worked. You were in the correct file, and changed the height in the #head section I assume?
Hi Randa-
Yes I’ve definitely got permission to edit the files as I’ve done it in the past. I didn’t get an error message, the change just did not take at all! It’s the strangest thing. I can live without the changes but was excited at the possibility of modifying the CSS myself. I tested it with an alternate theme too.
Hmmm… there’s got to be some reason it’s not working. I assume you’re the Administrator on the site- you have Admin status in your user settings? There is no reason why you shouldn’t be able to make changes to your theme files.
Yes I’m the admin for the site. I really don’t know! What I was originally trying to change was the header so I was going here:
in style.css and modifying
#head{
background-color: #ffffff;
background-image: url(images/headerred.jpg);
background-repeat: no repeat;
height: 180px;
width: 900px;
padding: 0px;
margin: 0px;
I made the height 160 and 140, no change. Should I change it somewhere else? Should I make it much shorter?
The height is actually less important to me, I’d really like to try to create some structure in the comments section with lines of some kind between each comment. That would be more advanced though, once I learn how to do the simpler things!
[...] through a series of posts to help beginners learn to do that. The first post is up at my main site: The easy way to learn CSS and customize your blog theme. I hope it’s helpful! Filed under Themes [...]
[...] So, when it came time to post at the Blog Herald this week, I thought it would be helpful to me to work on a list of solutions for the inevitable slumps that hit now and then. One of my suggestions was to ask readers for help. I especially like to help people solve problems, so I’d like to know if there are any questions I can help answer for you? Any problems I can help you solve? What’s the next thing you’d like me to cover with regards to learning to customize your blog? [...]
I have been looking for this kind of information for a month now! I’ve never even heard of firebug. There is so much to editting css especially when you don’t know what the heck you are doing. It looks pretty easy though the way you explained it. You might not know it but you just made my day! Thanks for the lesson and I’ll be sure to save this page to my favorites…now I will wonder off back into the land of Not-so-blissful ignorance.
Thanks for the help and advice about CSS. I don’t really know how to start coding it from scratch, but who needs to anyway? Just take existing CSS codes, learn how to read it and understand it, then modify it with trial and error, and of course, following after your mentors
Thanks for simplifying this. It is not as intimidating as it seems.
Wow! This is so cool! I always struggle with CSS! Looks like I have to give this a try!
I wanted to learn CSS for so long. I have used wikipedia and nearly everything else but it is really unclear. This article helps me (a dummy). Thanks for the great article. Im a frequent visitor. Keep up the great work.
Excellent guide, Randa. I have tried working to create my own theme now.
Thank you very much for the valuable information.
Thanks for the great tip. I’m trying now to mess with my blog’s theme and other stuff. Hope that I can get it going. Your blog is definitely helping thousands of people! Great job.
Nice tips – as you mentioned in the first sentence I’m always too afraid to mess with the design of our blog in fear of doing something I couldn’t fix. This is a great tool to get around that. Thanks for the tips
A great read for people thinking about leaving tables behind.