Blogger.com Help – Lesson 18 – Fonts and Colors

Fonts and colors. Aside from graphics, fonts and colors are all a web site is made up of right? Blogger provides this administration page to give you the ability to make changes to your blogs font styles and colors. It’s an easy tool to use, and an easy tool to really make a mess with. In this lesson we’ll review the fonts and colors administration page and discover how to make quick changes and how the items you can manage through this page are determined by Blogger.

Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link.

The first thing we should always do when looking at a page for the first time is allow ourselves to understand what the purpose of the page is, and what is made available to us. Before we do though, one great thing about this page is that you can immediately see what your changes will look like. The preview window below the controls gives you instant feedback. If you don’t like what you see, clicking the ‘Clear Edits’ button will reset things back to how they were after your last save. Speaking of which, if you click the ‘Save Changes’ button, you’re changes are…you guessed it, saved. And there is no way to undo your changes unless you manually backtrack each change. So be careful!

The Fonts and Colors Control Area

These things don’t have any formal names, so I’m going to make some up for purposes of this lesson and future reference. From left to right, and top to bottom we have the following controls:

• Item Selector – The item list allows you to select an individual part of your blog. You can see that I have the ‘Text Color’ item selected in the above graphic. Any colors chosen at this point will change the color of the ‘Text Color’ affected item on the blog.
• Colors from your blog – This is a small color swatch (a palette of colors) that identifies the colors found in use on your blog.
• Colors that match your blog – How nice is this? A set of complementary colors to choose from. These may or may not match in your opinion, but Blogger does a pretty good job of matching like colors for you to use.
• More Colors – There is also a way to pick nearly any color you want without having to get into hexadecimal color codes.
• Edit color hex code – Of course, if you wanted to get into a little hexadecimal love (or hell as the case may be), you can always just type in the color in hex. Hexadecimal is way outside the scope of this post, but I’ll drop a link to a great color schemer site that I use from time to time. Any color you pick is identified by the computer through a hexadecimal code. Nearly any program you use (the ones worth using I might say) will give you the hex code for any color selected.

  Oh, if you know the hex code for a particular color, you can enter it here. And yes, the # (pound) symbol is part of the hex code for colors.

• Revert to template default – Unlike the Clear Edits button, this will revert the selected item only, not the entire template. So if you are working on changing the ‘Text color’ and don’t like where things are going, simply hit the ‘Revert to template default’ link and your setting will return to your templates default color value.
• Shuffle blog colors – Feeling spunky? Want to roll the dice and see what Blogger will do to your site without any thought to how things really look? Give this link a click and everything will start changing. Click it again and again to let it cycle through various combinations. Don’t like where things are heading? Hit the Clear edits button to return everything back to normal.
• Pop-out – “Do you pop out at parties? Do you feel unpopular?” I miss watching I Love Lucy reruns, but this has nothing to do with Lucy. The one item I cut from the above graphic is the pop-out link floating off to the right of the screen:
  
  This link will open the fonts and colors control panel in a new window, allowing you to see more of you blog in the original window. Closing the new window will return you administration page to normal.

So with those controls you can modify the colors of text around your blog. But what about the fonts? Yup, there is more to the above than you might realize. Lower in the Item Selector list are font items you can also select. Here is what the font admin items look like.

When you select one of the font items in the list, the associated control to the right change to meet the needs of the selection. In this case we chose a font item, so the controls have changes to allow us to manage the fonts we are using.

There isn’t a ‘revert to template default’ here, so if you need to do the backup ‘beep beep beep’ shuffle, simply click the Clear Edits button to get things back to where they were when you started.

You can spend quite a bit of time on this page playing around with different options and seeing ‘what selections affect what’ on the page. It makes sense to identify what each item in the list controls. Take some time to run down the list of items, and feel free to make changes where you want to, to see what is being affected. You can always back out and return to your normal blog styles by clicking the Clear edits button.

Associated Template Items

The items in the Item Selector list will vary based on the template you are using. Why? Because each template is different, and each one can be modified by the admin’s of the blog. In fact, if you take a look at your template code, the items in this list match up perfectly with the section of template code that looks like this:

I don’t want to get too far ahead of myself, after all the next lesson will cover templates in much more depth than I will here, I simply wanted to make this association known in preparation of the next post.

Also, don’t think that you can add another line into your template and have it magically do stuff in the Fonts and Colors list. While it may show up, there also needs to be a ‘consumer’ of the variable tag as well.

As you will see by comparing the first image in this post to the ‘Edit Template’ image immediately above, the two variable tags I’m showing contain the descriptions ‘Text Color’ and ‘Page Header Color’, and those match up with the first two items in what I’m calling the Item Selector.

The more curious among us will have a field day with this I suspect.

Wrapping it up

We have covered the basics of the fonts and colors administration page in Blogger. You can spend quite a bit of time making changes to the various elements found within your blog, especially after having to identify what you want changed, and then find a color or font change that you will be happy with. We have also learned that the template being used dictates the number of items you can affect on this page as well.

Because each of us could possibly have different names for the items in the list, it’s important to note that this is due to the differences in our templates. I would assume that most of us are using a Blogger template, so most may have similar items, but there is the chance for significant differences in naming or number of items.

At the end of it all, this page is here to help those that would find it impossible or just too time consuming to decipher the template code to make changes that should be quick and simple.

Resources

Fonts and Colors Tag for Layouts
What can I do with CSS?
How do I change the color or fonts in my template?

You might also enjoy these related posts

1. Blogger.com Help – Lesson 19 – Edit HTML Layout There will come a time for those that really get into using Blogger that they’ll want to modify and manipulate their blogger template to do things a little differently than...
2. Blogger.com Help – Lesson 20 – Pick New Template Layout Using the Blogger interface to pick a new template layout couldn’t be any more simple.  This page is by far the easiest to understand, and perhaps one you might never...
3. Blogger.com Help – Lesson 10 – Formatting Settings Blogger.com provides a variety of basic formatting options for you to use outside of modifying your template directly. Items such as dates and times, the default language and how many...
4. Blogger.com Help – Lesson 5 – The Edit Posts Screen Editing your posts is one of those guaranteed tasks that goes along with blogging. In this post, I’ll take a look at the Edit Post screen and identify each part...
5. Blogger.com Help – Lesson 1 – Creating Your Blogger.com Account and Blog Note to new visitors! If you would like to know more about this series or view all available lessons, just follow the appropriate link. Welcome to the First Lesson Greetings...