Tuesday, November 9, 2010

Ask Candy: Changing your blog header styles

Hey there, it's Candy! I took a couple of weeks off from "Ask Candy" as my plate was a bit full, but I'm back! This week we have another question comes from Angela Flicker from The Artists' House. She's a quilter and the gal behind "A Crafty Holiday".
I'm new to wordpress and often the littlest things take me forever to figure out. Here's one question I have: What if I want to change the font size of my title?
You know, this is an excellent question, and I've got a 2 part answer for you. But first off, I don't want to ignore you blogger bloggers. In the version of blogger Linda runs her site on there is no way to specify styles within the post. You have to use the tools circled on the toolbar indicated in the picture below to change your text font, size, color etc. (Are there versions of Blogger where you can easily specify styles? I don't know!)

The problem is, let's say you'd like to always have a certain subtitle of your text Bold, Italic and a pretty shade of turquoise. Using the text formatting tools you've got to make 3 different changes, each time you'd like to use that particular format. Enter styles. Styles are a way to create a group of text formatting and add it all with one action. I believe what Angela is asking is how can she change her header style.

First, let me show you how you can apply header styles in Wordpress. You have to make sure you're using ALL the formatting tools that Wordpress provides you - it's called "showing the kitchen sink" - press the button circled below when you're editing a post:
Once you've turned on the kitchen sink all sorts of options appear - what you want is the dropdown box on the left of the second row of buttons. When you click on it you're provided with 6 levels of Headings, although you shouldn't really use the Heading 1 style within a blog post - which means you've got 5 levels.
Once you've given your title or subtitle its style it will show up bold and a different size from your paragraph text in the editing window, but what it actually looks like depends upon the CSS for your particular theme. A theme takes your content and lays it out in a particular way, and styles the text a particular way.

So, Angela, what I think you were really asking me was "how do I edit the CSS for my theme so I can make my titles look different?" CSS stands for "Cascading Style Sheet" and it's the type of programming used to make text look pretty on the internet. The theme that you use basically has a bunch of this CSS that makes your blog look the way it does. In order to see all the different styles you can (easily) change on a post or page, it helps to have a sandbox post. What's a sandbox post? It's a post you use that has a whole bunch of formatting in it, so you can easily see what happens when you change an element of your CSS. Lorelle of the blog "Lorelle on Wordpress" has a great sandbox post here. You can copy her code which she so graciously provides and paste it into a new post on your blog (make it private, or give it a publish date of a long time ago so you don't confuse people who arrive at your blog). Now you can see what all those styles the kitchen sink gives you the ability to apply look like in your template.
See how different they are? Awesome! So, editting CSS - it's not rocket science, but it also is not for the faint of heart. I was able to mess with the CSS of my site back when I first started to care about this, but I found it a bit daunting at times. There's no way I'm gonna walk you through that - but this Wordpress Codex article here is a fabulous place to start.

When I really got the itch to start making my site uniquely my own, I started looking around at lots of different themes. I ended up choosing Headway, which is a premium theme that allows me to make all sorts of changes to my site WITHOUT using CSS. I wrote all about why I chose it and why I love Headway here.

Angela, I sure hope this answers your questions...and I challenge you to take a look at your theme stylesheet - just for the heck of it...maybe you'll make a CSS tweak or two. Remember, you can't break the internet...but it's always a good idea to back stuff up before you get started! :-)

[Candy lives in California with her husband, 2 boys, and dog. Aside from being wife, mom, teacher, crafter, web guru and all around doer extraordinaire she manages her own business, Candied Fabrics. You can read her blog here.]


  1. Thanks, Candy! As always, this is very informative.

    For Blogger users, one can change their blogger header in a number of ways. In the dashbooard go to design and you can find a template design that allows you more editing capabilities. Of course, if you know html, you can change headers there. I know my own template allows me to at the very least choose font and font size.

  2. Wow, that's some great information. I need to reread those links you suggested again and hopefully I can figure some of this out which will give me more freedom with my site. Thanks Candy! You're the best!

  3. I use the WordPress platform for my own blog but changing title header and other formatting styles in Blogger is simple and straightforward.

    Dashboard>Design>Template Designer>Advanced takes you to a menu where you can change the font, font size, background and text colour for numerous elements including links; Blog title; blog description; navigation tabs background; navigation tabs text; the date header and the post title.

    Blogger makes it easy to customise your blog without knowing any HTML or CSS.

    Just remember to save your template layout BEFORE experimenting with new designs. That way, you can always return to your current layout if desired.


I love reading your comments! Got a question, email me. If you like my blog, please subscribe to my RSS feed.

Related Posts with Thumbnails