Google Sites: Build Your Own Theme (Pt. 2)

By | July 31, 2011

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Last time, we finished with a very plain looking Google Site with horizontal navigation to a few dummy pages:

In this post, we’ll select a color scheme, and customize font and background colors on the Google Site.

Selecting a Color Scheme

I’ve found Colour Lovers to be a very good site for getting ideas for web friendly color schemes. I usually start with the most loved or most viewed palettes, and choose one with good contrast. These colors may be used for background, unvisited links, visited links, content headers, or body font. Any palette that includes white or something close to white is ideal (as it will make a very easy background color).

For the purposes of this demo, I selected Making Coffee by Tzadkiel.

I will try using the brown color (#4E3F30) for body font, the bluish color (#0CA5B0) for the header font and links, and the off white (#FEFEEB) for the background, and perhaps grey (#A5B3AA) for the horizontal navigation bar and visited links.

To set this up, I open the “Manage Site” menu (type g then m), and click on “Colors and Fonts” under Site Appearance.

Here, you can customize the colors of every part of your Google site. First, we change the Page background color to our desired color.

You can see a preview of the color scheme at the bottom of this window. It is static, and therefore won’t show any “hover” colors, but it should give you an idea of whether you’re on the right track.

You will likely want to change the following colors as well (I included colors used for the demo):

  • Page link color:#0CA5B0
  • Page visited link color: #A5B3AA
  • Content text color: #4E3F30
  • Horizontal navigation text color:#FEFEEB
  • Horizontal navigation hover text color:#A5B3AA
  • Horizontal navigation background color: #A5B3AA
  • Horizontal navigation hover background color (same as background):#FEFEEB
  • Horizontal navigation selected text color: #A5B3AA
  • Horizontal navigation selected background color (same as background):#FEFEEB
  • Horizontal navigation dropdown text color: #A5B3AA
  • Horizontal navigation dropdown background color: #FEFEEB

 

To minimize the visual impact of minute misalignment of the header and Google Sites elements, I’ve had the most success using the page background color for any hover or selected background colors in the horizontal navigation menu (example: Google Sites in Chemistry)

So here’s the site with the new color scheme.

I’m already regretting my color choice, but we’ll see if the header helps. In the next post, I’ll show you how to use GIMP to create a simple custom header.


4 Comments

Pingback: TEACHING|chemistry

Meredith on May 4, 2012 at 2:29 pm.

Thanks so much! This series is really helpful!!!

Reply

Matt Galloway on October 26, 2012 at 1:30 am.

Your site looks great. I was looking for info on changing themes and colour schemes but was happy to also find a beautiful layout.

Reply

Kevin on November 18, 2012 at 5:47 am.

Thanks for sharing these helpful pages, tho I wish I’d found them before I started my site – they would’ve saved me hours of frustration. I’m sorta happy with my site (meaning living with the couple of site annoyances) but may very well follow your example and redevelop later on – cheers!

Reply

SAY|something

Your email will not be published or shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



UA-21712927-1