Look & Feel

Go to Complete List of Resources - Look & Feel for the links found on this page plus many additional links about each of the sub-topics.

Also see:

- Navigation for customizing sidebars and horizontal navigation menu.

- Change the Layout of a Page (Columns). The layout of your page may be a design issue, or you may discover that it easier to read or use a page with a certain number of columns, areas of white space, or with an additional sidebar.

INTRODUCTION – Look & Feel

Base Theme

The drop-down menu shows the current base theme (which is Ski in the example above.)

• • You can experiment with different choices by clicking on another theme. You will see the sample page at the bottom of the screen change to the new theme.

  • When you find a Base Theme you want to use, click on [Save]

Change Site Template

Notes:

• • The Themes are divided into categories to try to help organize your search. You can use a theme from any category and then customize the look and feel yourself.

  • Some of the Themes change the layout of the site dramatically. If you have already started building the content of your site, you may want to make a copy of your site before experimenting with the fancy themes. Go to Manage Site (gear) and click on [Copy this Site] You will be asked to give it a new name and submit the security code like you did when you created your original site.

  • If you mess up too badly, you can choose [Clear all customizations] from the Themes, Colors, and Fonts page.

Choose [Browse More Themes] button to see pre-made site templates

Browse More Themes button

To change the Site Template, click on one of the Site Themes

• • If you want to see a larger version of the sample, click on Gadget from Template Directory. (It will open in a new tab or window)

  • If you want to see it in your site, click on [Submit].

    • There is small print that says “Below is a preview of your site. You must save the changes for the site appearance to take effect.” So you can [Cancel] the preview and go in to try others until you find one you like.

CREATE YOUR OWN DESIGN

Notes: Before you change the background on your site, you need to decide if you want a solid color background or use an image. Background images can be a single picture or a pattern that is repeated on each screen. Wrapper images are in the perimeter area of your page that some themes use. If you want to use an image, you will need to find the one you want to try before getting started and save that file to a place where you can browse to it easily. When you upload an image file, you will get the message "An image type (.jpg, .jpeg, .gif, .png) is required” If you did not create the image yourself, you need to get permission from the person who did. If you find it on a web site, be sure to look carefully at the Terms of Use. There are many websites that contain images that you are allowed to use for free for a personal site, but be aware that there may be images on some of these sites that you may find offensive.

• 1. More (gear) --> Manage Site

  2. Choose Themes, Colors, and Fonts from the bottom of the left sidebar.

• 1. Base Themes options for Entire Page: Background

  2. Choose Entire Page -> Background (red means it’s selected)

Color

• 1. Click on the dropdown to see common colors.

  2. Click on a square to see how it would look on your page.

  3. You can also enter the hexadecimal value of any color. Note that when you use a hexadecimal value, it is good practice to include the hashtag (#) before the six characters. There are a number of sites that show you ‘web safe colors’ and give the hex code to type into the box. One simple site is HTML Color Charts by the DevGuru www.devguru.com/features/colors

Images and Wrapper Images

• 1. Click on the box beside either Image or Wrapper Image and experiment!

  2. Browse to the image file you have saved.

  3. Click on Options to choose where you want the image placed on the background and the way the image repeats in the background.

  4. The most common choices for small images and for textures are to have it placed in the Center and Top positions and to Repeat: Horizontal and Vertical, which repeats the image so it fills the width of the page and the length of the page regardless of the display settings the user has on his or her computer.

  5. (optional) You may want to experiment with other Base Themes once you see your background image. With some experimentation, you will find a nice looking combination.

Note that the Base Theme ‘Blank Slate” is just that – your content, the sidebar, header, etc, has no background! Of course, you can also change the backgrounds of the Site Header, Content Area, Sidebar Gadgets, etc by choosing the options for those areas and doing what you just did for the Entire Page.

CHANGE COLORS AND FONTS

Change Style of Text in Site

More (gear)--> Manage Site

Choose Themes, Colors, and Fonts from the bottom of the left sidebar.

Step 1: Visited Link Color

• 1. Choose Entire Page -> Text (red means it’s selected)

  2. Drop down the font, color and size options to change them.

  3. Note that you may need to scroll to see the Visited Link Color.

Entire Page: Text window - COMBINE INTO ONE PIX

Step 2: Default Style Settings

• 1. Choose Content Area (red means it’s selected)

  2. Click on the Page Title or type of Heading that you want to change.

  3. Drop down the font, color and size options to make changes.

  4. Note that the higher number in a heading style is generally a smaller size than lower numbers. For example, text in Heading 4 is smaller than Heading 3, Heading 3 is smaller than Heading 2, etc. This provides a consistent look to headings and subheadings. You should always use style settings to create consistent text in your pages – web pages and documents. It is important to identify levels of headings for people who use screen readers. In Google Sites, the Table of Content feature requires the use of these default styles.

Content Area window with style settings

Change Styles in Other Areas (Header, Sidebar, Horizontal Navigation, etc)

• 1. More (gear) --> Manage Site

  2. Choose Themes, Colors, and Fonts from the bottom of the left sidebar.

  3. Choose one of the areas to see the options, and use the dropdowns to make your changes.

Site Header – You can change the Background color and image as well as the font, color and size of the Text in the header here. For additional information about designing your Header, see DESIGN YOUR SITE HEADER below.

Content Area Gadgets (example: a text box) and Sidebar Gadgets - Edit the color/image in the Background and Title Background, the text styles of the Title and Text, and the color of a Line Divider

Horizontal Navigation – If you choose to use a horizontal menu, there are a number of editing options including the style of the text when the user hovers over a selection, the colors of the dropdown text and background.

Click for Text of Table (opens in new tab/window)

Skip Table

DESIGN YOUR SITE HEADER

Also see

- Add, Modify or Hide the Search Tool in ADVANCED AUTHORING

- MULTIMEDIA

Add Photographs or Other Graphic Images

• • If you want to add a photograph or other graphic image to the background of the Header or add a smaller picture (a “logo”) within the space, be sure to follow best practices and legal/ethical use of the images. Please read the MULTIMEDIA area in this site for additional information.

  • You will need to create or find the image file you want to use and format it correctly before you get started because there are almost no tools for editing your image after you have uploaded it. In Google Sites, the file format must be .jpg, .jpeg, .gif, or .png Google Help suggests that a logo be approximately 145 pixels wide x 52 pixels tall. Regardless of the size, you want the file to be small so it doesn’t prevent the page from loading quickly.

Add Title of Site to the Header

• • If you do not see the title of your site in the Header, go to More (gear) --> Manage Site and choose the General area from the menu on the right. Check the box beside the title called “Show site name at top of pages”

Part A: Background Color or Image in Header

• 1. More (gear)--> Manage Site

  2. Choose Themes, Colors, and Fonts from the bottom of the left sidebar.

  3. Choose Site Header and either Background or Text (red means it’s selected)

Site Header – Background

Solid Color Background in the Header

• 1. Click on the dropdown to see common colors.

  2. Click on a square to see how it would look on your page.

  3. You can also enter the hexadecimal value of any color. Note that when you use a hexadecimal value, it is good practice to include the hashtag (#) before the six characters. There are a number of sites that show you ‘web safe colors’ and give the hex code to type into the box. One simple site is HTML Color Charts by the DevGuru www.devguru.com/features/colors

Background Image in the Header

• 1. Click on the box beside Image

  2. Browse to the image file you have saved.

  3. Click on Options to choose where you want the image placed on the background and the way the image repeats in the background.

  4. To fill up the background of the Header with a small image, you will want to select Repeat: Horizontal and Vertical, which repeats the image so it fills the background of the Header. You can also chose the Center and Top positions to make the repeated image symmetric.

Part B: Style of Site Title

Site Header – Text Style

• 1. Drop down the font, color and size options to make changes.

Part C: Height of the Header

Configure site header window with Height circled

• 1. Click on More (gear) -> Edit Site Layout

  2. Toggle on [Header] button if it is not already highlighted

  3. Hover over the Header until Edit Site Header appears; click somewhere in the header to get the Configure Site Header window.

This is where you can adjust the Height of your Header. Depending on the template you use and the size of any images (logos) you have, you may want to experiment with the best overall height. You can have the height determined by the Theme or a picture (logo) you add, or you can specify the height of the Header in pixels.

Part D: Logo in the Header - Add a small logo (a picture) in your Header

Configure site header window with Select Logo circled

• 1. Select Logo

     1. Choose No Logo if you do not want a picture in your Header

     2. Choose Custom Logo if you do.*

  2. Browse to the image you want

  3. Align the image in the Header:

• • 1. Vertical Alignment can be at the Top, Middle, or Bottom

    2. Horizontal is either Standard or Center

* Remember if create your own logo, the recommendation is to make it approximately 145 pixels wide x 52 pixels tall.

DESIGN YOUR FOOTER

Also see

Remove Items from the Google Footer in ADVANCED AUTHORING

Some site templates already have a footer in the design that, if you keep it, you will probably want to edit. If not, you may want to add a footer to include information that will appear on each page, such as your name, contact information, URL, a quote, etc.

By default, Google Sites has five buttons in the footer: Sign in, Recent Site Activity, Report Abuse, Print Page, and Powered by Google Sites.

Examples

Footer with a custom quote and the default Google Footer

(lookHO2014re_footerquotedefaultmenu)

Custom footer with two quotes and contact information for the author.

(lookKD2014gl_footermultiquotes)

Edit Footer

• 1. More (gear) -> Edit Site Layout

  2. Click on [Custom Footer] to toggle it on or off

  3. When it is on, you can hover over the footer area (at the bottom of screen) and click to edit.

Edit Site Footer

This is where you can customize the style and layout of the text, and add links or graphic images to the Footer.

The editing tool is very similar to the rest of Google Sites except there are only three choices under Insert:

• • Image

  • Link

  • Horizontal Line

ADDITIONAL INFORMATION ABOUT THE LOOK & FEEL OF YOUR SITE

Help Desk: Google Sites: https://sites.google.com/site/helpdesksites/

Look & Feel: https://sites.google.com/site/helpdesksites/look-feel