> For the complete documentation index, see [llms.txt](https://ofn-user-guide.gitbook.io/ofn-super-admin-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ofn-user-guide.gitbook.io/ofn-super-admin-guide/setting-up-your-about-page-on-wordpress/style-guide.md).

# 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):**
  * ![](https://lh6.googleusercontent.com/AUdUvRLFGPon9dUJsAZ9Dj0xvAT5rPZs5LDx0PIl_r6FWZh8d1yi9XXLmWfamsI6dBFT5NMuhDzdEPdUksOkbtX6EFV7ioDpu-2zQR6TxkJFAOap2KCAIr1cHRqDh8oEQv3ZCOpV)
  * **The full list of icons can be found here:** [**https://www.elegantthemes.com/blog/resources/elegant-icon-font**](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**
  \*

| <p><img src="https://lh5.googleusercontent.com/MufOUOczQYVAEl8Ztgl1yALFPxjwM5hdu1z9roWyGyiCySTjiPs5FqB8og8UIm1PGyNXwDLMEUz3ClS_plpDDx7NO2BgCAmkt3okH-88mNWzWUJLzYCpE86fbANKUXMS3jOLnhYP" alt=""></p><p><strong>Reduce your admin</strong></p> | <p><img src="https://lh5.googleusercontent.com/fomS4SFVQql1vxJeAU9NLuc8FAlZUcW9xg5YOd3EOr3AMo7R01YXwON4_--DdW0zWqHtGo9ForWrH6vMQq5_gGh0cjln93bRmiob0xjEZYkwg7CjQ4tB15c3phgvh8gzJ447V1h_" alt=""></p><p><strong>Integrate & automate</strong></p> | ![](https://lh3.googleusercontent.com/MoYt7sFvW6kg9IQsMtMWKZ10PNtcsufDXakG9pjgYNL9-QLeOkK-et3bziFS989XOEeSi8JX1GZb9g56SiUYjnPLuyWuFjTmW0HB8Bh5ICMn_XSyCmRpZw3UFR1dyReK4G-y-hAS)**Your business, your branding**                             | <p><img src="https://lh3.googleusercontent.com/8JX3_YNZ94mMu0vVtX-9O8xGaGItjiMLBFCiAg9eLnmZpIRWVDYSsturLElQH_4aP4HbvfNFzpSxqQt4qnAqXMScvR-JcPG-uB4zmYqO5nE9xoeifZYSn_U3INGn5ArnM7dhEkQf" alt=""></p><p><strong>Collaborate with others</strong></p> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![](https://lh6.googleusercontent.com/Fed9CkDZEn5bsGMxiJzasJnzR1pFEubO7DshoZfQw9VPr-XvsdQBvXjb69SiDqhdQNCKxff-DzKjlb5hyFn_Z7UndoUSjOfgbKpyahE4bWok0IVnfkNH-ebZ0edhJmF2hiqptkRC)**Monitor & understand**                                       | ![](https://lh3.googleusercontent.com/LwbYpIakPzmNO15tHsjjVrAH2fUZAFHN1YxTaacJBLrqTsi7UH6Bn0hnBngrtQF1txtkew7W_Y8ErPYqeaukHaO2HTUg4vNijDZ7k5jqbvuaH5AG62xGhVV_jXzasCV6DGng4JN3)**Online Shopfront**                                              |                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                     |
| <p><img src="https://lh6.googleusercontent.com/OIbOZC8lYw1j8bZ8mmkIV9cRc-8u_LHAYeYboyCZxwnHTlVCgphEpOhy24iw0qrVetH7f7lqgACunK6F18cvV65N_ulrhxp-MBJbxhcWRYmQdVpjUF3Cxo_tPoBFmA7Jd44cPsqB" alt=""></p><p><strong>Resource Library</strong></p>  | <p><img src="https://lh4.googleusercontent.com/Fs2kM71LJJzDK9xE9wvM3tdYXRPXB96MX2kuV6t0V3iAtIZ2CfFOOyYNaPpEwDElgm5Vn16gQ4AfxGpvsgjj0m8BIWPY2QMXsVlAN04sRDhOMotWM9953wnGZGkq7mZ_Ijvfkfn1" alt=""></p><p><strong>Resources</strong></p>            | <p><img src="https://lh6.googleusercontent.com/d-fjbqVkTZnlQGGhTUBhAxde45tVhEO7yPBbJNrx2hA_r11kCNGULFoYqjgudS8tj_Jmghvopr6BYlp3MfmrbtvAoH2SpB9mRqZgGNgA_VsFkSfIwXmrpMPsTHH7DHcf6y7Ve7n-" alt=""></p><p><strong>Fair Food Forum</strong></p> |                                                                                                                                                                                                                                                     |

### **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!!**<br>

* **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:**

![](https://lh3.googleusercontent.com/5jqyOvv2GPL8W0songWC_Azs_IIW__7emmQe_Ic6zLHZFeAyt-hA9k_f00jv-h3BbyK3PKkt_H9EZp1vrNe6BrefRHNLTy0_CnXAmUZco2LZeHty3pvwd2BNU727XQ9Be39pyBCv)