Style Editor Overview

How-To

Written by Sydney Henderson

Last published at: April 7th, 2021

Within System Data, the Styles feature gives your foundation the ability to change the look and feel of your Fund Advisor Portal, Donation Portal, and Grant Catalog by adding custom CSS & HTML. Edits made in the Styles area should only be attempted by a qualified web designer.


Customizations to your CSS or HTML have the potential to break mission critical functions within your Portals. If mistakes are made, we can reset your Portal Styles to default, but we will not be liable for the cost of having your website team rebuild the CSS and HTML.

To access the Styles feature:

  1. Navigate to System Data.
  2. Click Styles from the left side menu.
  3. Select the Feature Style that you want to customize from the left side menu.

4. All actions that the Style Editor can perform are found at the bottom of the page.

  • Auto Format will format content in the Style Editor. This can be useful when copying/pasting content from minified source code. This operation does not perform a Save.

  • The Preview button will save a temporary version of the content being edited and open a new window with a preview of the portal page.
  • The CSS, Banner HTML, and Footer HTML buttons allow you to edit each of those content types.
  • CSS content will load into the header of the portal section being modified.

  • Banner HTML content will load above all content in the portal being modified.

  • Footer HTML content will load below all content in the portal being modified.

If incorrect content has been entered, the Style Editor will display a red X for the affected line item and you will not be able to save until the content has been fixed. An Error button will also display in the lower-left corner of the screen. Use the up and down arrows to quickly jump to errors within your content.

  • The Default Settings button will save your current work and allow you to edit the Style Layout Defaults and Portal Skin versions.

  • Save will save all content in the CSS, Banner HTML, and Footer HTML editors.

 Clicking Save will refresh Preview mode, but does not promote the content into live mode.

  • The Promote button will save the current content and update the live version to reflect the changes made in your Style Editor.