• Business + Productivity
  • Creative Projects
  • Recipes
  • Behind the Scenes
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

Tauni Everett

Celebrate Every Day

Tauni Everett » Business + Productivity » Blogging » Blogger » Easy Blog Design Tips

Easy Blog Design Tips

10 24 2011 9 13 20 pm 300x196A 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.

10 24 2011 9 16 06 pm 300x292What 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.

10 24 2011 9 46 00 pm 300x154I 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

 

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

Blog Design Tips and Resources

Five Tips for a Successful Blog

5 Tips for Blog Conference Sponsorship


Parts of a Blog and Tutorial Roundup


Interior Design: Family Room Design


A new BLOG DESIGN…plus, a new feature!


Interior Design: Great Design in Small Spaces


Design Your Own Pumpkin | Black & White Halloween Party Blog Hop Party Activity

Author Bio
Article Info
Popular Posts
Snap

Snap

Editor at Tauni Everett
    Author Bio Box by HOI
    Author:
    Snap
    Categories:
    • Blogger
    • Blogging
    • WordPress
    Mentions:
    Blogger, Blogging Tips, Branding, WordPress
    Keywords:
    easy blog design tips
    Last Updated:
    November 14, 2018
    • Show + Tell 318
    • Show + Tell 317
    • Show + Tell 316
    • Show + Tell 315
    • Show + Tell 314
    • Show + Tell 313
    «
    »

    Blogger, Blogging, WordPress 12

    Comments

    1. Mandy @ Sugar Bee Crafts says

      October 25, 2011 at 8:00 am

      I never knew this – – great post!

      Reply
      • Sarah - Tech 4 Moms says

        October 25, 2011 at 8:05 am

        Thanks! Most people don’t, that’s why it’s a super secret tool. 🙂

        Reply
    2. amy says

      October 25, 2011 at 12:39 pm

      Great post! Have you ever used firebug? It looks very similar to this and you can use it in Firefox or Chrome. Love it!

      Reply
      • Tauni says

        October 25, 2011 at 10:52 pm

        Bwahaha. Amy. Ever the Firefox fan…Join the dark side.

        xoxo
        Tauni

        Reply
    3. Shondra W. says

      October 25, 2011 at 3:46 pm

      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!

      Reply
      • Tauni says

        October 25, 2011 at 10:52 pm

        Shondra, you and me both! I am so glad we have friends like Sarah willing to share these little tips 🙂

        xoxo
        Tauni

        Reply
    4. Cynthia says

      October 26, 2011 at 9:07 am

      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!

      Reply
      • Sarah - Tech 4 Moms says

        October 26, 2011 at 9:14 am

        ohhh don’t even THINK those words! boooo Blogger! 🙂 WordPress is the ONLY way to go!

        Reply
    5. Shalini says

      December 3, 2011 at 5:39 am

      Thanks for sharing!! Really Nice post

      Very clearly describing CSS so that its become easy to understand it..

      Reply
      • Tauni says

        December 6, 2011 at 11:33 am

        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

        Reply
    6. Wendi says

      May 18, 2013 at 10:29 pm

      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

      Reply
    7. Gaurav Ghosh says

      April 17, 2015 at 8:43 am

      Great Post I saw in your website . I read all the information given on your article it really helpful.

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Recipe Rating




    Featured Posts

    Moderate Value Disneyland Area Hotel

    Moderate Value Disneyland Area Hotel for Large Families

    Anaheim Marriott Hotel Review 1

    Anaheim Marriott Hotel for Disneyland Guests

    Courtyard Marriott Best Hotel within Walking Distance to Disneyland for large families

    Best Hotel in Walking Distance of Disneyland for Large Families

    Best Value Hotel Within Walking Distance of Disneyland

    Best Value Hotel Within Walking Distance of Disneyland

    WordPress Hosting by House of Ideas

    Copyright © 2022 SNAP! Creativity · Design by: Key Lime Digital Designs· Darling Theme