Learn how to create a custom web theme in this step-by-step guide. This guide will cover creating a custom web theme that you can choose to use when creating a variety of forms and pages in Neon CRM.
Content
Navigating to the Custom Theme Editor
The Themes feature allows you to create customizable, mobile-responsive themes which match your organization's branding. This theme can be applied to the following types of front-end forms and pages across Neon CRM: (this list is not exhaustive; these are some of the most common uses):
- Account Forms
- Donation Forms
- Membership Forms
- Campaign Landing Pages
Instructions
Navigating to the Custom Theme Editor
There are a few ways to navigate to the custom theme editor and create a new custom theme in Neon CRM. Follow one of the options below, depending upon your situation:
Option 1 - Use this option if you are NOT simultaneously creating a new form or page AND a new custom theme. With this option, you can create the new theme and then later apply it to an existing (or future) form or page:
1. Select the Settings Cog in the upper right corner of the page and select Global Settings on the drop-down menu.
2. Select Web Themes under the Forms & Pages heading on the Global Settings page.
3. On the Web Themes page, select the New Theme drop-down menu and then select New Theme.
The New Theme pop-up will appear. On the pop-up:
4. Enter a Theme Name for the new custom theme.
5. Select the New Theme tile.
6. Select Next.
Skip down to the Creating a Custom Theme section below and continue with the process.
Option 2 - Use this option if you are simultaneously creating a new form or page and a new custom theme:
In the course of creating a new account form, donation form, membership form, or campaign landing page, you will find yourself in the Form Builder. You may create your new custom theme while in the Form Builder and then apply the new theme immediately to your new form or page. To access the custom theme editor when you are in the Form Builder:
1. Select the Theme Editor menu icon in the menu on the left side of the page while in the Form Builder. (Note: The image below is zoomed in to the left side of the Form Editor page.)
2. Select the My Themes tab.
3. Select the New Theme tile.
4. Enter a name for the new custom theme (the image below is zoomed in).
Next, move on to the Creating a Custom Theme section below to continue with the process.
Creating a Custom Web Theme
At this point, whether you followed Option 1 or Option 2 above, you are now at the same location in the process in the CRM. Let's continue building a custom theme!
The theme editor allows you to customize the header, content area colors and background, and footer of your forms and pages. The image below displays the anatomy of a form page in the CRM. It can serve as a reference point for the rest of this section of this guide.
Anatomy of a Page
The Theme Editor (as seen in the image below) consists of three sections (note: this image is zoomed in to the Theme Editor menu itself): the name of the theme in the top field, the Colors & Fonts section in which you set the background color(s) for the Header and Footer, the font and font colors for the Content Area, as well as the background color or image for the Content Area; the Header Content section in which you add the content items that appear in the Header; and the Footer Content section in which you add the content items that appear in the Footer. Let's begin in the Colors & Fonts section!
Colors & Fonts
As seen in the image above, this area is divided into three sections, as follows:
1. Page
In the Page section (as seen above), you may:
- a) Adjust the Font that displays in the Content Area.
- b) Adjust the Font Color that displays in the Content Area.
- c) Adjust the Theme Color for the Content Area (this adjusts the color of any buttons that may appear in the Content Area, not the background color).
2. Background
In the Background section (as seen above or in the zoomed-in image below), you may:
- a) Either set a Background Color or add a Background Image to the Content Area.
-
- To add a Background Image:
-
- 1. Select Add Image.
-
- To add a Background Image:
-
-
-
-
-
- 2. On the Insert Image pop-up (per the first image below), select whether you will Import from a URL, Browse Images from Server (i.e. upload the image from your computer), or Browse Images from Unsplash (a royalty-free image library). Note: If you select the Browse Images from Server option, you must select Upload on the Source pop-up (per the second image below), select the image from your computer, and then double-click the image when it appears on the Source pop-up.
- 3. Once you have made your selection, select Insert.
- 2. On the Insert Image pop-up (per the first image below), select whether you will Import from a URL, Browse Images from Server (i.e. upload the image from your computer), or Browse Images from Unsplash (a royalty-free image library). Note: If you select the Browse Images from Server option, you must select Upload on the Source pop-up (per the second image below), select the image from your computer, and then double-click the image when it appears on the Source pop-up.
-
-
-
3) Header & Footer
In the Header & Footer section of the Colors & Fonts section (as seen in the zoomed-in image below), you may select the background colors for the header and footer.
Header Content
As seen in the image above, the Header Content area of the Theme Editor allows you to add content to the header section, as follows:
1) Logo
If you wish to add your logo to public-facing forms and pages:
- a) Select Add Logo.
- b) Select either Import from a URL or Browse Images From Server on the Add Logo pop-up.
-
- If you Import from a URL, you must provide the URL.
- If you Browse Images From Server (i.e. upload the image from your computer):
-
- 1. Select Upload on the Source pop-up.
- 2. Locate and select the image on your computer.
- 3. Double-click the image on the Source pop-up.
- 4. Select Insert.
- 5. You may adjust the Logo Width as needed to adjust its size.
-
-
2) Navigation Links
If you wish to add links to the header to connect to pages on your website, you may select the Add Navigation Link (per the Header Content image above), add a name for the link, and enter its URL. You may add up to three links to the header.
Footer Content
As seen in the image above, the Footer Content area of the Theme Editor allows you to add content to the footer section, as follows:
1. Columns
This section allows you to divide the footer into one, two, or three columns. For best results, follow this rule-of-thumb:
- If you wish the text in your footer to appear on the left side of the footer, select the 1 Columns button and enter your text in the Column 1 field.
- If you wish the text in your footer to appear on the right side of the footer, select the 2 Columns button and enter your text in the Column 2 field.
- If you wish the text in your footer to appear in the center of the footer, select the 3 Columns button and enter your text in the Column 2 field (as seen in the image above - if you look at the "Anatomy of a Page" image at the start of this section, the "Agloe Nature Center" text has been centered in the footer using this method).
2. Social Media
If you wish to add social media icon links to the footer, select the Display social media links toggle to the "On" position. Once you turn this toggle on, the following options appear (as seen in the image below).
- Let's begin with the third item down, the Types section. To add social media links:
-
- a) Select the social media icon image to select the social media platform you wish to add.
- b) Enter your organization's URL for the selected social media platform in the corresponding field.
- c) If you wish to add additional social media icons to the footer, select Add Another Type and repeat steps "a" and "b" above.
- a) Select the social media icon image to select the social media platform you wish to add.
-
- Once you have all of your social media icons selected and set up per the above instructions, you can choose, in the Alignment section (as seen in the image above), to align the icons to the left, center, or right side of the footer.
- Additionally, once you have all of your social media icons selected and set up per the above instructions, you can select their Style (as seen in the image above). As a rule-of-thumb, if your footer background color is dark, select Light Icons to make them appear prominently. If your footer background color is light, consider using the Dark Icons option to make them appear prominently.
Once all of your custom theme options have been set, select Save.
Editing an Existing Web Theme
If you would like to edit a custom theme you have already created (or any of the ready-made themes that come standard with the CRM):
1. Select the Settings Cog in the upper right corner of the page and select Global Settings on the drop-down menu.
2. Select Web Themes under the Forms & Pages heading on the Global Setting page.
3. On the Web Themes page, search for your theme and/or apply filters to locate your theme and select the three dot Action Menu on the theme tile, then select Edit Theme on the drop-down menu.
The Theme Editor will then open and you may make changes to your theme as needed. Ensure, once you have made your changes, to select Save to save your changes.