Welcome, Guest Login
Higher Logic User Group Site Higher Logic User Group Site Higher Logic Support Center

Support and Documentation

Theme Editing: Color Picker and CSS Inputs

Last Updated: Oct 23, 2015 08:45AM EDT

Through themes, admins have great flexibility to determine the colors and styles underlying Higher Logic websites. Higher Logic websites run on the Bootstrap framework and support a responsive user experience. Higher Logic's base Bootstrap theme is applied through the primary CSS style sheets and a universal template underlying all Higher Logic websites. The base theme is edited/overwritten by inputs in the three-tiered theme editing area.

Higher Logic's theme editor provides three sequential inputs for color and style choices. Bootstrap themes can be applied via paste or upload in the Import Theme CSS area.  Baseline colors and uploaded theme colors can then be modified with Color Picker.  These choices can then be overruled with a last-to-load Override CSS area.  

For more information about Higher Logic baseline styles and template structure please see the Bootstrap Documentation on HUG. 

Import Theme CSS

The Import Theme CSS area allows CSS theme files to be immediately uploaded or applied by copy/paste. Following upload these files can be locally edited in the Import Theme CSS area.

Thousands of Bootstrap themes are available for free or a small fee across the internet. Alternate themes are provided by Higher Logic to clients. 

Note that Bootstrap "themes" are very different from Bootstrap "templates".  Higher Logic websites allow "themes" to be applied.  The underlying "template" is not editable.  Admins looking to apply third-party-created styles to their site should not attempt to apply a Bootstrap template to their sites.

Color Picker

The Color Picker tool allows for the creation of color schemes for Microsites and email generated by Discussions. Color Picker is used on the Theme Manager page and the Theme Tab of the Site Setup area. "Color Picker" is considered to include only the multi-tabbed environment where colors are selected. Color Picker also presents user with access to the CSS Editor for the local design or Theme being edited.

Access and Use

The creation or modification of a Theme on the Theme Editor page is generally the recommended use of Color Picker. The creation of non-transferable local designs meets some business needs, but can result in a well-styled site color scheme and its accompanying CSS being "trapped" on a single Microsite.

Color Picker as seen when editing a local design. The Main Site Colors category tab is selected and the color chart for Primary Color accessed

Color Picker's primary use is fairly straightforward.  General aspects of the site are grouped in category tabs seen at page top. On each tab, specific color areas of the site are described at left, and a color chart is displayed when the dropdown for "Select Color" is selected for any area. The color chart displays the current color selected and provides its hexadecimal code. To the right of the code at top of the color chart is a button to reset to null (no color). Tabs at the bottom of the color chart allow the selection of colors in RGB, HSB, and HSV formats. Following the selection of colors the Sample window at right provides a preview of the color combination selected.

Note: the RGB tab allows the direct input of hexadecimal color values.

Inheritance

Color Picker also features inheritance. Colors selected in the Main Site Colors tab are inherited by areas included in other tabs. The inheritance of colors established in the Main Site Colors tab is not identified within other tabs.

Color Inheritance Table

Use the table below to determine the source of inherited colors across Color Picker's category tabs. On the chart below, the Color Area is determined by the Parent Color unless set specifically. If NULL there is no inheritance for the color in the Color Area column.

Areas Not Impacted by Color Picker

Not all aspects of a site are impacted by Color Picker. The tabs on Community Landing Pages are a primary example - community tabs on these pages are gray on all sites. Areas not unless impacted by the Color Picker can be modified through theme CSS. This is generally not recommended.

Discussion/eGroup Email Colors

Note that the colors for email generated for Discussions is changed using Color Picker. If the Community has a Microsite the Theme or Local Design governing that Microsite will determine the colors of email output. If there is no Microsite for the Community the email colors will be determined by the Theme or Local Design for the main Microsite.  A Discussions tab on Color Picker allows individual colors to be set.  If the Discussions tab of Color Picker has no values the colors will be determined through the Main Site Colors tab and inheritance.

Override CSS

The Override CSS editor (also known as the "Advanced CSS Editor") allows unique CSS code to be accepted. Through the Advanced CSS Editor Admins may add CSS coding that will be included at the end if the site's style sheet, allowing Admins to add new classes or override the existing classes. Inputs made here for a theme will impact all sites using that theme. Inputs for a local design will impact only that Microsite. Redacting any CSS inputs is accomplished by simply deleting inputs.

Access and Use

The CSS Editor is accessed in different places depending on whether it is editing CSS for a theme or a single-Microsite's local design.

Theme CSS

The Theme Manager page presents an Edit CSS buttons for each Theme. The CSS Editor button is also accessible at the top right of the Color Picker tool for editing a Theme's color scheme.

Local Design CSS

The Advanced CSS Editor is available at the top-right of Color Picker when editing a local design through the Site Setup Theme tab. Selecting the "Local Design" radio button will expose theColor Picker tool.

CSS Editing

The CSS Editor allows direct coding -- only those who possess CSS developer skills should expect success using it. Clients who do not possess CSS skills on staff are encouraged to contract with a freelance professional or Higher Logic partner for best results.  

 

support@higherlogic.com
http://assets1.desk.com/
false
higherlogic
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete