Skip to main content
  1. Foundant Technologies
  2. CommunitySuite
  3. CommunitySuite - Communication

Customize Giving Hub and Portal Styles

  • Last Updated

Styles control the visual appearance of your Giving Hub, Grant Catalog, Event Tickets, Nonprofit Directory, and Portal. Use styles to customize colors, layouts, and page sections using either basic color selection tools or advanced CSS and HTML customization.

You can create and save multiple styles within your site, allowing you to update your organization's public-facing information to match holiday seasons or themed fundraisers without needing to manually update the page's CSS every time. 

Who: Administrators and communications teams who manage the public-facing 
appearance of the Portal and Giving Hub.

When to Use Styles

Use Styles when:

  • Matching the Giving Hub or Portal appearance to your organizational brand colors and design.
  • Creating seasonal or campaign-specific themes without permanently changing the default design.
  • Customizing page layouts, headers, footers, and content sections using CSS and HTML.
  • Managing multiple funds, nonprofit directories, or event campaigns that require distinct visual identities.
Customizations to your CSS or HTML have the potential to break critical functions within your portals. If necessary, your Portal Styles can be reset to default; however, we will not be liable for the cost of having your website team rebuild the CSS and HTML. It is highly recommended that a web designer or developer be the only person to edit your HTML and Advanced CSS.

 

Basic Style Editor Mode allows users to select colors and set a style. When using basic style editor mode, users choose colors for specific areas on the Giving Hub or Portal and save those selections as styles. Multiple styles can be created and applied to the different Giving Hub or Portal pages. These features are also available in the Advanced Style Editor Mode.

To create custom colors for your Giving Hub or Portal pages, add colors that define the appearance of specific page areas. 

  1. Navigate to the Styles page and click Add Color in the left-side menu.
  2. Enter the color name.
    color name
     
  3. Click the color select boxes next to each area to set its color.
    • Click the arrows next to R G B in the bottom of the color editor to toggle the color edit method to H S L and hexadecimal options.
      color select box
       
  4. Click Create after color selections are complete. 
    create button
     

After creating colors, use Add Style to combine them into a style.

To apply your custom colors and other customizations to specific Giving Hub or Portal pages, create a style using the colors you have added.

  1. Navigate to the Styles page and click Add Style in the left-side menu.
  2. Click a Style Type.
    • The style type selected will determine the page to which the style is applied when published.
      • Portal Fund Style - Applies fund styling in the Fund Advisor view of the Portal.
        style types
         
  3. Select the applicable Create Style information, and then click Create. 
    • If no CSS styles are available, the dropdown will not populate; however, a style can still be created.
      create button

Once a style has been created, it can be previewed and published by using the left-side menu options. Publishing a style will apply it to the corresponding page based on the style type selected. 

Once a style type has been created, a bulk add option will be available depending on the style type. The following steps cover the Bulk Add Funds option, but they apply to other style types.

  1. Click the ID of the style.
    style id
     
  2. Click Bulk Add Funds in the left-side menu.
  3. Add any applicable filters.
    bulk add funds button
     
  4. Click Add Fund Style in the left-side menu.
  5. Check the box for each fund to which the style will be applied, and then click Add to Style.
    add to style button

 

The following example of a Giving Hub has a color and style applied that uses stark contrasts of color to demonstrate which colors correspond to the different areas of the Giving Hub. Your colors and Giving Hub will look different based on the color selections used.

giving hub example

 

Advanced Style Editor Mode includes all Basic Style Editor Mode features, such as Add Color and 
Add Style, plus two additional left-side menu options of Add Content and Add Option. Add Content allows users to customize the head, banner, and footer of the Giving Hub pages. Add Option contains choices for page display, such as list versus grid view, and whether service areas, steward information, or grant types display on the pages. 

To customize the head, banner, or footer sections of your Giving Hub or Portal pages using HTML, add content in Advanced Style Editor Mode.

If a head, banner, or footer is created, it will be set as the default and will be applied to all Giving Hub pages. If a head, banner, or footer is not wanted on all Giving Hub pages, then create a "blank" default first.
 
Content requires the use of HTML formatting. It is highly recommended that a web designer or developer be the only person to edit your HTML and CSS.
  1. Navigate to the Styles page and click Add Content in the left-side menu.
    • If Add Content is not listed in the left-side menu, then ensure Advanced has been selected in Style Settings.
  2. Click the content type that will be added.
    content type
     
  3. Enter the applicable Create Content information, and then click Create.create button
     

To configure page display settings, such as list versus grid view or which information displays on Giving Hub and Portal pages, add options in Advanced Style Editor Mode.

  1. Navigate to the Styles page and click Add Option in the left-side menu.
    • If Add Option is not listed in the left-side menu, then ensure Advanced has been selected in Style Settings.
  2. Add the applicable Create Options information, and then click Create.
    create button
Was this article helpful?
0 out of 0 found this helpful
Return to top