Edit the CSS Class of a Theme

Prev Next

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

Who can use this feature?

System Administrator | Owner

Instructions

  1. Navigate to Modules and on the Site Tools tab, select Design Centermodules_-_site_tools_-_design_center.png

  2. Select Theme Managertheme_manager.png

  3. Select the layout and theme you want 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

    • Texttext.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 & Borderbackground_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 Internet Explorer 9 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 & Sizingspacing_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 Themessave_and_push_to_other_themes.png

      1. Choose the themes you want to push to choose_theme.png

      2. Select Save and Push Changessave_and_push_changes.png