Steegle logo

Custom Themes - Google Sites

How to make a Custom Theme for your Google Site with specific fonts, colours, images and backgrounds

Related articles: Site Logo; Favicon; Themes created by Google | tag:themes

Instructions

Create a Google Sites Custom Theme

  1. Open your site in the Google Sites editor

  2. Open the Themes panel on the right-hand side

  3. Under Custom use the Create theme button (looks like a rectangle with a in the middle)

  4. In the Create a theme dialogue enter a Name for your theme

  5. Add a logo for the site from your device or Google Drive

  6. Add a banner image for the default background image for all pages from your device or Google Drive

  7. Use the Next button

  8. Choose a colour palette either from the predefined colour palettes or you can Customise colours to make your own colour palette

  9. Use the Next button

  10. Select fonts for your Titles and headings and your Body text

  11. Use the Create theme button to complete the process and apply your new Custom Theme to your Google Site

Custom Themes - In-depth, detailed features

Colours

Colours offers the settings to set all the text and background colours for each section style and the default colour used by Google Sites Custom Theme.

Colors section in the Custom Theme editor of Google Sites

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.

Text

Text offers the options to set all the font, size, format, alignment and spacing for each text style used by your Google Sites Custom Theme.

Text formatting options in the Custom Theme editor of Google Sites

Notes on Inline Formatting

If you style text directly in a text box then that inline formatting takes precedence over the formatting set in the Custom Theme, so you can individualise the formatting on particular pages but changes to the Custom Theme will not affect inline-formatted text.

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.

Images

The Images section offers the options to set the default page header image, and its settings, and the site logo and favicon used by your Google Sites Custom Theme.

Default image options in the Custom Theme editor of Google Sites

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).

Navigation

Navigation offers the ability to set colours and styles for both the top and side navigation options used by your Google Sites Custom Theme.

Navigation formatting options in the Custom Theme editor of Google Sites

Notes on Navigation Font

Google Sites uses the font and size you set for the Normal text style (see the Text section above) as the font and size for the navigation; you cannot set a specific font and size for the navigation text.

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.

Components

The Components section provides the options to set colours and styles for components in each of the three sections' styles.

Component styling options in the Custom Theme editor of Google Sites

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.

Spacing

The Spacing section provides the options for users to set spacing between the content sections on a Google Site.

Spacing section in the Custom Theme editor of Google Sites

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.

Feedback

Please let us know if this article helped or if you know of of any improvements.

Keep up-to-date

Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.

Newsletter

Subscribe to our newsletter for emails about all things Steegle.com

Steegle Springboard: the intranet solution for Google Workspace

Springboard Intranet
for Google Workspace

We provide a well-designed and well-structured intranet to enable your employees to: start work with the right tools; find people with appropriate skills; collaborate with their teams; access authorized resources; thank and recognize heroic colleagues and coworkers.

Steegle People for Google Workspace Logo

Steegle People
for Google Workspace

Searchable staff directory for Google Workspace, with real-time search results, that automatically generates org charts to show your organisation structure - Steegle People.
Steegle Share for Google Drive Logo

Steegle Share
for Google Drive

If the standard Google Drive Folder embed does not give you everything you need, take a look at the Steegle Share for Google Drive that offers search, sorting, download links and more...
Steegle News Gadget for Google Sites Logo

Steegle News
for Google Sites

Display headlines, snippets and metadata linked to your news articles and blog pages on your Google Site and filter by tags added to the news gadget. See the Steegle News Gadget.
Steegle Heroes for Google Workspace Logo

Steegle Heroes
for Google Workspace

Employee recognition system: Steegle Heroes allows you to thank and recognise your colleagues, coworkers and employees spotlight a hero as an Employee of the month.