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

By | July 31, 2011

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

First, I made some adjustments to my color scheme. Instead of the off-white color (which looks weird), I went to Manage Site > Colors and Fonts and changed the following to white (#FFFFFF):

  • Page background color
  • Horizontal navigation hover background color
  • Horizontal navigation selected background color
  • Horizontal navigation dropdown background color
After Clicking “Save changes,” the site looks like this:

Insert Header (page wrapper)

Return to the Manage Site > Colors and Fonts menu, and select “Page wrapper background image”
Under “Choose a background Image,” click “Choose File” and locate the image you just created in GIMP.
The image will be off vertically and horizontally. To fit the horizontal alignment, set Repeat: to “none,” and horizontal position: to “center” and vertical position: to “top.” Click “Save Changes”
To fix vertical alignment (to line Google’s horizontal navigation bar up with the one we created in GIMP), you will need to go Manage Site > Site Layout. Click on “Change Site Layout”
Set the “Site Width” to 1000 pixels (1000px). This will easily accomodate most common screen resolutions.
Set the “Header” to 129px. This should work well for the dimensions described in Pt. 2, but can be adjusted +/- 1px later as needed.
Click OK. Be sure to SAVE CHANGES, and then return to site.
The new site will look like this:


Pingback: TEACHING|chemistry

David Strozzi on February 3, 2013 at 9:04 pm.


Your posts are very helpful for setting up a google site! I’m trying to do that for a local Amnesty Int’l chapter. It seems the page wrapper background image is hidden by the header / horiz. nav bar. You can see a thin sliver of a photo w/ peoples’ faces just below the bluish strip.

I can’t figure out how to get the page wrapper to emerge. Any advice?



Sarah on June 27, 2014 at 4:52 am.

I have the same problem..


Alex on September 18, 2013 at 3:44 am.

I’m having the same issue. The horizontal navigation bar is hiding the page wrapper background image. Can you help?
Great site! Thanks!



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>