Default

The default colour is the component colour used by Google sites when content (e.g. a button) is added to the page header or section that uses a background image.  

Note: If you choose a colour that does not contrast sufficiently from black or white (the text colour automatically Google Sites uses) then Google Sites will ignore your chosen colour and use use black or white instead.

Style 1, Style 2 and Style 3

These are the three styles available for a section in Google Sites.  Select the style you wish to change, e.g. if you want to change Style 2 then select Style 2.

Background

Set the section background colour for the chosen style.

Titles and Headings

Here you can set specific colours individually for the three heading and title text styles for the chosen section style:

• Title

• Heading

• Sub-heading

If you cannot see the individual options to the different titles' and headings' text styles, and only see one Titles and headings option, then you can expand this section to get the individual options when you use the More options button at the bottom of the Colours section.

Body Text

The Body Text sub-section offers the options to set specific colours individually for:

• Normal text

• Small text

in the chosen section style. If you cannot see the individual options use the More options button at the bottom of the Colours section to reveal these specific options.

Select text style

This drop-down lists all the text styles available in your Google Sites Custom Theme. To set the formatting options for a text style choose from:

• Normal text

• Tile

• Heading

• Subheading

• Small text

Font

Choose from over 500 fonts, and the font style (Thin, Light, Medium etc, if available for that font), for this chose text style.

Note: all fonts render correctly on the published sites.google.com URL of the site but some fonts do not display on Google Sites that use a custom domain.

Size

The option to set the point size of the font for the selected text style.

Format

Set either bold or italic for the chosen text style.

Align

Choose from left, centered, right, or justified alignment for the selected text style (you may want to avoid using the justified option as some people find it difficult to read on web pages).

Line spacing

Choose from either the suggested, popular line spacings or type in your own.

Paragraph spacing

Set the space, in point size, before or after the paragraph containing the selected text style.

Note: if you want a new line in a text box, without making a new paragraph with this spacing, use Shift+Enter on the keyboard to get a new line (without the spacing) instead of a new paragraph.

Header

Here you can upload the default page header background image for any new pages or if you reset the header to its default. You can set some options for the page header background image:

• Adjust for readability - this automatically ensures that the foreground text colour contrasts sufficiently from the background image, by either darkening the image and making the text white, or lightening the image and making the foreground text black.

• Anchoring - choose from 9 alignment options to give you control over the portion of the background image that's always visible on any device size/aspect ratio.  If you always want to see the bottom-right corner of the image, for example, then set this option to Bottom right (the arrow that points diagonally to the bottom right).

Logo

Upload the site logo that appears in the navigation. 

Note: The logo only displays at 40 pixels tall but Google recommends you upload an image with a minimum height of 112 pixels.

Favicon

Upload a square aspect ratio image for Google Sites to automatically generate a suitably-sized favicon (the icon that appears in your web browser's tab, favourites or bookmarks).

Background

You can set two options:

• Colour - the background colour used for the navigation. Note: Google Sites automatically selects either white or black for the navigation text colour, whichever contrasts the most to ensure the readability of the text; you cannot control the navigation text colour.

• Transparent at top - choose whether the navigation background colour disappears and becomes transparent when you view the site from the very top of an unscrolled page.

Selected Page

Choose how to highlight the current page in the browser on the navigation.  The Google Sites Custom Theme editor offers two different sets of options for the top and side navigation:

• Top nav:

  • Foreground colour - sets the colour of the page name text to the Selected page colour

  • Background colour - sets the background colour of the page name to the Selected page colour

  • Bold - makes the text of page name bold (no colour applied)

  • Underline - adds a bold underline, coloured with Selected page colour to the page name

• Side nav:

  • Foreground colour - sets the colour of the page name text to the Selected page colour

  • Background colour - sets the background colour of the page name to the Selected page colour

  • Shading - sets the background colour of the entire row of the page name to the Selected page colour

  • Bold - makes the text of page name bold (no colour applied)

  • Underline - adds a bold underline, coloured with Selected page colour, to the page name

  • Line beside - adds a bold vertical line, coloured with Selected page colour, next to the page name

• Selected page colour - the colour to use to highlight the selected page on the navigation. Note: If you choose a colour that does not contrast sufficiently from the navigation background colour Google Sites will ignore your chosen colour and use black or white instead, whichever gives the best contrast.

Style 1, Style 2 and Style 3

These are the three styles available for a section in Google Sites.  Select the style you wish to change the components of, e.g. if you want to change the components of Style 1 then select Style 1.

This gives you the option to set different colours and styles for the components in each of the three sections, so the components can stand out against the colours you set for the section styles (See the Colours section above)

Button

Here you can set specific background colours individually for the three button styles:

• Filled button

• Outlined button

• Text button

Google Sites automatically sets the foreground text colour of the button to either black or white, whichever contrasts the most;  you cannot control to text colour of a button in Google Sites.

For more information on Buttons see Add and Style Buttons 

Divider

The options to set the formatting of the line divider:

• Colour

• Line weight

For more information on the Divider see Insert Dividers.

Link

Set the colour of links in the chosen section style for your Google Sites Custom Theme.

For more information about Links see Link to pages, websites and Drive items.

Image Carousel

Active Dot - set the colour of the dot beneath the current image on a carousel.  

For more information on Image Carousels see Add Image Carousels.

Density

Choose between three density options to set the spacing between the sections across the entire site:

• Compact

• Cosy

• Comfortable

Note: this option only affects the spacing between sections; it does not change the padding of text boxes or the space between vertically grouped text and images.

Site width

Choose between three site width options to adjust your Site width for desktop viewing:

• Normal (Default): This is the default layout for most sites.
  1280px maximum width

• Wide: This layout is designed for sites to look and feel more spacious and more content can also be added.
  1440px maximum width

• Full: This layout is designed for sites with dense, content-heavy pages.
  100% of browser's width

Show frame

If you enable the Show frame option then the site displays the Colour you choose when the browser width extends beyond the chosen Site width