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.
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.