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

By | July 3, 2011

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

I use Google Sites exclusively when creating a website for my classes or for personal use. I find the user interface very straightforward and easy to use. The seamless integration of Google Docs, Youtube, and gadgets make the sites highly customizable, and accessible from nearly any mobile device.

As someone who’s been designing webpages from scratch since elementary school, I find the vast majority of the default themes provided by Google… well, ugly. So last winter, I decided to find a way to make my sites look cleaner, and more professional.

Here are the themes I made for my sites:

For each site, I wanted to

  • Create a custom header/logo
  • Use horizontal navigation, and incorporate it into my design
  • Utilize a web-friendly color scheme
  • Remove excess text and gadgets for a clean interface

All you really need to create the custom theme is a simple image editing program (such as freeware GIMP) and an attractive color scheme (from Colourlovers). I don’t have any particular expertise in graphic design, and I tend to design logos using only text.

In this post, I will show you how to set up your basic site.

1. Log into your Google Account, or create a new one.

2. Go to http://sites.google.com, and click “Create a New Site.”

3. Select “Blank Template,” then name your site, and customize your URL so that it is unique.

4. Choose the “Blank Slate” Theme

This is the easiest theme to build upon.

5. Enter security image text, and click “Create Site.”

Your site will look something like this:

6. Create a few pages

It is helpful to create a few pages so that you can see what your design will look like with horizontal navigation. Click “Create page,” and Name your page. The page template you select is not important, as you can change it later.

7. Remove Default Title

Click on the “More Actions” dropdown menu, and select “Manage Site.” (alternatively, type “g + m” from your site).   Click on “General” in the Site Settings sidebar, and uncheck “Show site name at top of pages.” We will make our own! Click “Save Changes.”

Your site now looks like this:

 

8. Set up horizontal navigation.

While still in “Manage Site” click on “Site Layout” under “Site Appearance.”

Your default settings include a header, side bar, and system footer. We want to replace the side bar with horizontal navigation and add a custom footer. Click “Change site layout.” In this menu, check “Horizontal navigation,” uncheck “Sidebar,” and check “Footer.” We will fiddle with the header in the Pt 2 of this series.

Click “OK, then “Save Changes.” Your site layout will now look like this:

9. Add Pages to Horizontal Navigation

While the sidebar automatically alphabetically populates with your pages, you have to manually add pages to horizontal navigation. From the “Site Layout” page, click “edit content” in the horizontal navigation box.

Click “Add Page” to add each page you created one by one. You can rearrange the pages by using the up and down arrows. You can create subpages (drop-down menus) by clicking the right arrow.

You can also link to an external page from the horizontal navigation by using “Add URL”

Click “OK” and “Save Changes,” then “Return to Site.” Your site will look like this:

It may not look like much now, but in the next post I’ll show you how to:

  • Customize header dimensions
  • Select a color scheme
  • Create a page wrapper (header/background)

 


6 Comments

Claire Thompson on July 21, 2011 at 1:59 pm.

Thanks for the step-by-step process. I’ve used Google Sites in the past and found the set up very intuitive, but as you mentioned their themes tend to leave me cold. I look forward to setting up my own custom theme following your directions.
Cheers

Reply

Gordon Wilcox on July 22, 2011 at 1:23 pm.

Nicely done! I am eager to see Part 2.

Reply

Pingback: TEACHING|chemistry

Alan on May 24, 2012 at 6:37 pm.

I could not find your color scheme and wrapper pointers. Can you guide me in the right direction? Thanks.

Reply

Michael on March 1, 2013 at 12:10 pm.

I am just starting a virtual flight sim website, am new to google, am new to building a web site. I have been and adult educator all my life (less growing up years). I want to create a better looking theme for this site, your site seems to be best solution to this problem!

Mike Jones

Reply

Ivanix on May 20, 2013 at 10:58 pm.

Hi Bethea,

Almost two years later, your article is still providing great value.
I just moved my website over to Google Sites and its taking some time to familiarize myself with it.

I would like to point out that one key reason to remove the default title (Step 7) is when one wants the website to use a custom domain like http://www.yoursite.com. The default title is a hyperlink to the actual Google Site link (i.e http://sites.google.com/site/yoursitename/).

Many thanks, I look forward to your followup post.

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