Create & Edit Themes
HLHigher Logic websites run on the Bootstrap framework and support a responsive user experience. While the base Bootstrap theme is applied to all HL sites via CSS style sheets and a universal template, it can be edited/overwritten by applying Themes with the Theme Editor.
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 MicrositesOrganizations that license the Microsites module can create and manage independent websites for each of their communities, each with a unique design, layout, and navigation.).
NOTE: Never delete a theme that is being used and DO NOT delete your mobile theme.
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 menu, and you can see what it looks like by selecting one and clicking Go.
From here, you can:
- Create a new 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 an existing Theme. From the drop-down, you can also edit the Theme's CSS, copy its settings and CSS to create a new Theme, and delete it altogether (you can only delete a Theme 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.
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.
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 HL 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, HL provides various alternate Themes, available on the Themes List page.
Also, Bootstrap Themes are different than Bootstrap Templates. While HL 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.
HL's native design tool, Color Picker allows you to easily select and apply colors to different aspects of your site, and to emails 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 any changes, make sure to click Save at the bottom of each tab.
Color selections made in the Main Colors tab are inherited across the site, but can be fine-tuned in the remaining tabs, if desired.
NOTE: This color inheritance is not reflected in the remaining tabs.
Discussion Email Colors
Colors used in emails generated from your site's Discussions can be updated on the Discussions tab. Keep in mind:
- If a community has a MicrositeOrganizations that license the Microsites module can create and manage independent websites for each of their communities, each with a unique design, layout, and navigation., the Theme or local design governing that Microsite determines the colors of email output.
- If a community does NOT have a Microsite, the email colors are determined by the Theme or local design of your main site.
NOTE: If no colors are set on the Discussions tab, Discussion email colors are determined through your main site's Main Colors tab and inheritance.
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 see any imported CSS as you work.
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, HL provides three prefabricated, professional Themes for you to use: Affiliate, Network, and Experience.