Customize and Create Templates

 Customize and Create Templates

Georgia Peach has reviewed what she wants to do with her blog. Now she is ready to start by fixing the visual appearance of her blog. Georgia says the default blog is boring. She wants an exciting new look that fits her company.

Making a custom template is like throwing a party, which involves some planning to be a success. We have to decide the theme, food, drinks, decorations, guest list, location, and invite the guests before we can have the party. To create a custom template we need to decide on a theme and then prepare a layout to act as the location on which we will hang our presentation elements such as images, fonts, and colors.

You will learn how to use Blogger and design techniques to modify an exciting custom template. Specifically, in this chapter we will:

Learn to change default templates without coding.

Plan the visual presentation and behind-the-scenes layout of the template.

Find resources for images, fonts, and codes on the Internet.

Choosing a Theme

"I have lots of ideas about how the template should look", Georgia announces, "bright groups of fruits, some of it floating in the background…".

A template is more than just pictures; it also organizes and presents the contents of a blog in a meaningful way. Let's start by deciding the theme for the blog.

Customize and Create Templates

Themes help us focus on our goals. The theme will help us make decisions about the look and feel of the template. We can use the theme to: Set the tone of the blog to be friendly, whimsical, serious, or formal.

Use existing logos and other company materials for color palettes, tone, and image assets.

Guide our choice of fonts.

Limit the color palette.

Choose an artistic direction for images.

Georgia's company has a friendly, open personality with an emphasis on high quality fresh fruits. The images, fonts, colors, and text used on her blog should reflect her company's fresh and funny personality. We also want to use the existing logos, fonts, and colors, wherever they fit.

Presentation—It's About the Visual Things

The presentation or visual assets of the template should be separate from the layout structure. The visual assets include logos, background gradients, illustrations, and any other images that are part of the template. They leave a visual impression that readers will remember. We will leverage the visual impact of the blog to serve the following purposes:

Attract visitors

Enhance the message of the blog

Build the brand by using the logo, fonts, and colors of the company

Georgia agrees that she wants her blog to reflect her company's values of quality and service, without being stuffy. The images should be funny and whimsical.

The colors used on the blog should be pulled from the company's logo or should complement them.

The fewer colors used in a design, the more professional and unified it looks. Limit your color choices and the focus will be on your logo and content.

The blog will use white as a background for large bodies of text and accent colors of green, red, yellow, and dark grey. Sans serif fonts such as Arial will be used for Attraction. 

Changing Blogger Templates without

Code

Georgia wants immediate changes made to her blog. She wants to experiment with

fonts and colors to narrow down what she wants to use on the custom blog.

"This reminds me of the time I bought a bunch of generic shipping supplies when

my printer messed up my custom order", she tells us as she logs into her blog, "My

shipments of fruits looked nice, but I missed the custom colors and designs".

There are many changes that can be made to a blog without code. Let's see what we

can do to make changes to Georgia's blog right away. We will edit the page elements,

experiment with moving them around, and make changes to the basic fonts and

colors of the blog.

Use the Test Blog

Let's create a new blog (http://fruitforalltest.blogspot.com/) to test the

template changes before we apply them to our live blog. It's always a good idea

to have a test site. Even though Blogger has many places to preview changes, it is

better to work on a test site so that changes aren't made accidentally and go, live on a production site.

Customizing Page Elements

The exact same template of TicTac by Dan Cederholm, is on the test site. Georgia clicks the Customize link on the Blogger navigation bar at the top of her screen to bring up the Page Elements section under the Layout tab.

"Can I drag my Blog Archive and About Me page elements to the left side as I can't seem to do it on this screen?", asks Georgia.

The current template Georgia is using only allows page elements to be added to the footer or to the righthand side of the layout. Choosing a default template with a sidebar on the left hand side will allow her to add page elements on the left.

If she wants the ability to add page elements to either side of the blog on the Page Elements screen, she will need a three-column template. We will create a three-column template later on in this chapter. You can see the Page Elements screen in the following screenshot, which displays all the areas where page elements can be added to the blog. The navbar and header page elements at the top are static.

Chapter 10—Hacking the Template, will allow us to add an additional navigation block. Adding widgets to the footer section of the blog is done by clicking the Add a Page Element link in the Page Elements block at the bottom of the layout.

We can see that the Blog Archive and About Me page elements have already been added by default to the right side of the template layout. The elements can be dragged and dropped, up and down, to change their order. The Blog Posts page element is another static page element. The Blog Posts element can be configured by clicking the Edit button. It cannot be moved to a different area of the layout without altering the template.

Each blog has a default layout. Most Blogger templates have page elements on either the left or the right side of the Blog Posts page element. These left and right columns are commonly called sidebars. Hopefully, in the future, they will change it so that all default blog templates allow you to rearrange the page elements exactly where you want them. "Well, I chose this template originally since the sidebar is on the righthand side.

What other things can I do here?" asks Georgia.

Managing Page Elements

We can edit the page elements we already have, add more, and remove the ones we don't want. All the page elements are managed the same way. To edit or remove a page element, first click the Edit link on that element. Elements are added by clicking the Add a Page Element link in one of the layout blocks. We can see the Add a Page

Element block on the right sidebar and one at the bottom of the layout area for the blog footer.

Time for Action!—Editing the Navbar Page Element

The navbar is the top page element. You may have noticed it above your blog and the blogs of other people who use Blogger. The color of the navbar can be changed to any one of the four color schemes: Blue (the default), Tan, Black, or Silver.

1. Log in to Blogger (http://www.blogger.com) and click the Layout link.

Click the Edit link in the Navbar. The Navbar Configuration screen will appear as shown in the following screenshot. Note that each color choice has a radio button to the left.

2. The first option, Blue, is selected by default, but Silver will match our template better. We can always select a different color.

3. Click the SAVE CHANGES button to save the new navbar color. You will have the option to view the blog when you return to the main Page Elements screen.

4. The navbar is now a neutral color that won't distract visitors from the blog.

That was a very quick and easy change with drastic results. The navbar now looks like part of the template. The blog already looks much more professional.

What Just Happened?

When we clicked on the Edit link of the Navbar page element, we were able to change the appearance of the navbar above the blog. When a different color theme was selected, and saved for the navbar on the Configure Navbar screen, Blogger processed the setting change. Visitors viewing the blog from that point on saw the silver navbar at the top of the screen, above the blog header.

Editing the Header Page Element, Title, and Description

We can change the title of the blog, the description, and even place our own image in the header section of the blog. Adding images can be tricky with some of the templates. We will experiment to see how different templates display images and text placed in the header area.

Time for Action!—Changing the Header Text

If you have created your blog on the spur of the moment, you may not have taken the time to create a description. Adding a brief description will make it easier for potential readers to find your blog. Let's change the blog title and add a description.

1. First click on the Edit link for the Header page element. A Configure Header window pops up just like the one shown in the following screenshot. Note that there are separate text fields for the Blog Title and Blog Description.

There is also an area to add an image to the Header, from either your computer or from a link on the Internet.

2. Open the edit window by clicking on the Edit link in the Header page element.

3. The Blog Title field displays the current title of the blog. We'll add Seasonal and shipped to you! at the end of the title text.

4. The Blog Description can hold a paragraph about the blog, such as, A delicious test of high quality seasonal fruits! We ship organic seasonal fruits of the highest quality directly to your door.

5. Click the SAVE CHANGES button to save the text edits made to the Header page element.

What Just Happened?

The Configure Header screen form accepted the text we typed and then passed it to the Blogger site code for processing. When we changed the Blog Title and Blog Description using the Configure Header screen, Blogger responded by changing the settings for the blog in the template and the site code.

Think carefully about what you include in the Blog Description. It should contain keywords to help potential readers find you. It should also be as short as possible and should be different from the Blog Title. Many people use this space for a tagline, or a short message about the purpose of the blog. Let's view the blog to see the changes we have made so far:

The Blog Title is a little long, but very descriptive. We could probably cut the descriptive text down to make it more effective. We decide to leave it for now since we can always change it later.

You can also change the Title and Description from the Settings Basic page.

Replacing the Header Image

Georgia likes being able to change the Header text, but wants to add her own image too. She wants to discover whether the Header image in the template can be replaced from the Configure Header edit screen, and we have agreed to give it a try. We have an image to experiment with the exact height and width of the image in the blog template. The height and width can sometimes be found by right-clicking on the image while viewing the blog. Most default templates are background images. So the best way to discover their height and width is by logging into Blogger, clicking on the Layout link, selecting the Edit HTML tab and then scrolling to the template code for the #header-wrapper style.

Time for Action!—Adding an Image to the Header

We're going to add an image to the header of our blog by editing the Header page element. We will upload an image file from our computer using the form within the Configure Header window. You should have an image optimized for use on the web ready to go. A sample image is available in the code folder for this chapter at (http://bloggerbeefedup.blogspot.com).

1. Log in to Blogger and click on the Layout link in the Dashboard to open the Page Elements page. Then click the Edit link in the blog header to open up the Configure Header window.

2. Select the radio button option next to From your computer then click the Browse button to choose an image. We'll use the image ffa_header_orig.gif from our Chapter 02 code files. A yellow triangle with an exclamation mark will be displayed as the file is uploaded, just like the one seen below. If it takes more than a minute, cancel the action, and then try to upload the file again.

3. Once the file is uploaded, you will see a copy of the image you have just uploaded in the Configure Header window.

4. You can decide whether you want the image to display Behind the title and description, or Instead of the title and description by selecting your choice from the Placement radio group. The following screenshot shows a preview of the image with the placement of the image set to Instead of title and description.

5. Click SAVE CHANGES and then clear your browser's cache. If you do not clear your cache, you may not see the changes you have made. Click View Blog to see what has happened.

What Just Happened?

Whoa! That did not go well. Take a look at the results above. Instead of placing the image exactly over the other template image, the template code caused the new image to display over to the right. This was not the effect we were going for. Before you upload an image, check the size of the header-wrapper. It can be found by navigating to Layout | Edit HTML and then scrolling down the template code in the Template text area box. A logo or other visual element will work best here if you don't want to take the time to match the size of the header-wrapper. You can resize the image you want to use with an image tool like Ifranview (http://www.irfanview.com/). The only way to accurately replace the header image used in the TicTac template is to edit the HTML code. We'll tinker with the code later in the chapter.

Changing Blog Templates

Some templates are more suited for custom header images than others. Let's see the effects of changing with a different template. The best template for customization is currently the Minima template. It has no template images or other add-ons that can get in the way.

Time for Action!—Picking a Customizable Blog Template

Let's make things easier on ourselves by picking a template that is easier to customize. One quick word of warning—you will lose all your current page element widgets, unless you back up the current template first. You can then copy and paste them back into your new template.

1. Go back to the Layout tab and click on the Pick a New Template menu item.

We'll try a simpler template this time. The Minima template is very clean.

There are no extra images on this one.

2. Click on the Minima template image. A box will appear around the template image. The original version of Minima is chosen by default. Click the SAVE TEMPLATE button to finish switching templates. You can use the following screenshot as a guide while navigating the Pick New Template window:

3. Now let's view the blog and see if a new template makes a difference. Well, it looks like the new template helped. It doesn't quite fit in the borders of the header. Georgia thinks reducing the image width will make it fit.

You may not experience the same results we did. Blogger is constantly updating it's code. If your header fits perfectly using the Minima template, you can skip the next steps.

4. The header section of the Minima template is 660 pixels wide. Using an image that is 652 pixels wide should fit better. Let's try this once more.

Upload the image named ffa_header.gif from the code folder. Your settings on the Configure Header window should be the same as those shown in the following screenshot.

5. The Placement should be set to Instead of title and description. Click SAVE CHANGES and view the blog. You can see an example of how it would look in the next screenshot.

What Just Happened?

When we selected a different template that did not have links to external images, we gained more control over the look and feel of our blog.

"Looks like we just needed a simpler template to pull it off. I knew it could be done", says Georgia proudly as she hands us glasses of homemade raspberry lemonade.

You can keep the same template if you check the width of the header in your template code or resize the image to match the width. If you are in a situation where the template you are using has too many graphical elements and you would rather start with a clean template, use Minima.

"Can we do something about that text?" asked Georgia, squinting at the new template. "I want to use the same text that we had on the other template."

Luckily for us (and Georgia) the fonts used in the template can be changed from the Fonts and Colors section under the Layout tab.

Changing the Fonts and Colors

"I hope this is as easy as you said it's going to be," sighs Georgia, "getting the new header image to work was almost as painful as picking wild blackberries."

The good news is the Fonts and Colors section is very visual and easy to use. The bad news is… "I knew it," Georgia grins, "what's the catch?"

…the font choices are limited to six main web safe fonts. If you want to use other fonts, you'll have to specify them in the template code. We'll cover how to do that later in this chapter.

Time for Action!—Picking Colors with the Fonts and Colors Editor 

The Fonts and Colors editor is easy to use once you get used to it. The template items whose color can be changed are listed in the menu box on the left side of the screen. Three different palettes help you keep track of the current color palette of your blog. Let's try changing colors to get comfortable with the editor.

1. Log in to Blogger and select Layout from the Dashboard. Choose the Fonts and Colors tab under the Layout tab. Once you've clicked on the Fonts and Colors menu item, you will see a list box on the left and a color picker on the right, as shown in the following screenshot.

2. Click on the Page Background Color item in the list menu. You will see the current color is in a small square just to the left of the item name. Pick a different color by selecting a color chip from one of the three menus: Colors from your blog, Colors that match your blog, or More Colors.

What Just Happened?

When you highlighted a listed item in the left menu, and then selected a different color choice from one of the three color menus, the color values also changed within the template code. Each item listed in the left menu has its own variable defined in a tag at the top of the template. We will edit those variable tags next and add our own new tags later in this chapter.

Choosing High Contrast Text Colors Soft, blended colors for text may look great in glossy magazine ads, but they don't work well for blogs. We'll pick a darker text color that will be easier for visitors to read. You can pick a color by selecting the color boxes, but that limits you to what Blogger shows you. Did you notice the Edit color hex code box to the right of the color blocks? It shows an alphanumeric code for any color you pick. It specifies a specific color from the RGB color palette using a pound (#) symbol followed by a combination of six alphanumeric characters. The RGB color palette is represented by two characters for red, two for green, and two for blue. This system of characters is known as the hexadecimal color code or hex code for short.

Time for Action!—Changing the Text Color Using

Hexadecimal Code

When deciding on a template for this book, I chose high contrast colors that would show up well in print for all the text. We're going to choose high contrast colors to make reading the blog easier on our visitor's eyes.

1. Highlight the Text Color item in the list box. The hex code field on the right now displays the hexadecimal code of the soft dark grey color, #333333.

2. A darker color is what we need. Highlight the characters in the Edit color hex code text field and Type #000000, and then hit the Enter key on your keyboard. The overall text color for the blog has now been changed to black.

A preview of the change is displayed instantly, in the preview window below the editor.

3. Repeat the steps for any other text colors you want to change. Georgia chooses a red (#cc0000) for the sidebar title and text color, and a green (#73a92b) that matches the header for the links. She changes the Visited Link color to a dark green (#1B703A) so that readers can quickly see the links they have already followed.

4. Click the SAVE CHANGES button to finalize the edits. Clear your browser's cache and then view your blog.

What Just Happened?

When you entered a new color for the Text Color in hexadecimal format, Blogger processed the hexadecimal code and displayed the new color choice in the list menu, the Colors from your blog menu, and within the blog preview pane. Once the color choices were saved, the Text Color variable tag in the template was set to a new value.

The contrast is much better now. If readers want to print a recipe or other interesting posts, the text will show up better on paper, too.

Matching the Font to the Blog

When she was done playing with the font colors in the editor, Georgia commented, "changing the colors wasn't hard at all; it was actually fun. I liked seeing the colors change in the preview window below the editor."

You can preview the font changes too, scroll down the list menu and we'll show you.

Time for Action!—Changing Template Fonts with the Fonts and Colors Editor

It may be a little confusing having the colors and fonts of the blog on the same list, but that's where they are. Scroll down the combo box to find the areas of the blog where the font can be changed. Let's make a few changes to the current font settings to get a feel of how it works.

1. Start by highlighting the font item in the list menu on the left. The Text Font item is first. So, we'll go ahead and select it.