Georgia Lou Studios

Welcome to the Help Center!

Colors & Fonts (Heyden)

Follow

We include many customization elements in our templates to make all our templates very flexible and customizable. 

This tutorial uses the Sophie Blogger template as an example but many of the options are the same throughout our different templates.

Because the methods used to customize the options are the same throughout the Blogger Template Designer, we will cover the basics and not go through every single option to spare you pages of reading. The basics will give you enough knowledge to work through each options section to customize your template.

View the video for customization directions or see below for Step-by-Step written directions.

Step-by-Step Directions

NOTE: We try to make our templates as easy yet flexible as possible. So, we’ve made it possible to customize your template in 2 ways: you can choose the Beautifully Simple Method or the Complete Customization Method.

Beautifully Simple Method

Customize your template quickly and easily.

Our cascading styles allow you change the look of your blog by changing just a few settings in the Blogger Template Designer. When you change the options below, the rest of the options will change to match.

Because there are so many options to customize on our templates, we generally recommend you start out with this method and then use the Complete Customization Method to fine-tune any template elements you want to change.

To use the Beautifully Simple Method, customize the following Options:

  • Body Background
  • Header – Text Logo
  • Header  – Site Description
  • Simple Color Scheme
  • Main Navigation
  • Body Text
  • Headings Text
  • Post Titles
  • Sidebar Gadgets Titles

Complete Customization Method

Want more control over how your blog looks? This method allows you to customize almost every element within the template.

  • To use the Complete Customization Method, customize the above options under the Beautifully Simple Method and then customize any other of the options as desired.

 

Theme Customization Screen (Customizer)

  1. First, navigate to your Blogger Dashboard and to the Template page.
  2. Click on the orange Customize button under the live image of your website.
  3. The Blogger Template Designer window will open.

 

Upload a Background Image

  1. Click on the Background option at the top left corner of the screen.
  2. A section will open where you can remove the current background image, upload a new background image or use the default background and colors.
  3. To upload a new background image, click on the gray down arrow next to the picture of the current background image.
  4. From here you can select one of the Blogger provided backgrounds or upload your own imageusing the Upload image link at the top left corner of the Select background image box.  Click this link to find the background image on your computer.  You can upload a JPG, GIF, or PNG file up to 300k in size. For a full background, use an image 1800 x 1600 or greater.
  5. Use the Browse button to find your background file then click the Open button. When the file finishes uploading you will see a preview of your site on the screen.
  6. Click the Done button to accept your changes.

Adjust Template Widths

You can used the Adjust widths feature in the Blogger Template Designer to change the width of your blog content and sidebar. (Not available in all templates)

Widths apply to desktop and laptop screen views only. To maintain responsive styles on tablets and mobile devices, widths are set on those screens to preserve readability.

NOTE: The most common computer screen size is 1366px wide. Although you can adjust the template overall width to wider than this setting, we do not recommend it.The best overall content width is 1360px or less and this is also our recommendation.

 

  1. To edit your content and sidebar widths, navigate to the Adjust widths options by clicking on the link in the upper left hand corner of the Blogger Template Designer.
  2. The default settings will be shown for the Entire blog and for the Right sidebar.
  3. To change the widths, drag the slider to the b to make the width narrower or to theright to make the width wider. The live view at the bottom of the page will adjust accordingly.
  4. Alternately, you can type in your desired width into the boxes to the right. Higher numbers = wider content.
  5. NOTE: For the Entire blog width we do no recommend a width wider than1360px. (1366px is the most common width for computer screens). 1500px is the widest width available in our templates. For the Right sidebar width, 490px is the widest width.

 

Background Color

  1. To edit your background colors, navigate to the Advanced options by clicking on the Advancedlink in the upper left hand corner of the Blogger Template Designer.
  2. A new, secondary menu will appear in the upper left hand corner of the Template Designer. Body Background will be the first option in the new menu.
  3. To select an outer, Body Background color, enter a six-digit hex color (including #) in the text box or pick a color using the color-picker to the right. You may also choose from some suggested colors drawn from the general template colors below.
  4. To select a background color for the blog post area and sidebar, or Main Content BG, enter a six-digit hex color (including #) in the text box or pick a color using the color-picker to the right. You may also choose from some suggested colors drawn from the general template colors below.

 

Header – Text Logo

  1. To edit your header, navigate to the Advanced options by clicking on the Advanced link in the upper left hand corner of the Blogger Template Designer.
  2. Header – Text Logo will be the second option on the Advanced menu.
  3. Here you will have a number of options to edit, most often: Header Background,Logo Font, Logo Color, and Logo Link Hover.
  4. To change the Header Background, enter a 6-digit hex color with “#”, pick a color using the color picker or click on one of the suggested colors below.
  5. To edit the Logo Font, use the scrolling menu to pick one of the many fonts included.
  6. You can also Bold or unbold the logo and also change the italics and the font size. This example has a logo font size of 80px. Using the dropdown menu, you can pick fro a variety of font sizes. Note that you can also just type in a font size if you don’t want to use one from the present list.
  7. Next you can change the Logo Color by selecting (clicking on) one of the suggested colors or by typing in a hex color (a six digit color code beginning with a #) or by picking a color using a the color picker. Click on gray arrow next to the hex color box to open the color picker.
  8. Change your Logo Link Hover using the same method.
  9. In this example we have changed the logo font to Josefin Slab, bold, 75px, hex color #ff5d8e, and we have changed the link hover color to hex color #ffaec6 with a header background color of #f2f2f2.  The changes will show live right on the screen as you make them.

 

Header – Site Description

The site description is optional and added on the Blogger Dashboard from the Settings > Basic link.

  1. To edit your header, navigate to the Advanced options by clicking on the Advanced link in the upper left hand corner of the Blogger Template Designer.
  2. Header – Site Description will be the third option on the Advanced menu.
  3. To edit the Description Font, use the scrolling menu to pick one of the many fonts included.
  4. You can also Bold or unbold the logo and also change the italics and the font size. This example has a logo font size of 16px. Using the dropdown menu, you can pick fro a variety of font sizes. Note that you can also just type in a font size if you don’t want to use one from the present list.
  5. Next you can change the Description Text Color by selecting (clicking on) one of the suggested colors or by typing in a hex color (a six digit color code beginning with a #) or by picking a color using a the color picker. Click on gray arrow next to the hex color box to open the color picker.

 

Simple Color Scheme

The Simple Color Scheme options make it quick and easy to change your template colors with just a few clicks. Most templates include 1 or 2 Accent Colors, Link Color options and Post separator line options.

  1. To edit your header, navigate to the Advanced options by clicking on the Advancedlink in the upper left hand corner of the Blogger Template Designer.
  2. Simple Color Scheme will be the fourth option on the Advanced menu.
  3. Edit your Accent Color(s), Link Color, Link Hover Color and Border Bottom (line at the bottom of each post – if applicable for your template). To choose a color, select (click on) one of the suggested colors or type in a hex color (a six digit color code beginning with a #) or pick a color using a the color picker. Click on gray arrow next to the hex color box to open the color picker.
  4. The Live Preview at the bottom of the window makes it easy to see what changes occur when you change the color options.

Menu Styles

The menu styles consist of 5 customization panels in the Advanced Template Designer:

  1. Main Navigation
  2. Drop Down Menu Fonts
  3. Drop Down Menu Colors
  4. Mobile Main Navigation Text
  5. Mobile Main Navigation Colors

For the Beautifully Simple Customization Method, you can simply customize the Main Navigation options as well as the Drop Down Menu Fonts and Colors. The Mobile styles will reflect the main navigation styles unless you customize them otherwise.

Customize the options as describe above in the Header – Text Logo section.

 

Body text

All of our templates include the option to edit the Body Font and Body Font Color.

  1. Navigate to the Body Text panel to set your body text styles.
  2. Customize the options as describe above in the Header – Text Logo section for fonts and colors.

 

Headings Text

All of our templates include the option to edit the Headings Text Font and Headings Text Color.

  1. When you click on the Headings Text panel, all headings in the template will be highlighted with dotted red box outlines – HOWEVER, this setting only applies to Major and Minor headings inside the post content. Logo headings, posts titles, widget titles, etc., are set by their own options.
  2. Customize the options as describe above in the Header – Text Logo section for fonts and colors.

 

Post Titles

In all of our templates, you can customize the Post Title Font, Title Color and Title Hover Color.

Customize the options as describe above in the Header – Text Logo section for fonts and colors.

 

Sidebar Gadgets Titles

In all of our templates, you can customize the Sidebar Widget Title Font and the Sidebar Widget Title Color. In some templates, you may have additional options like Widget Title Border or Widget Title Background.

Customize the options as describe above in the Header – Text Logo section for fonts and colors.

 

Complete Customization Method Elements

Almost every element in our templates are customizable. It’s up to you how much customization you want to do. If you want to change any other elements after you have completed the Beautifully Simple Method, you can customize the following elements. Just follow the instructions as indicated in the Header – Text Logo section.

The elements below are generally available in our template for customization. For most items you will have the option to edit the fonts and/or colors. Your template may include more or less than these options:

  1. Date Below Title
  2. Above Content Gadgets
  3. Above Posts Gadgets
  4. Post Footer
  5. Labels Below Post
  6. Share Post Icons
  7. Author Profile Below Post
  8. Related Posts
  9. Post Comments
  10. Read More Button
  11. Blog Pager
  12. About Me Gadget
  13. Labels Gadget Text
  14. Blog Archive Gadget
  15. Follow Gadget
  16. Search Box Gadget
  17. Follow by Email Gadget
  18. Popular Posts Gadget
  19. Contact Form Gadget
  20. Footer Background
  21. Footer Fonts
  22. Labels Gadget Footer
  23. Bottom Footer (Credits)

 

Add CSS

If you are familiar with CSS, you can also edit your template with CSS in the Blogger Template Designer.
 
We generally recommend this method over editing the CSS in the actual template.
 
If you do edit CSS in the .xml template file, REMEMBER YOU CAN ALWAYS GO BACK AND RE-DOWNLOAD THE ORIGINAL FILE FROM ETSY.
 
NOTE: We cannot offer free support to fix issues that arise if you edit the code in our original template.

 

Save your changes

DON’T FORGET TO SAVE YOUR CHANGES!

Click the orange APPLY TO BLOG button in the upper right hand corner of the Blogger Template Designer window to save all your new changes.

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk