Peer-to-Peer - Free & Flexible Site Template
This blueprint has been designed and tested for Peer-to-Peer only.
Features
The template is designed to work as a blueprint to your Peer to Peer Site
It features a full-screen fixed background image, or background color
The content is within a white area on top of the background image that can be updated with different styling selections available in the toolbar.
It is mobile optimized
There is support for custom or Adobe/Google Fonts*
HTML Editor availability for further customization
How to create a template from this blueprint
Go to Your P2P Site > Site Settings > Look and Feel, and then click on the Pencil Icon or Manage Templates on the right side.
The editor will open. On the left you’ll see various vertical tabs that allow you to adjust different parts of the template that will be created from the blueprint. For more information on what is available, read the information on the blueprint you are working with below
Give the template a name and Save. This will create a new P2P template for you to use on your current Site or future Sites.
Editing Free and Flexible blueprint templates
General
Basic main content styling and information
Item | Description |
Background Color | The background color of the main page. This will show if you do not have a background image |
Background Image URL | The background image of the page. This will be resized to fill the entire background but not distorted |
Footer Background Color | Set color for footer of the page |
Footer Content | Set content that will be shown in the footer of the page. Usually use for Organization Address |
Footer Text Color | Set footer text color |
Navbar Background Color | Set color for header navigation bar |
Navbar Text Color | Text color in the navbar |
Organization Name | The name of your organisation. This displays in the tab title in your browser, along with the page name, for example: |
Donation and secondary buttons
Item | Description |
Background color | Set background color for donation amount selections |
Border radius | Sets the roundness of the corners of the donation buttons. |
Hover background color | Sets the background color of the button when hovered over. |
Secondary button background color | Sets the background color of secondary action buttons. |
Secondary button hover background color | Sets the background color of secondary buttons when hovered over. |
Secondary button hover text color | Sets the font color of secondary buttons when hovered over. |
Selected background color | Sets the background color of a button when it is selected. |
Selected text color | Sets the font color of a button when it is selected. |
Text color | Sets the font color of a button when it is selected. |
Text hover color | Sets the font color of a button when it is selected. |
Transparent Container
Item | Description |
Body text color | Sets the font color for the main body text in the transparent container. |
H1 background color | Sets the background color behind the main heading (H1) in the transparent container. |
H1 text color | Sets the font color of the main heading (H1) in the transparent container. |
Text margin | Sets the outer spacing around the text inside the transparent container. |
Text Padding | Sets the inner spacing between the text and the edges of the transparent container. |
Button
Item | Description |
Button background color | Sets the background color of the button. |
Button border radius | Sets the roundness of the button corners. |
Button hover color | Sets the background color of the button when hovered over. |
Button hover text color | Sets the font color of the button when hovered over. |
Button text color | Sets the font color of the button. |
Main Container
Item | Description |
Container background color | Sets the background color of the main container. |
Container border radius | Sets the roundness of the main container’s corners. |
Container padding | Sets the inner spacing between the content and the edges of the container. |
container width | Sets the total width of the container. |
Text Styles
Item | Description |
Custom fonts | If you wish to use a font other than the ones provided, you can use Google Font’s service** by pasting in the code they give you. Or you can upload your own font files and use this to assign a font name to the file. |
Default font color | The color of all other text |
Default font family | The font that is used for all text on the page. You have a choice of all built-in browser fonts such as Arial and Verdana. If you wish to use an other font, choose “Other”. You will need to add any font code though which you can do under the “Fonts (advanced)” tab. |
Default heading color | The color of the Headings in your text blocks. If you want, can change individual heading types under each Headings. |
Error Text color | The color of the text when an error occurred. |
Error text font size | The base font size for all error text. |
Heading 1 font color | Sets the font color of the H1 heading. |
Heading 1 font family | Inherited by other headings. Defaults to be the same as the root font family |
Heading 1 font size | Sets the size of the H1 heading text. |
Heading 1 font weight | Sets the thickness (boldness) of the H1 heading text. |
Heading 2 color | Defaults to be the same as Heading 1 if left as var(–h1_color) |
Heading 2 font family | As for Heading 2 font family |
Heading 2 font size | Sets the size of the H2 heading text. |
Heading 2 font weight | Sets the thickness (boldness) of the H2 heading text. |
Heading 3 color | As for Heading 3 color |
Heading 3 font family | As for Heading 4 font family |
Heading 3 font size | Sets the size of the H3 heading text. |
Heading 3 font weight | Sets the thickness (boldness) of the H3 heading text. |
Heading 4 color | As for Heading 4 color |
Heading 4 font family | As for Heading 4 font family |
Heading 4 font size | Sets the size of the H4 heading text. |
Heading 4 font weight | Sets the thickness (boldness) of the H4 heading text. |
Heading 5 color | As for Heading 5 color |
Heading 5 font family | As for Heading 5 font family |
Heading 5 font size | Sets the size of the H5 heading text. |
Heading 5 font weight | Sets the thickness (boldness) of the H5 heading text. |
Link Color | Sets the font color of hyperlinks. |
Root Font size | Sets the base text size for the entire page. |
Root font weight | Sets the overall boldness or lightness of the base font used throughout the page. |
Donation pages
These items are specific to Donation pages only.
Item | Description |
Donation amount button color | For the buttons options, this sets the color of the donation buttons' background color |
Donations amount button hover color | For the buttons options, this sets the color of the donation buttons' background color when it is hovered over |
Donations amount button selected color | For the buttons options, this sets the color of the donation buttons' background when selected |
Donation amount button text color | For the buttons options, the sets the color of the font |
Donations amount button text hover color | For the buttons options, the sets the color of the font when hovered over |
Donations amount button text selected color | For the buttons options, the sets the color of the font when selected |
Donation amount input type | If using radios for your donation amounts to offer a string of choices, you can keep their style as radios or as buttons via this option |
Logo
Item | Description |
Favicon image URL | The URL of the “favicon”. This is the small image that appears in the browser tab |
Footer logo | The image displayed at the bottom (footer) of the template |
Footer logo alternative text | A short text description of the footer logo |
Header logo alternative text | A short text description of the header logo |
Header logo image URL | The URL of your logo that is shown at the top of the content |
Logo link | A hyperlink or redirect link when the logo image is selected/clicked. |
Progress Bars - List
Item | Description |
Progress List Background Color | Sets the background color of the progress bar track. |
Progress List Bar Height | Sets the thickness (height) of the progress bar. |
Progress List Bar Style | Sets the style or shape of the progress bar ends (e.g., square or rounded). |
Progress List Filler Color | Sets the color of the filled portion of the progress bar. |
Progress List Font | Sets the font family used for progress bar text. |
Progress List Font Size | Sets the size of the text displayed in the progress bar. |
Progress List Font Weight | Sets the thickness or boldness of the progress bar text. |
Progress List Text Color | Sets the font color of the text shown on or near the progress bar. |
Progress List Text Placement | Sets the position of the text in relation to the progress bar (e.g., above). |
Progress Bars - Page
Item | Description |
Progress Bar Page Text Placement | Sets the position of the text in relation to the progress bar (e.g., above, inside). |
Progress Bar Page Background Color | Sets the background color of the progress bar track. |
Progress Bar Page Style | Sets the style or shape of the progress bar ends (e.g., square or rounded). |
Progress Bar Page Filler Color | Sets the color of the filled portion of the progress bar. |
Progress Bar Page Font | Sets the font family used for progress bar text. |
Progress Bar Page Font Size | Sets the size of the text displayed in the progress bar. |
Progress Bar Page Font Weight | Sets the thickness or boldness of the progress bar text. |
Progress Bar Page Height | Sets the thickness (height) of the progress bar. |
Progress Bar Page Text Color | Sets the font color of the text shown on or near the progress bar. |
Additional functionality
Edit HTML- Allows you to customize the content by directly modifying the HTML code.
Using Google Fonts
See this article for more information
Due to recent EU decisions on GDPR it has been determined that some Google services, which includes Google fonts and scripts, are not compliant with GDPR due to the processing of IP addresses (IP address counts as Personally Identifiable Information (PII) under GDPR). The purpose of this email is simply to notify you of this ruling. If you have used Google fonts or scripts in any of your Engaging Networks pages, we recommend you download them from Google, upload them as assets into the Engaging Networks file library and then refer to these assets in your templates instead. This will remove any connection with Google’s servers and will prevent any data transfers occurring.