Doing Your Own Customizations

Sumac CSS Field Editing Examples

Because Web Integration pages are generated specifically for your organization’s unique database, you can customize them to meet your needs.

Below you will find examples of how a web developer or web master can modify a Cascading Style Sheet (CSS) in order to change the appearance of a Sumac Web Integration page. Screenshots show you how you can identify and target specific tables, fields, elements, etc, to customize the visual aspects of that target.

Warning!

A. It is strongly recommended that you consult and work with a qualified website developer to achieve your desired customizations.

B. Once you customize your pages, you take complete ownership of them and they are no longer supported by Sumac.

C. CSS customizations will only allow you to change the visuals and not the content.

Additional Resources

Please see the Users Guide for information on how each page works. For example, some page content may or may not appear depending on the data in your database.
 

Example of targeting Awarding Grants Application fields with CSS edits

css customization
In this example of Awarding Grants Application field customization, the following changes can be seen:

  • The grant application table has a new solid blue border around it
  • The text color has been changed to red
  • The font style has been changed to Times New Roman

 

Example of targeting Contact Update fields with CSS edits

css customization
In this example of Contact Update form customization, the following edits can be seen:

  • The data entry table has a new background color of yellow
  • The text color has been changed to green
  • The width of the Apt/Suite field has been extended (this does not increase character count)

 

Example of targeting Course Registration fields with CSS edits

css customization
In this example of Course Registration form customization, the following edits can be seen:

  • The course registration table has a new solid green border around it
  • The text color has been changed to green
  • The font style has been changed to Times New Roman

 

Example of targeting Donation fields with CSS edits

css customization
In this example of Donation form customization, the following edits can be seen:

  • The donation personal information table has a new dotted black border around it
  • The background color has been changed to orange
  • The font style has been changed to Impact

 

Example of targeting Membership fields with CSS edits

css customization
In this example of Membership form customization, the following edits can be seen:

  • The membership table has the font style of cursive
  • The payment table has a new red border

 

Example of targeting Sign-up fields with CSS edits

css customization
In this example of Sign-up form customization, the following edits can be seen:

  • The width of the Country field has been increased (this does not increase character count)
  • A red border has been applied, along with a border radius to curve the field instead of having a rectangle (In most instances you can edit an individual field in a form to suit your customization needs)

 

Example of targeting Single Form fields with CSS edits

css customization
In this example of Medical Alert (custom) form customization, the following edits can be seen:

  • The custom form field table has the font style of Times New Roman
  • The text color is now green
  • A solid border has been applied

 

Example of targeting Ticketing fields with CSS edits

css customization
In this example of Ticketing form customization, the Google Chrome developer tool is used to find and show individual element IDs to locate and target CSS edits seen throughout other examples. A web master or web developer would be able to use Firebug or other similar tools to achieve the same kinds of edit.
 

Example of targeting Volunteer Management fields with CSS edits

css customization
In this example of the Volunteer Management form customization, the following edits can be seen:

  • The sumac content fields have the font style of Times New Roman
  • The text color is black
  • The background color is green
  • There is a solid border applied