Style guide
RECOMMENDED IMAGE SIZES
These are the recommended image sizes to use in this template:
Partner & Funder Logos
Image dimensions: width 580px x height 280px
Minimise white space around the logo so sizing is consistent when displayed with other logos.
If logo is to be displayed on the homepage under ‘Major Funders’, the logo will require a transparent background to allow for the pale green background to show through correctly.
STYLEGUIDE
The Divi Theme + UI setup houses most of the key ‘styles’ you’ll need for the sites. This includes:
Fonts (Oswald + Open Sans)
Colours (OFN brand colours inc. web versions)
Standard banner illustration w/gradient background
OFN logos (whichever ones I had access to)
Icons
General icons (ie. generic symbols as text)
A custom icon font has been added to the theme. Icons can be added/selected through the font selection dropdown in the Divi Builder (see below):
The full list of icons can be found here: https://www.elegantthemes.com/blog/resources/elegant-icon-font (scroll down the page to the Complete Set and Unicode Reference Guide section)
OFN custom icons
Reduce your admin | Integrate & automate | Collaborate with others | |
Resource Library | Resources | Fair Food Forum |
TESTING
I’ve tested as best as possible for Desktop/Tablet/Mobile presentation for all page templates/layouts however it’s important that content peeps also do this when adding/modifying pages!!
The Divi Visual Builder allows you to preview pages in Desktop/Tablet/Mobile. For the most part I’ve found this fairly reliable, however once you publish a page I recommend AT MINIMUM looking at the page from your phone + laptop/desktop in an incognito browser to make sure no presentation gremlins have crept in.
Here’s a screenshot of the Divi Builder page actions which appear at the bottom of the page inside the WP admin - the icons on the left hand side allow you to toggle/test the page responsiveness:
Last updated
