Styles give your organization the ability to change the look and feel of your (legacy) Fund Advisor Portal, (legacy) Giving Hub, 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 critical functions within your portals. If mistakes are made, we can reset your Giving Hub Styles to default, but we will not be liable for the cost of having your website team rebuild the CSS and HTML. We highly recommend that a web designer or developer be the only person to edit your HTML and CSS.
Navigate to Styles
- Navigate to the Styles page and click Legacy Styles in the left-side menu.
- Click the Legacy Style ID.
- Edit the HTML and CSS relating to that style.
Set Up a Style Editor User Group
If you would like to set up a user, such as a web developer, in your site to edit your styles but not allow them to view anything else, a User Group can be created with exclusive access to that area. User Groups has additional information regarding creating a new user group and user group permissions beyond what this article details. Once you have created a user group, follow the steps below to set up your style editor user group.
- Navigate to the Groups page.
- Click the ID of the group you would like to act as your style editor user group.
- Click Group Permission in the left-side menu.
- Select None for all objects except for System Data, and then click Save.
- Click Group Permission in the left-side menu.
- Click System Data.
- Click [Show Advanced] to access the custom System Data permissions for the user group.
- Uncheck the box for all permissions except for Styles, and then click Save.
Add a User to the User Group
- Navigate to the Users page.
- Click the ID of the user you would like to add to the group.
- Click Edit in the left-side menu.
- Check the box next to the user group, and then click Save.
Additional Information
Once a web developer has been set up within CommunitySuite, they should have access exclusively to the styles area but not be able to view any accounting information. In addition to providing a web developer with the URL to the styles area, it is recommended that they be provided with the Giving Hub URL and the Fund Advisor Portal URL. Any user can view the Giving Hub URL as long as they have the link to it. Giving Hub Setup (Legacy) and Affiliate Portal have additional information regarding both portal pages.
When editing your styles or having someone else edit your styles, making sure that the editor is set up as a fund advisor will ensure that they can view the fund advisor portal and see that all edits being made are accurate and functional. The Support Hub contains several resources that are beneficial when setting up the fund advisor portal and fund advisors.
Besides ensuring that your web developers are properly set up in your site, below are recommendations when directly editing the HTML and CSS styles.
iFrames and Embedded Forms
iFrames and embedded forms should be avoided if possible in all style edits. The styles support this functionality; however, Chrome, Safari, Edge, Firefox, and most browsers block 3rd party cookies by default, which disables the iFrame functionality.
JavaScript Usage
Javascript should also be avoided when editing styles. Javascript code will break style formatting and functionality when it is embedded into an external site.
Common Usage
If you want to edit the styles in your site yourself, it is recommended that you educate yourself on HTML and CSS best practices before doing so.
However, one common change to styles is updating an affiliate organization's Giving Hub logo. Below is a basic set of instructions on how to update your affiliate organization's Giving Hub's logo.
- Navigate to the Styles page.
- Click Legacy Styles in the left-side menu.
- Click the ID of the affiliate you would like to update.
- Before editing any CSS, make sure your logo image is hosted somewhere and you have a link to the image. Many hosting services will also provide a hotlink to the image, which will make updating the CSS much easier.
- Click Banner HTML.
- Paste the following code into the code box (Keep the formatting and line breaks):
<div class="col text-center">
<img src="Hotlink or Image link from image hosting site goes in here" />
</div>
- Click Save and then Preview to view the changes. If the changes look acceptable, click Promote to publish the changes to your code.