Style guide
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.
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 | Your business, your branding | Collaborate with others |
Monitor & understand | Online Shopfront | | |
Resource Library | Resources | Fair Food Forum | |
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:
Could not load image
Last modified 2yr ago