Customizing Google Sites Design

From a design perspective Google Sites comes with a set of standard themes. Making a Google Site look exactly like you want can pose a significant challenge as it is not clear to the new user where and how to change basic attributes of the site design. In this post we will take our basic Google Apps based Event Communications Center and apply various design elements to make it look more inviting to our users and 3rd party organizations who will access information from this site.
Before and After Applying Design to Google Site
 In Google Sites there are themes and templates. Think of themes as the basic design elements of a site. It is currently not possible to create your own theme, however you can modify an existing theme. Think of templates as a complete site consisting of pages, navigation, placeholder content, a theme and modifications that have been applied to the theme. When you first create a site, you are asked if you want to use an existing template. For our site we did not use any of the canned templates, but created a site using the default theme, and we added our own pages to it.

Now that we have a site with some content we can look at ways that we can modify the design to be more appealing. The first thing we will do is to change the theme to one that is more compatible with the changes that we want to make. Our original default theme was the iceberg theme.

Google Site using default iceberg theme.


In this step we change the theme to Blank Slate. We have also set the page width to 960px, and changed the height of the header to 290px to make room for a photograph we will insert later.

Google Site with Blank Slate theme and 960 pixels wide


From here we apply our color scheme to the page background, the content area, and the sidebar navigation. Notice that the site title is still visible in this theme.

Google site with blank slate and custom colors.


As a final step we disable display of the site title, and upload our header picture to the site. There are 2 places that a header image can be inserted. In this case we inserted it as the site header background image. It is also possible up upload a logo to the header, but it has padding around it and won’t fill the header space cleanly. The header logo is meant to be placed on top of the background image, if there is one.

Google Site with header background image.

That’s it! We have completely changed the look and feel of the site using a few simple configuration steps. Admittedly the flexibility in this approach may not be enough for some public facing promotional sites, but it is certainly sufficient for a project site like the Event Communications Center.

Do you have any comments on this post? Feel free to give us your feedback at the new Meeting Planner Toolkit Facebook Page.

This entry was posted in Event Communications Center, Google Apps and tagged , . Bookmark the permalink.