Website Integration - Applying CSS Stylesheets to Do Your Own Customization!

Website Integration - Applying CSS Stylesheets to Do Your Own Customization!

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 Contact Update fields with CSS edits

In this example of Contact Update form customization shown below, the following edits can be seen:
  1. The data entry table has a new background color of yellow
  2. The text color has been changed to green
  3. The width of the Apt/Suite field has been extended (this does not increase character count)

css customization 


Example of targeting Course Registration fields with CSS edits

In this example of Course Registration form customization shown below, the following edits can be seen:
  1. The course registration table has a new solid green border around it
  2. The text color has been changed to green
  3. The font style has been changed to Times New Roman

css customization 


Example of targeting Donation fields with CSS edits

In this example of Donation form customization shown below, the following edits can be seen:
  1. The donation personal information table has a new dotted black border around it
  2. The background color has been changed to orange
  3. The font style has been changed to Impact

css customization 


Example of targeting Membership fields with CSS edits

In this example of Membership form customization shown below, the following edits can be seen:
  1. The membership table has the font style of cursive
  2. The payment table has a new red border

css customization

 


Example of targeting Sign-up fields with CSS edits

In this example of Sign-up form customization shown below, the following edits can be seen:
  1. The width of the Country field has been increased (this does not increase character count)
  2. 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)

css customization 


Example of targeting Single Form fields with CSS edits
In this example of Medical Alert (custom) form customization shown below, the following edits can be seen:
  1. The custom form field table has the font style of Times New Roman
  2. The text color is now green
  3. A solid border has been applied

css customization 

Example of targeting Ticketing fields with CSS edits

In this example of Ticketing form customization shown below, 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.

css customization




    • Related Articles

    • What is Website Integration?

      Sumac can integrate with your website in a few different ways: online donations, contact info updates or newsletter sign-ups/unsubscribes, membership renewals (requires Membership Add-on), ticket sales (requires Ticketing Add-on), and course ...
    • What is "customization" in Sumac?

      In Sumac, customization is all about adding the finishing touches to make sure the fields, terminology, and preferences in your database fit with your organization’s needs and objectives. Although not everything in Sumac is customizable, you can add ...
    • Website Integration Guide – Setting up Sumac for online Course Registration

      Before you are able to start using your Courses web page, you need to tell Sumac which payment processor to use when charging fees for registrations. To do this go to Sumac Console/Utilities/Customize Database/Preferences/Payments. In the Payments ...
    • How-to Video: Customization - Get Started with Customization (3:14)

      Script:  https://sumac.com/assetswp/training-docs/Customize%20Database%20Overview.pdf
    • Does Sumac automatically receipt online donations? How do I set this up?

      If you are using Sumac's Website Integration service, Sumac can automatically receipt online donations. When someone donates online, Sumac will send the donor an email confirming that the donation was received and will send the donor's receipt as an ...

    Contact Us

    1-877-399-4645