Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Edit the CSS Class of a Theme

  • Updated:

This article will show you how to change the CSS class of a theme. 

 

Who can use this feature?

System_Admin.png Slash.png Owner.png

 

 

Instructions

  1. Navigate to Modules > Site Tools > Design Center
    modules_-_site_tools_-_design_center.png
  2. Select Theme Manager
    theme_manager.png
  3. Select the layout and theme you are wanting to edit
    layout_and_theme.png
    • Note: Here we will be updating the CSS Class of an Interior Theme, but the steps are the same for a Home and Simple Theme.
  4. Scroll down the page to where you see an example of the different CSS classes
    css_class_examples.png
    • Note: In the example above, the following CSS classes are listed:
      • Headline: Welcome to Design Center's Theme Manager
      • Heading Level 2 (Subhead 1): How do I get started?
      • Heading Level 3 (Subhead 2): More details
  5. Click on the CSS class you wish to change
    click_css_class.png
  6. Navigate through each tab and make desired changes
    • Text
      text.png
      • Font Family: The type of font you want to use
      • Style: The thickness of the text
      • Color: Select the color of the text that will appear
      • Size: How big the text will appear
      • Alignment: How the text aligns on the page
      • Underline: Choose whether or not to underline the text
      • Shadow: Edit the shadow for the text
    • Background & Border
      background_and_border.png
      • Background Color: Modify the color of the background
      • Background Gradient: Edit the background gradient
        • Note: Background Gradients are supported by modern browsers, but in IE9 or below they will display as a solid color that is an average of your start and stop colors.
      • Background Image: Upload a background image
      • Border: Set the style, width, and color of the border
    • Spacing & Sizing
      spacing_and_sizing.png
      • Margin: Update the margin size
      • Padding: Edit the padding size for the CSS class
  7. Select X to close the window
    close_window.png
  8. Choose a saving option at the top:
    • If saving these changes to only the current theme, click Save Changes
      save_changes.png
    • If saving and pushing these changes to other themes, click the drop-down next to the Save Changes button and select Save and Push Changes to Other Themes
      save_and_push_to_other_themes.png
      1. Choose the themes you want to push to
        choose_theme.png
      2. Select Save and Push Changes
        save_and_push_changes.png
Was this article helpful?
0 out of 0 found this helpful
Return to top

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

0 comments

Please sign in to leave a comment.