A couple weeks ago Tauni talked about how your blog is like a house and one of the reasons was the need to redecorate.
Sometimes a color is wrong, and sometimes you just want to change the entire design. I definitely understand this feeling, as I just re-designed all of my blogs AND my sister’s blog, because I just couldn’t stand looking at them any longer!
I’m going to let you in on a little secret that helps me make easy blog design tweaks and believe me, you’re going to LOVE this! Especially if you know a little bit about CSS.
Before I get into the super awesome secret part, let me explain what CSS is. CSS stands for Cascading Style Sheet. It’s basically the blueprint for your blog or website.
Each element of the design is usually defined in the CSS file. Now, I won’t get into a full tutorial of CSS elements, but I promise to write a great CSS guide soon.
Say you’d like to change the color of the text for your post titles. Sounds simple enough, but if you don’t know your way around the CSS file, it can look a bit like Greek.
When I face this situation I pull out my secret tool, and I can find exactly the correct element in my CSS to change.
1. To get this tool, first you need to install Google Chrome. It’s a web browser like Internet Explorer and Firefox (only BETTER!). Plus it’s FREE!
2. Open your website in Google Chrome.
3. Right click on the element of your page you want to change. (color, position, spacing, anything you want to change).
4. Select “Inspect Element” from the drop down list that appears.
What will happen next is a little window will appear on the bottom that has your site’s code on one side of the screen and the CSS elements on the right side of the screen.
The very top will be the direct element you had right clicked on. In this example, you can see that the font color for the element is #AAA (which is grey). You can also see which CSS file you will need to edit (in the case of the included image it’s style.css) and the line that this particular element is in (line 295 within the style.css file).
You can also see that what you will be looking for in the CSS is where it says #featPosts. As soon as you find #featPosts in the CSS file you can change the color from #AAA to #FFF if you want the color white. Here is a good list of the color codes.
If what you want to change simply needs to be nudged over a little bit, you can play with the padding or margins of the element.
Margins and padding is listed in the following order … Top, Right, Bottom, Left.
So when you see something that says padding: 0 10px 5px 0; that means there is no space between that item and the previous item, a space of 10 pixels to the right of the element, a space of 5 pixels on the bottom and zero space on the left.
Before you change anything drastic I would copy the current element and paste it to a notepad file so you have a backup in case the change you make destroys the entire layout.
I also use the “inspect element” feature to find errors in my coding, such as a <div> that is misplaced. As you hover your mouse over the code on the left side of the inspect element tool you will see the various pieces of your blog highlighted in blue. You can see if one part is running too far into another, or you can see where the spacing could be off.
Now you should be able to move some furniture around in your “house” without the need to hire a professional “decorator.” If you get in over your head, just let me know, so I can help you out!
Sarah is a diehard Microsoft and Dell fangirl and former IT Manager, who now spends her busy days taking care of two small children, consulting with technology companies and sparring with Apple fans.
Sarah helps bloggers resolve site and server issues and blogs at Tech for Moms and Organized Mom.
Related Posts
I never knew this – – great post!
Thanks! Most people don’t, that’s why it’s a super secret tool. 🙂
Great post! Have you ever used firebug? It looks very similar to this and you can use it in Firefox or Chrome. Love it!
Bwahaha. Amy. Ever the Firefox fan…Join the dark side.
xoxo
Tauni
Wow…this helps so much. I don’t know how many times I’ve scrolled through the entire coding looking for something teeny to fix. This will help me a lot.
Thanks!
Shondra, you and me both! I am so glad we have friends like Sarah willing to share these little tips 🙂
xoxo
Tauni
And here I was thinking of dumping WordPress for my garden blog and going back to Blogger because it’s so confusing to deal with the css stuff. This will be VERY helpful for me! You’d think being married to a Software Engineer would grant me access to all the tech help I’d need! HA! Thanks so much for the tips- now I’ll have to go follow your blog so I can upgrade my WordPress blog the way I want it!
ohhh don’t even THINK those words! boooo Blogger! 🙂 WordPress is the ONLY way to go!
Thanks for sharing!! Really Nice post
Very clearly describing CSS so that its become easy to understand it..
Shalini,
Thank you for your nice words. The blog design tips have really helped me to make some small tweaks to my own blog!
xoxo
Tauni
Hi! So I’m trying to figure out how to change fonts on my website, and I’m hoping that I can figure it out with your awesome info you have here, but your photos aren’t showing up on my computer, or my neighbor’s (I went and checked on hers too)… can you help? I feel like the photos would really help me!
Thanks so much!
– Wendi
Great Post I saw in your website . I read all the information given on your article it really helpful.