Steegle.One Intranet for Google Workspace
Related articles: Site Logo; Favicon; Themes created by Google | tag:themes
Open your site in the Google Sites editor
Open the Themes panel on the right-hand side
Under Custom use the Create theme button (looks like a rectangle with a ➕ in the middle)
In the Create a theme dialogue enter a Name for your theme
Add a logo for the site from your device or Google Drive
Add a banner image for the default background image for all pages from your device or Google Drive
Use the Next button
Choose a colour palette either from the predefined colour palettes or you can Customise colours to make your own colour palette
Use the Next button
Select fonts for your Titles and headings and your Body text
Use the Create theme button to complete the process and apply your new Custom Theme to your Google Site
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.
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.
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.
Set the section background colour for the chosen style.
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.
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 offers the options to set all the font, size, format, alignment and spacing for each text style used by your Google Sites Custom Theme.
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.
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
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.
The option to set the point size of the font for the selected text style.
Set either bold or italic for the chosen text style.
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).
Choose from either the suggested, popular line spacings or type in your own.
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.
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.
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).
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.
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 offers the ability to set colours and styles for both the top and side navigation options used by your Google Sites Custom Theme.
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.
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.
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.
The Components section provides the options to set colours and styles for components in each of the three sections' styles.
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)
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
The options to set the formatting of the line divider:
Colour
Line weight
For more information on the Divider see Insert Dividers.
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.
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.
The Spacing section provides the options for users to set spacing between the content sections on a Google Site.
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.
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
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
Site with Default Width - 1280px - Disabled Show frame
Site with Default Width - 1280px - Enabled Show frame (yellow)
Open your site in the Google Sites editor
Open the Themes panel on the right-hand side
Under Custom use the Import Theme button (looks like a rectangle with a arrow coming up in the middle)
Then the Import Theme box will appear where you can select your other site you with the theme you want to import. Then use the blue SELECT button at the bottom-right to import it.
Please let us know if this article helped or if you know of of any improvements.
Join the Sites Update Group on the Google Sites Classic Comparison to get email notifications about New Google Sites updates.
Subscribe to our newsletter for emails about all things Steegle.com