OFN super-admin guide
Search…
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
​
Your business, your branding
​
​
Collaborate with others
​
Monitor & understand
​
Online Shopfront
​
​
​
​
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 modified 1yr ago
Copy link