Google Sites is often overlooked as a web content hosting service. After seeing the limited selections of theme and layout options, it's easy to dismiss Google Sites as too simplistic for the needs of a web site with a sophisticated design. Here's how to use your own HTML and CSS in Google Sites; the only way people will know that it's a Google Site is the one line of footer text at the bottom of the page required by Google. Other than that, the design options of your site are limitless!
Google Sites has a lot of functionality that is hidden under the surface. The HTML Editor, for example, can be used to edit the HTML for your page. By placing our own HTML in the HTML Editor, we have control over exactly what tags are used where. Moreover, we can use inline CSS attributes on those tags to control exactly how they're displayed. This process works for the vast majority of CSS attributes, but there are some attributes that do not work.
Web content editors can use Google Sites the way they always have to edit page content while page templates can be used to allow web content editors to quickly copy an existing page design and apply it to new pages.
As a result, Google Sites can be used as a web content management system (CMS) while retaining the Google-provided infrastructure, access control/sharing mechanisms, and user-friendly content editor, but also employ innovative designs built on custom HTML and CSS.
Quick Overview of Steps
- Manage Site to set the Theme to “Blank Slate”
- Edit Site Layout to Remove Unused Site Content
- Use Page Settings to Remove Unused Page Content
- Create Inlined CSS
- Paste HTML Content into HTML Editor
- Preview your Page
- Save the Design as a Page Template
- Create New Pages Using a Saved Page Template
- Edit Content with Google Sites
1. Manage Site to set the Theme to Blank Slate
On the "More" menu, go to Manage Site:
From the "Themes, Colors, and Fonts" menu, choose the "Blank Slate" theme.
Click the "Save" button to save your changes.
2. Edit Site Layout to Remove Unused Site Content
Next, go back to the page you're editing (click on the Site's title that has the < to the left of it), then go to "Edit site layout" under the "More" menu:
In the Site layout editor, deselect as many components as you can (typically Header and Sidebar), and set the Site width to 100%.
Click "Close" to save your changes.
3. Use Page Settings to Remove Unwanted Page Content
Next, under the "More" menu, click "Page settings." Deselect as many components as you can (typically, "Show page title" and "Show links to sub-pages" are selected by default).
4. Create Inlined CSS
Next, create HTML with the CSS applied "inline;" that is, instead of a <style /> tag in the <head /> of the document, each element / tag should have a style attribute that specifies exactly what styles should apply to this element.
N.B. There are online tools available on the Internet that greatly simplify this "inlining" process. One such tool is the "Automatic CSS Inliner Tool" provided by MailChimp. beaker.mailchimp.com/inline-css Typically, this tool is used to inline CSS for HTML that is destined for use in formatted email, but it works very well for inlining CSS for a Google Site as well.
5. Paste HTML Content into the HTML Editor
Next, edit the page you wish to update (the pencil icon) and open the HTML editor by clicking on the <HTML> button (the right-most button on the toolbar). Don't use the "HTML Box" from the Insert menu; use the actual HTML editor.
Copy and paste your inlined code into the HTML window, click update, and save your page.
6. Preview Your Page
To see what your page will look like when viewed outside of the Google Sites editing environment, click on the "Preview page as viewer" option from the "More" menu.
7. Save the Design as a Page Template
Under the "More" menu, click "Save as page template" so that new pages can be created with this design.
8. Create New Pages Using a Saved Page Template
New pages can be created using page templates; they'll inherit all of the HTML and CSS - the design - from the template while allowing the editor to change the content. Click on the create page button (the sheet of paper with a folded down corner and a + symbol in the center) and select the new design's template.
9. Edit Content with Google Sites
Despite the fact that custom HTML and CSS was used to generate the design, the standard Google Sites content editor can be used to modify content.
Google Sites provides a lot of functionality that isn't immediately obvious; this makes Sites easy to dismiss as a non-option for a serious web site. However, with some creativity, Google Sites can host visually sophisticated, elegant, attention-grabbing web content. Page templates allow a single design to be used on multiple pages while the standard Google Sites editor facilitates content changes without requiring in-depth HTML knowledge.
Written by Wes Dean, Development Lead, White Stratus. For more information visit www.whitestratus.com.