Editing the CSS stylesheet of your blog theme can be intimidating. If you aren’t familiar with your stylesheet, messing with anything feels like a task you should leave to someone more knowledgable.
I’m not a blog designer or a coder. Today I’m sharing how to make a simple blog design change that used to really intimidate me. These days, I feel comfortable making much bigger edits (even to the .php file, gasp!) but I wish I had known sooner that some changes (like the accent colors of your blog) are easy peasy.
Often times when you purchase a Blogger template or WordPress theme, the colors are chosen for you or you can select from a few options. If those colors don’t match your branding or there isn’t one you like, making minor changes to the color scheme is easy.
Need help picking a theme? Here’s how to choose a pre-made WordPress theme.
Check Your Terms & Conditions
As I mention in that post, it’s important to take a look at the terms and conditions of the blog designer you are buying a theme or template from. Some do not allow changes unless they are purchased through the designer directly. Many designers will allow you to make minor changes, such as change the color or fonts, on your own without violating the terms and conditions.
Where to Make Changes
You can find your CSS style sheet under Appearance > Editor on your WordPress menu. Lots of complicated looking stuff will come up.
All colors in your CSS style sheet will begin with #. A combination of 3 or 6 numbers will follow, which indicates the color.
3 vs. 6 digit hex codes
A note on 3 vs. 6 digit hex codes: If the # is followed by 3 numbers, that means the 6 digit version of that is each number repeated individually. Like this: #0f0 = #00ff00, #b78 = bb7788, #d89 = #dd8899. Make sense?
These formats can be used interchangeably in your style sheet. For instance, you can remove a 3 digit hex color and replace it with a 6 digit and you’ll be okay.
Find Your Current Colors
So open up your style sheet. Use the Control+F function (Find) and search #. Every color in your template will now be highlighted.
Initially, I like to go through and make a list of all of the colors included in my stylesheet. To figure out which colors are which, you can drop them in to a tool like this HTML color code finder.
What to Change – And What Not To
Your template will more than likely have a grey or black color for the main body font. I’d suggest leaving that as it is.
Any of the other colors of the template are easy to change. For instance, you might want to change the colors of your links on your site. As you look at the style sheet, it will be fairly obvious what you are changing. You’ll find details like .site-title or .entry-title. You might not be a coder but it’s easy to figure out what those are.
Since most designs are fairly cohesive in terms of pops of color, consider picking the color you’d like to replace and putting your new color in all of the places that color was (example below).
Once you determine the color you want to replace a color with (I’d suggest looking through a site like this one or this one to find color combination ideas), do a Control+F for just one color and replace it in every location with your desired color.
For instance, the template for this site is mostly grey with pops of pink. That pink is #ffb1b4.
If I wanted to change that pink in every location on my site, I’d go to my CSS stylesheet and press Control+F and then type in #ffb1b4. All instances of #ffb1b4 would then be highlighted.
If I wanted to replace it with a salmon color, I’d then maybe I’d replace them all with #FA8072.
Click Update file and your changes will be saved. It’s really that easy.
Keep In Mind
Any time I make a change to my theme, I keep a running list of changes in a Word document or note. That way if (God forbid) an edit doesn’t look right, I can change it right back to what it was originally.
Also, your changes may not show up immediately. Clear your cache first. If you still do not see your changes, you may have to wait a few minutes for an update from your websites hosted server.
Though this tutorial is primarily for WordPress users, Blogger’s colors are the same, though the code itself looks different. All of the above should still apply to you.
Making minor changes to my design really intimidated me as a new blogger. Now I feel much more comfortable making changes myself. Being able to make more technical changes has given me a sense of confidence that I truly am in the drivers seat of my blog.
Now tell me, how comfortable do you feel making changes on your blog? What other small changes have you mastered?