Style guide
Edit global colours using the background section of this block
To make sure all colours are changed across the site, you need to change all the global colours and will also need to confirm all buttons are using global colours for the default and hover state
First open the settings for the coloured shape above this section by clicking on the block once, then going to the tab that appears and click the gear icon to open the settings window.
Open the ‘background’ dropdown in the content section and then click the word ‘Global’ to view the global colours
Once the global colours appear, click on the gear icon to edit open up the options that let you edit them
The view will change slightly and there will be a pencil and bin icon in or below the colours, you can ignore the first 4 colours and we will most likely want to leave the white and grey too but we can change the white and grey if needed.
First change the dark blue, and replace it with the new brands primary colour (darker colour). click the pencil icon, and then go up the the area with the hex code and paste in the new brand colours hex code, then press the tick icon. repeat this step replacing the darker pink with the brands secondary/highlight colour and then replace the light pink with the colour we want for button hover states, in this case we used 0to255.com to find a lighter tone of the pink colour. Once finished, click “finish editing global colours” followed by clicking the green tick at the bottom of the editing window nd then save the page
Update/confirm button default states and hover states
Below this section are all of the buttons used on the Signature 23 template, sometimes, the button hover state needs to be resigned to the global colour to make sure it is updated along with all other brand colours. all of the buttons below are global so if you change them here, they will update across there rest of the site where they show up, hopefully leaving us with non of the default brand colours
to check this, we want to click on the first button and go into its settings like we did when changing the global colours, but this time when the window opens we want to go into the ‘Design’ tab and go down to the dropdown named ‘Button’
Now open the hover state settings by hovering next to the text saying ‘Button text colour’ and some icons should appear, click the mouse icon to access the default/hover toggle and then select the mouse icon in this new toggle
Click global to get access to the global colours we just updated, and we should be able to check if the hover is using the global because the larger circle on the far left will have a little triangle at the bottom right of it indicating it is using the global colour, if it doesn’t have the little triangle we can see in this image, we want to select the relevant colour, in this case the brands dark colour (Primary)
next we need to check the background colour. scroll down a little further, just below the button text section and you’ll be at the button background section. just like before, we need to hover next to the text “button background” and click the mouse icon that appears and then the mouse icon of the toggle that appears
Check the colour circle at the bottom left, if the small triangle it there and it is the correct hover state colour, everything should be fine, if it isn’t, just open the global colours and select the global colour for the hover state. now repeat this for all of the buttons below. if you need a button with a different colour you can easily duplicate the button you need, disable its global settings, then edit the button colour, text and link as you need, save the button as a global one and it will be ready to drop in wherever you need it.