Moving UFV.ca to new brand colours
Hero image colour scheme
- If there's a hero image with overlay/button, set its colour scheme to Style Combo 05.
Open row colours
See https://www.ufv.ca/orientation/ as an example.
- Dark green or legacy (#00703c) green rows >> var(--ufv-brand-deep-green)
- Light/sage green rows >> var(--ufv-brand-lichen-green)
- Light grey rows >> var(--ufv-neutral-mushroom)
- Other colours, e.g. dark grey >> use your judgment
Custom styling (on page) -- usually in an 'Style' content block at the top of the page
Update icon colours
Icons are usually styled with a custom rule selecting for 'fa' or 'fa-2x' etc (for Font Awesome)
Change green icons to var(--ufv-brand-valley-green)
Black icons can stay black or be updated
Text links with chevrons
Update chevron colour to var(--ufv-brand-leaf-green)
Buttons
If buttons have been styled with alt-colours (e.g. burnt orange, alt-green, etc), remove the custom colours. Buttons will be restyled globally. If the button has been styled in additional way (e.g. centered on page, etc) you can leave those rules in place.
Update other elements as needed
- Text colours, border colours, etc.
- If a style rule is inside a content type -- make a note for follow-up and send to Stephanie
Tips
- See Colours and Accessible text colours for colour values
- When you update colour rows you may need to update text style at the same time (e.g. white to dark)
- To deactivate a line of CSS in a custom style block, you can comment it out (wrap it in /* .... */