Customizing Theme Elements

Applying Utility Classes

Our standard themes include CSS utility classes that can be applied to widget containers, links, or text to alter the appearance. This technique is available for advanced users who want more control over the page appearance and are comfortable looking at small code snippets.

Button classes (for links)

This will make a link look like a button, which is useful for calls to action that should be visually prominent.

  • Default button: button (black)
  • White button: button button--white (white)
  • Primary button: button button--primary (primary branding color)
  • Secondary button: button button--secondary (secondary branding color)
  • Tertiary button: button button--tertiary (tertiary branding color, if set)

To add these classes to a link:

  1. Create a text link (learn about adding links)
  2. In the WYSIWYG/text editor, view the HTML view by selecting the "Source" button.
  3. Add a class attribute with your desired class names to the link element <a> tag, for example:
    ​​​​<a class="button button--primary" data-url="http://example.com" href="http://example.com">My link text</a>
  4. Save and view the changes. 

Text classes (for text)

Changes the color of the text. Use sparingly. We do not recommend altering the color of headings or using the same color that is used for links as a color for plain text. These classes are not available in Eligendi or Gamma themes, but will be added soon.

  • White text: text-white (white)
  • Primary text: text-primary (primary branding color)
  • Secondary text: text-secondary (secondary branding color)
  • Tertiary text: text-tertiary (tertiary branding color, if set)

To add these classes to text:

  1. Type the text.
  2. In the WYSIWYG/text editor, view the HTML view by selecting the "Source" button.
  3. Add a class attribute with your desired class names to the paragraph element <p> tag, for example:
    ​​​​​
    ​​​​<p class="text-primary">My paragraph with primary colored text.</p>

  4. Save and view the changes. 

The classes can also be added to other tags that contain text, such as <div> or <span> tags.

Background classes (for widgets)

Applies a background color to a widget and changes text and link colors to match. These classes are not available in Eligendi or Gamma themes, but will be added soon.

  • White background: bg-white (white)
  • Default theme background: bg-theme (generally a light gray)
  • Primary background: bg-primary (primary branding color)
  • Secondary background: bg-secondary (secondary branding color)
  • Tertiary background: bg-tertiary (tertiary branding color, if set)

Layout classes (for widgets)

These classes are not available in Gamma themes, but will be added soon.

  • Full width: w-full (allows for section to go full width)
  • Medium width: w-medium (constrains section to 1024px with auto margins)
  • Block contain: block-contain (should be used with w-full or w-medium to center content)

Spacing classes (for widgets)

Applies both top and bottom padding, generally used when applying a background color. These classes are not available in Eligendi or Gamma themes, but will be added soon.

  • space-y-10 (top and bottom padding of 20px)
  • space-y-20 (top and bottom padding of 40px)

Applies bottom margin (increasing by incremental of 4).

  • mb-2 (8px)
  • mb-3 (12px)
  • mb-4 (16px)
  • mb-5 (20px)
  • mb-6 (24px)
  • mb-7 (28px)
  • mb-8 (32px)
  • mb-9 (36px)
  • mb-10 (40px)

To add these classes to a widget container:

1. Edit the widget.

2. The custom class name field appears at the bottom of a widget form. Add css classes in the field. Separate multiple class names with a space.
add css class to widget's container

3. Save and view changes.

This feature is available in the following widgets:

  • Accordion
  • Column
  • Custom Text/HTML widget
  • Embed Media widget
  • Featured Posts
  • List of Files
  • List of Posts
  • Random widget
  • Slider widget
  • Tabs
  • Taxonomy widget

Altering the Styling of a Page Element

You can add custom CSS for any HTML element to override the styles defined in your theme.

1. Find the element that you'd like to change. Example: an H2 tag ("Quick Links")

2. Use your browsers developer tool panel to inspect the element and find the correct selector
check element with inspector

3. Create an Embed Media Widget and add appropriate code in the Web Tab custom css for H3

4. Add Embed Media Widget to Layout of the page  (any location)

5. Save Layout

After applying the custom css, the H3 headers becomes red in color.
header with custom css - red

Add Custom CSS Class to Widget Container

Custom CSS classes can be created and applied to the markup of a widget’s outer container. The class names can then be used as selectors in a custom theme. This feature is available in the same widgets listed above in the instructions about adding utility classes.

1. Edit the widget.

2. The custom class name field appears at the bottom of a widget form. Add CSS classes in the field. 
add css class to widget's container

3. Define CSS rules for the custom CSS class in an Embed Media widget and place the Embed Media widget to the same layout where the widget resides on.  

For example: a rule of css which sets text color to green 

<style>
.custom-class-name {
    color: green;
}
</style>

4. Custom class name(s) in the markup
css class name example