Georgia Lou Studios

Welcome to the Help Center!

Colors & Fonts

Follow

We include many customization elements in our templates to make all our templates very flexible and customizable.  This tutorial uses the Finley 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 Theme 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.

Watch the video or see the written directions below.

Theme Customization Screen

  1. First, navigate to your Blogger Dashboard and to the Theme page.
  2. Click on the orange Customize button under the live image of your website.
  3. The Blogger Theme 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.

 

Edit the Header/Logo

  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. If your Header is customizable, the first option under the new menu will be Header.
  3. Here you will have a number of options to edit, most often: Logo FontLogo Color,Logo Link Hover, and Description Text Color.
  4. To edit the Logo Font, use the scrolling menu to pick one of the many fonts included.
  5. 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.
  6. 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.
  7. Change your Logo Link Hover color and Description Text Color using the same methods.
  8. 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, and the description text color to #000000.  The changes will show live right on the screen as you make them.

 

Menu Styles

The main navigation customizable options generally include: Navigation Font, Navigation Text Color, and Navigation Background Color.

Your specific template may or may not include these options or may include additional options. For example, the Finley template also includes an option to customize the Border Bottom Color, the colored line beneath the menu.

Customize the options as describe above in the EDIT HEADER/LOGO section.

 

Body text & Sidebar Titles

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

In most of our templates, you can edit the Post Title Font, Post Title Color, Sidebar Widget Title Font and Sidebar Widget Title Color.

Your specific template may or may not include these options or may include additional options. For example, the Finley template also includes an option to customize the Widget Title Border, the colored line beneath the widget title.

Use the methods described for editing fonts and colors as described above in the EDIT HEADER/LOGO section.

 

Customize the Labels Gadget

All of our templates include custom styled label gadget tag clouds. These label gadgets can be customized using the Blogger Template Designer.

The customization options generally include Labels Background, Labels Text Color, Labels Background Hover, and Labels Text Hover Color.Your specific template may or may not include these options or may include additional options.

Use the methods described for editing colors as described above in the EDIT HEADER/LOGO section.Your template may include some options for further customizing the template’s color palette.

 

Edit Color Palette/Scheme

The customization options generally include: Link ColorPost Labels Color, and more.

Your specific template may or may not include these options or may include additional options.

Use the methods described for editing colors as described above in the EDIT HEADER/LOGO section.

Other Customization Options

Your template may include other Customization Sections like:

  • Read More Button
  • Posts Footer Font
  • Footer
  • Body Background Color

You can edit these sections for font and colors as described above in the EDIT HEADER/LOGO section.

 

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