Higher Logic websites run on the Bootstrap framework and support a responsive user experience. While the base Bootstrap theme is applied to all Higher Logic sites via CSS style sheets and a universal template, it can be edited/overwritten by applying Themes with the Theme Editor.
NOTE: For more information about Higher Logic baseline styles and template structure, see our Bootstrap Documentation on HUG.
A Theme is a color scheme governed by CSS that's applied to a website to control its aesthetic 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 site (and any Microsites).
NOTE: Never delete a theme that is being used and do NOT delete your mobile theme.
Accessing the Theme Editor
- Click Admin in the Webmaster Links menu.
- Click themes.
Using the Theme Editor
The Theme Editor page lists each of your available Themes, and shows each site it's applied to, helping you understand which sites will be affected if it's updated.
NOTE: Themes refer only to colors and CSS: A website's images, navigation, and other layout features are not controlled by a Theme.
Each site using a Theme is listed in the Sites Using This Theme column, and you can see what it looks like by selecting one and clicking Go.
From here, you can:
- Create a Theme. To begin the process, give the new Theme a name and click Create Theme. You'll then be taken to the main Theme Editor where you can begin customizing your Theme. Refer to the Creating/Editing a Theme section below for more information.
- Edit a Theme. From the drop-down, you can edit a Theme's CSS, copy its settings and CSS to create a new Theme, and delete (only if it's not applied to a site).
NOTE: Three prefabricated, professional Themes are available for all clients: Affiliate, Network, and Experience. Refer to the Applying a Theme section for examples of each one.
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.
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:
- You can click this button to paste in CSS code. This option allows advanced users to edit the theme once it’s imported, if you dislike the way certain aspects are rendering.
- Or click this 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.
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: When you click the 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 a community has a Microsite, the email colors are determined by the theme or local design of that Microsite.
- If a community does 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 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.