Embedded Files
How to make a
...using a custom theme
...using a custom theme
This tutorial shows the capabilities of styling page sections and its contents in Google Sites. While it has its strength with more simple settings, you could have a hard time figuring out what to do, if you like to have it in a more custom way using image backgrounds, e.g. There are some workarounds and compromises, but you need to consider, what you like to have: A nice colourful design or easy maintainability.
Table of Contents
Table of Contents
These are my colour settings in the Google Sites editor
These are my colour settings in the Google Sites editor
These are my colours I want to use over all
These are my colours I want to use over all
WHITE
HEX: #FFFFFF
RGB: (255,255,255)
RGB: (255,255,255)
DARK GREY
HEX: #1C1C1C
RGB: (28, 28, 28)
RGB: (28, 28, 28)
LIGHT GREY
HEX: #F9F9F9
RGB: (249, 249, 249)
RGB: (249, 249, 249)
PURPLE
HEX: #C27BA0
RGB: (194, 123, 160)
RGB: (194, 123, 160)
LIGHT BLUE
HEX: #CFE2F3
RGB: (207, 226, 243)
RGB: (207, 226, 243)
BLUE
HEX: #0041A5
RGB: (0, 65, 165)
RGB: (0, 65, 165)
LIGHT RED
HEX: #FCE5CD
RGB: (252, 229, 205)
RGB: (252, 229, 205)
RED
HEX: #CC0000
RGB: (204, 0, 0)
RGB: (204, 0, 0)
LIGHT GREEN
HEX: #D9EAD3
RGB: (217, 234, 211)
RGB: (217, 234, 211)
GREEN
HEX: #38761D
RGB: (56, 118, 29)
RGB: (56, 118, 29)
LIGHT YELLOW
HEX: #FFF2CC
RGB: (255, 242, 204)
RGB: (255, 242, 204)
YELLOW
HEX: #F1C232
RGB: (241, 194, 50)
RGB: (241, 194, 50)
Style 1 section (easily maintainable)
Style 1 section (easily maintainable)
This comment (code font < > feature) uses the standard font colour and custom font "Lato" in 'normal text' style definition.
Style 2 section (easily maintainable)
Style 2 section (easily maintainable)
Collapsible group
Collapsible group
Unformatted text colour
A comment using Code font < > "Source Code Pro"
Style 3 section (somehow easily maintainable)
Style 3 section (somehow easily maintainable)
Collapsible group
Collapsible group
How it looks in the editor:
How it looks like on the published site:
The colours of the drop down arrow and the divider for the collapsible group doesn't match in editing mode, one dark/light! However on the published Site it shows the undesired and not very recognisable light grey for both. Open the collapsible group to find proof of it.
In the Style 1 and 2 sections I have changed the divider colour. The default is a transparent black #00000026. Once you have chosen another colour, you can't go back to transparent or make those colors partially transparent as the Google Sites Editor does not let you type in the necessary additional numbers. So be careful while testing!
(Style 4) Section with image background [Part 1] (harder maintainable)
(Style 4) Section with image background [Part 1] (harder maintainable)
...with this background image in light blue colour (HEX code: #CFE2F3)
...not adjusted for readability:
https://placehold.co/10x10/cfe2f3/cfe2f3.png
...with switched colours for the heading background (HEX code: #0041A5) and font colour
https://placehold.co/10x10/0041a5/0041a5.png
The divider has white background as it uses the default colour (style 1), so not very suitable here. I would like to have blue here. Section 2 and 3 colours work with dividers. Dividers normally inherit the background colour from the section above them. By the way: Spacers are recognised as separate sections and therefore can have an own background colour or image, see:
What a pity, that this does not work the same way for dividers!
When adding the background image, the Google Sites editor automatically adjusts for readability first (see part 2). If you disable this adjustment the text colour is not recalculated for this light background (light grey on light blue).
Collabsible group
Collabsible group
Unformatted text colour
(Style 4) Section with image background [Part 2] (easier maintainable)
(Style 4) Section with image background [Part 2] (easier maintainable)
...with this background image in light blue colour (HEX code: #CFE2F3)
...this time automatically adjusted for readability:
https://placehold.co/10x10/cfe2f3/cfe2f3.png
Well, now it's medium greyish instead of light blueish! Colours are suitable though.
Collabsible group
Collabsible group
Unformatted text colour
⚠️ Hover over the bottom right corner of a section. 2 buttons will appear:
Readability adjustment
Anchoring of the background image
(Style 4) Section with image background [Part 3] (a lot of compromises)
(Style 4) Section with image background [Part 3] (a lot of compromises)
You need to manually adjust every single textual content (give it the desired colours) and only the filled button makes sense in terms of readability. Arrow and divider colours for the collapsible group can't be adjusted.
Disadvantages: You lose the automatic adjustment from the theme's settings. You can't copy it and change to style 1, 2, 3 easily anymore. You need to go into every text box and clear the formatting. An option to reset the whole section would be nice! There is no adjustment for the active dot in image carousels. It uses the default (section 1) one. That's why I have chosen the neutral colour of dark grey!
Collapsible group
Collapsible group
Unformatted text colour
...with help of custom code embeddings
...with help of custom code embeddings
(Style 4) Section with image background [Part 4] (expert mode)
(Style 4) Section with image background [Part 4] (expert mode)
fixes the button issue
uses a custom method of collapsible text
⚠️ Note: Embedded content is not indexable in Google Search as it is placed in a nested sanitised <iframe>
Code used for buttons in part 4
Code used for buttons in part 4
Code used for custom collapsible group
Code used for custom collapsible group
...more tests, ideas, info, issues and discussions
...more tests, ideas, info, issues and discussions
Collapsible Text Arrows Invisible
Collapsible Text Arrows Invisible
How do I change the individual color of the buttons so that it doesn't affect the other colors?
How do I change the individual color of the buttons so that it doesn't affect the other colors?
Page updated
Google Sites
Report abuse