Topics Map > Software Guides > Google Sites

Google Sites: Using Custom Themes

New Google Sites, 2021. Be aware that different versions of Google Sites will vary in appearance and functionality. Access Google Sites at sites.google.com.
A Theme is a group of settings, such as colors and fonts, that create the overall design of a site. Google Sites has two Theme setups: Present or Custom. Through Custom Themes, the styling and design of a site is highly configurable. However, setting up a Custom Theme can be complicated. For Preset Themes, see Google Sites: Using Preset Themes .

Expand each section below to see its content.


To set up a Custom Theme:
  1. Navigate to the Themes tab from the panel to the right side of the site.
  2. Click the plus icon under Custom. A new window will appear.

  3. Enter a name for the Theme.
  4. Adjust other settings as desired, and click Next. All of these preliminary settings, and more, can be configured later.
  5. Click Create Theme. Customization settings will open in the panel to the right.

  6. Configure options as desired, as described in the following sections.
To quickly change the Theme colors palette, click the paint palette icon to the bottom-right in the Theme name preview.

To quickly change the site fonts, click the A icon to the bottom-right in the Theme name preview.

To reopen a Custom Theme later, click the Theme Options button, which looks like 3 stacked dots, to the top-right of the Theme in the Themes tab and select the Edit option.




Theme colors affect the colors across the entire site, including the page section background colors as well as text. When selecting site colors, we recommend determining a palette beforehand and using colors that work well together, such as different shades of the same color.

Section Style

All of the content thats in the body of a page, such as text and images, are placed in Sections. The colors of page Sections can be modified in the Theme. The combination of the background color and text color are referred to as Section Styles. Three Section Styles can be configured in the Custom Theme.

To adjust the Section Styles:
  1. In the Custom Theme, click the Colors drop-down to expand the section.

  2. Select one of the Styles (1, 2, or 3).
  3. Make adjustments as desired.
  • Background: the background color of the Section.
  • Titles and Headings: the text color of Titles and Headings.
  • Body Text: the text color of body text (called Normal in the text formatting toolbar style drop-down).

To see an example of the color changes, click the Preview button (eyeball icon) next to the setting.

To apply a Section Style:
  1. Hover over a section in the body of a page. Options will appear to the far left.
  2. Click the paint palette icon, which will open the Section Colors pop-up.

  3. Select a Style (1-3). The Section background and text color will update.
We recommend applying the same Section Style to every page Section of a similar type. For example, set every section that has a paragraph to the same Section Style.


All of the text across the site is configured as one of the following Text Styles: Normal Text, Title, Heading, Subheading, Small Text. Normal Text is the Style for paragraphs and standard body text. Title, Heading, and Subheading are larger, more prominent styles that are meant for page and section titles. Small Text can be used for text such as photo captions.

Text formatting, such as font and size, can be configured in the options bar above each individual text box. However, we recommend configuring the formatting across the entire site through Themes instead. This will promote formatting consistency for the site, and reduce editing time.

To modify the formatting of the Text Styles:
  1. In the Custom Theme, click the Text drop-down to expand the section.

  2. Click the Style drop-down and select the desired Style.
  3. Adjust the settings as desired, including the font, size, format (weight), alignment, line spacing, paragraph spacing.

As settings are changed, the text on the site pages should update automatically depending on their applied Style. If the changes arent being reflected in the site, reapply the Style to the text. To do so, highlight the text and select the Style from the drop-down in the options bar above the text box.

To see an example of the text changes, click the Preview button (eyeball icon) next to the Style drop-down in the Theme settings.


Certain images can be set to appear site-wide, across all pages. These images include the Header background, site logo, and favicon.
  • Header image: the top-most part of the site pages. For design consistency, the background image in the Header should be the same across the entire site.
  • Site logo: when set, the site logo will appear to the top-left of the site in the Header.

  • Favicon: the icon that appears in the web browser tab. By default, the favicon is the Google Sites logo.

To change one of the site images:
  1. In the Custom Theme, click the Images drop-down to expand the section.

  2. Click the image icon to the right of the desired site image location (Header, Logo, or Favicon).
  3. Select an image option.
  • Upload: Add an image that's stored on the computer.
  • Select: Add an image from a URL link, a Google search, or Google Drive.
  • Proceed through the remaining steps. The image will appear on the site.

    • The Navigation bar is used by site visitors to go to the different pages. In a Custom Theme, the background color as well as the text weight can be modified. Be aware that some modifications made in the Custom Theme may not appear in the site draft. In order to see how the Navigation bar settings are applied to the site, click the Preview button at the top of the editor.



    The page links in the Navigation bar are set as Normal text, which determines the size and font. In order to make changes to the Navigation bar link text formatting, the Normal text style needs to be modified in the Text section of the Custom Theme settings.

    To access Navigation bar settings, click the Navigation drop-down to expand the section in the Custom Theme.

    To see an example of the navigation bar changes, click the Preview button (eyeball icon) next to the settings.

    Background

    By default, Navigation bars that appear at the top of the site are transparent until scrolled.

    To modify the background color of the entire Navigation bar upon scrolling:
    1. Click the color-drop down next to, Color when scrolled.

    2. Make a selection.
    • To choose a color thats not listed, click the plus button under Custom.
    To toggle the transparency, click the Transparent at top checkbox.

    Selected Page

    These settings will change the appearance of the currently selected/accessed page in the Navigation bar. Use the settings for the select Navigation bar mode. If using a top Navigation bar, use the Top nav drop-down. If using the side Navigation, use the Side nav drop-down. For instructions on changing the Navigation bar mode, see Google Sites: Adjusting Site Navigation .



    The four Selected Page options are:
    • Foreground color
    • Background color
    • Bold (default)
    • Underline

    By default, the Foreground and Background color options are determined by the Section Style colors that are set in the Colors section of the Custom Theme settings. When selected, a new option called Selected page color will appear at the bottom of the section.


    The design of certain page components, such as Buttons, Dividers, Links, and Image Carousels, can be modified. The design of the components will be based on the applied Section Style of the page section that theyre located in.

    To change the design of components:
    1. In the Custom Theme, click the Components drop-down to expand the section.

    2. Select one of the Styles (1, 2, or 3).
    3. Make adjustments as desired. The following options are available for each component:
    • Button: fill, outline, and text color.
    • Divider: color and weight of the line.
    • Link: color of text links.
    • Image Carousel: color of the active image dot.
    To see an example of the component changes, click the Preview button (eyeball icon) next to the settings.

    iTech logo
    Need support? Contact itech@plu.edu or visit www.plu.edu/itech.

     ​​

    Keywords:
    design, colors, fonts, style, text 
    Doc ID:
    114104
    Owned by:
    Janelle B. in Pacific Lutheran Univ
    Created:
    2021-10-05
    Updated:
    2023-08-04
    Sites:
    Pacific Lutheran University
    Section dedicated to software supported by PLU