Higher Logic sites run on the Bootstrap framework and support a "responsive" user experience. While the base Bootstrap theme is applied to all community sites via CSS style sheets and a universal template, it can be edited/overwritten by applying Themes with the Theme Editor.

NOTE: For information about CSS editing for Bootstrap, see this getbootstrap.com article.

A Theme is a color scheme governed by CSS that's applied to a website to control its look. Using the Theme Editor, you can create and manage unlimited color Themes, or insert third-party code, that can be applied to your main community site (and any Microsites).

WARNING: Never delete a Theme that is being used and do not delete your mobile theme.

ACCESSIBILITY: Any time you're designing webpage or email-based content, it's more important than ever to keep modern accessibility principles in mind. Because this article touches on content design, we recommend referring to Best Practices - Accessibility and its associated resources.

Access the Theme Editor

1. In the Admin Toolbar, click Site Options > Themes (right click for a new tab).

Theme Editor page

The Theme Editor page lists your available Themes.

NOTE: Themes apply only to colors and CSS. A site's images, navigation, and other layout features are managed by the CMS and Page Designer, not by a Theme.

On the Theme Editor page:

• Click Create New Theme, and in the pop-up, give it a name and click Create Theme. You'll then be taken to the main Theme Editor. Refer to Creating/editing a Theme below for more information.

• The Sites Using This Theme column lists which sites each Theme is applied to. This makes it easy for you to identify which sites will be affected if the Theme is updated. Select a site and click Go to visit the site to review what it looks like before you change the Theme.

• Each Theme has an Edit button and a dropdown with additional options so that you can manage your Themes on one page. You can edit a Theme's CSS, copy its settings and CSS to create a new Theme, and delete a Theme (only if it's not applied to a site).

NOTE: Three Themes -- Affiliate, Network, and Experience -- are preconfigured and preloaded into every community site. Refer to Applying a Theme, below, for examples of these Themes.

Creating/editing a Theme

Whether creating a new Theme or editing an existing one, there are three ways to customize it.

NOTE: These three tabs are in hierarchical order, meaning choices made in the Color Picker override any Import Theme CSS, while the Override CSS takes precedence over the Color Picker AND Import CSS.

Additionally, you can toggle each of these theme options ON/OFF. Turning off options you aren't using can result in faster page loads across your site. When it comes to troubleshooting, if you have added CSS, imported a theme, or changed colors with Color Picker and these changes aren't rendering, check to make sure these theme options are toggled ON.

Method 1 - Import Theme CSS

Here, you can import external CSS, like a Bootstrap Theme or code that was purchased from another source or custom-developed for your organization by a third-party.

CSS defined

A Cascading Style Sheet (CSS) is a style sheet language that describes the presentation of a website written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including aspects like layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

How to import a Theme or CSS

When importing, you have two options:

1. Click Copy and Paste CSS to paste CSS code. This option allows advanced users to edit the theme once it’s imported, if you dislike the way certain aspects are rendering.
2. Click Upload Theme CSS File to upload a Theme file. This method displays an interface where you can browse for and upload your desired theme file. If you wish to alter a theme that has been imported this way, you can use the Color Picker or Override CSS interfaces to override aspects of the theme, or alter the original theme file outside of Higher Logic and re-import it.

Regardless of the method you choose, you can further edit the Theme using the Color Picker or Override CSS interfaces, if needed.

NOTE: Thousands of Bootstrap Themes are available for free or a small fee. In addition, Higher Logic provides various alternate Themes on the Themes List page.

Also, Bootstrap Themes are different than Bootstrap Templates. While Higher Logic websites allow Themes to be applied, the underlying Template cannot be edited. If you want to apply third-party-created styles to your site, do not attempt to do so with a Bootstrap Template.

Method 2 - Color Picker

Higher Logic's native design tool, Color Picker allows you to select and apply colors to different aspects of your site, and to emails that are generated from your Discussions. This Theme option is a great choice for those without any specialized knowledge of CSS, as no coding is required and color selections are done by simply selecting them or entering hex codes. Editable colors are organized in the eight available tabs, and changes made to each class is previewed in the Sample area to the right.

NOTE: If you make changes, click Save at the bottom of each tab.

Inheritance

Color selections made in the Main Colors tab are inherited across the site. However, you can override these "main colors" for specific aspects of your site by using the other tabs.

NOTE: Be sure to toggle Advanced Mode to ON to view all Color Picker tabs available to you. Keep in mind, though, that when you click these other tabs, the "main colors" of the theme are not reflected in the dropdowns or samples.

Discussions email colors

Colors used in email messages that are generated from your site's Discussions can be configured on the Discussions tab. Use these settings to customize the template that is used for your Discussions digest email messages.

NOTE: If colors are not set on the Discussions tab, Discussion emails will inherit the colors from the Main Colors tab.

Keep in mind:

• If you do have a Microsite, the email colors are determined by the theme or local design of that Microsite.
• If you do not have a Microsite, the email colors are determined by the theme or local design of your main site.

Method 3 - Override CSS

The last of the three theme options, Override CSS, is a powerful tool that allows advanced users fluent in CSS to insert any desired code they want, providing the greatest flexibility and control.

NOTE: CSS that is added here will override any Import Theme CSS or Color Picker selections. Click the Show Theme CSS button to see any imported CSS as you work.

Applying a Theme

Themes are only created and edited on this page; you can apply a Theme on the Set Up Your Site > Theme tab.

In addition to any Themes your organization may have created, Higher Logic provides three prefabricated, professional Themes for you to use: Affiliate, Network, and Experience.

• View a site using the Affiliate Theme
• View a site using the Network Theme
• View a site using the Experience Theme