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





    Our products got an upgrade!



    Some screenshots and help videos have been made using older versions of our products. Though your version's colours and themes may appear different than what you see here, the instructions, links and advice in this article are still accurate and useful!

      • Related Articles

      • 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 set up your website integration

        You will need The following are required before you can complete the setup of your website integration A website! You will need access to the back-end of the site in order to complete this setup. A payment processor account. We work with Stripe or ...

      • How-to Video: Customization - Get Started with Customization (3:14)

        NOTE: The video below shows a slightly older version of Sumac. In a recent release, Lookup Lists was renamed to Field Values: 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 ...
      Societ Academy

      Learn what you need to know, any time. Free!
      ​


      • High quality training on demand - sessions are available every day, so you can access training that fits into your schedule.
      • Training sessions that are easy to follow - helpful tips throughout each session, and access to training moderators ensure your questions get answered.
      • A certificate of completion - you can request a certificate of completion for every session you attend.