Customizing the look and feel of HCL Connections
The Connections custom styles are a generic and simplified way of applying style customizations to Connections components. The core idea is that components expect and support properties to define their style.
Throughout this topic, you will find names such as --color-header
. These names translate to CSS properties that are used throughout UI components, and which you can modify according to your preferred styling. For instance, you can adjust the colorway to match different themes and branding requiremnts. In other cases, you can resize elements or fonts. Connections provides integration points for overwriting these values in a declarative manner to adjust the look and feel of the UI.
Applying custom configuration
The custom styles use the extension type com.hcl.connections.custom.style
.
For guidance on how CSS properties should be defined, refer to the following JSON snippet. This example contains properties that can be used to alter the makeup of the header:
{
"style-customization": {
"generic": {
"--color-header": "red",
"--color-navigation": "yellow",
"--color-footer": "pink",
"--color-itmbar": "cyan",
"--size-itmbar-icon": "30px"
},
"top-navigation": {
...
}
}
}
The example uses some of the following properties and supports others:
-
generic
object expects key-value pairs that would overwrite the existing styles contained in the base Connections UI. The values for this fall into different categories:color
values need a valid color value, for example HEX.-
size
values need a valid size value, for examplepx
.--font-size
counts as a size value and is defined inrem
by default. -
font-weight
values need a valid font weight, for example400
orbold
. font-family
values need a valid font family value, such asHelvetica Neue, Arial, sans-serif
.
-
top-navigation
object relates to elements and their positioning within the header. For more information, refer to Customizing the header.
Customizing other UI components or areas
For an expanded list of all currently existing properties that you can use to customize a UI component or area, refer to the following tables.
Fonts
Connections primarily uses the following font sizes, weights, and families:
// Font sizes
--font-size-xlarge : 1.5rem;
--font-size-large : 1rem;
--font-size-medium : 0.875rem;
--font-size-small : 0.75rem;
--font-size-xsmall : 0.625rem;
--font-size-header : 1rem;
// Font weights
--font-weight-bold : bold;
--font-weight-normal : 400;
// Font Family
--font-family : Helvetica Neue, Arial, sans-serif;
Which renders as the following:
To change font styles, refer to the following sections.
Font sizes
To change the size of the indicated text category or area, use the following properties:
Property key | Default value | Usage |
---|---|---|
--font-size-xlarge |
1.5rem | Content headlines |
--font-size-large |
1rem | Top navigation links |
--font-size-medium |
0.875rem | Most content |
--font-size-small |
0.75rem | Captions and footnotes |
--font-size-xsmall |
0.625rem | Side navigation text |
--font-size-header |
1rem | Header area |
Font weights
To change the visual weight of the indicated text category or area, use the following properties:
Property key | Default value | Usage |
---|---|---|
--font-weight-bold |
bold | Header, @mentions |
--font-weight-normal |
400 | Most content |
--font-weight-header |
bold | Header area |
Font family
To change the fonts for all content, use the following properties:
Property key | Default value | Usage |
---|---|---|
--font-family |
Helvetica Neue, Arial, sans-serif; | All content |
Font colors
To change the color of the indicated text category, use the following properties:
Property key | Default value | Usage |
---|---|---|
--color-text-primary | #000000 | Primary text color (all normal text) |
--color-text-secondary | #3D5466 | Secondary text color (e.g. captions) |
Main content
To customize the background colors and separators (box shadows and borders) of the indicated UI areas in the main content, use the following properties:
Property key | Default value | Usage |
---|---|---|
--color-base-background | #FFFFFF | General background |
--color-main-background | #FFFFFF | Background of content item, for example posts |
--color-main-hover-background | #E6E6E6 | Hover color for content items (where hover is applicable) |
--color-main-box-shadow | 0 0 0 This property requires the color value in RGB notation as it adds an additional alpha value for opacity. |
Box shadow (border) of content items |
--color-main-secondary-background | #F2F2F2 | Background color for content within content, for example captions |
--color-main-seconday-border | #E6E6E6 | Border color for secondary content, for example captions |
Scrollbar
Connections uses a custom CSS-based scrollbar, which you can style with the following options:
Property key | Default value | Usage |
---|---|---|
--color-scrollbar | #F2F2F2 | Color of the general scrollbar |
--color-scrollbar-thumb | #8F8F8F | Color of the scroll thumb or indicator |
--color-scrollbar-thumb-hover | #5C5C5C | Hover color of the scroll thumb or indicator |
Header
Property key | Default value | Usage |
---|---|---|
--color-header | #0D264D | Background color |
--color-header-text | #FFFFFF | Color of text in the header |
--size-header-image-height | 30px | Height of the header logo; scales both height and width |
--size-header-spacing | 20px | Spacing between elements within the header area |
Navigation
Side navigation bar
Property key | Default value | Usage |
---|---|---|
--color-navigation | #14356A | Background color |
--color-navigation-selected | #01539B | Background color of active or selected option |
--color-navigation-text | #FFFFFF | Text color for side navigation bar |
Third-level navigation
Property key | Default value | Usage |
---|---|---|
--color-third-navigation | #f1f1f1 | Background color |
--color-third-navigation-selected | #d5d5d5 | Background color of active or selected option |
--color-third-navigation-text | #000000 | Text color for third-level navigation |
Important To Me (ITM) Bar
Property key | Default value | Usage |
---|---|---|
--color-itmbar | #F2F2F2 | Background color |
--size-itmbar-icon | 48px | Size of profile icons within the ITM bar |
Footer
Property key | Default value | Usage |
---|---|---|
--color-footer | #0D264D | Background color |
--color-footer-text | #FFFFFF | Text color |
--color-footer-text-hover | #D3D9DE | Link color on hover |
Search
Property key | Default value | Usage |
---|---|---|
--color-search | #FFFFFF | Background color |
--color-search-text | #000000 | Text color |
--color-search-selected | rgba(0, 0, 0, 0.04) | Background color on hover |
Links
Property key | Default value | Usage |
---|---|---|
--color-link | #01539B | Link color |
--color-link-hover | #092B51 | Link color on hover |
Buttons
Buttons in the Connections 8.0 UI have changed from Connections 7.0, in that their design has become more focused to the role they fulfill. As such, we now differentiate between primary and secondary actions.
Primary actions are calls to action. They are important and are used to achieve a certain task on a page, for example 'Save', 'Create Topic', 'Edit', and so on.
Secondary actions are any other actions that are available to the user, but which are more or less optional or negative actions. Some examples include 'Cancel', 'Close', or 'Delete'. Secondary actions leverage different button designs depending on whether they are displayed within a normal view (as outlined buttons) or a modal or popup dialog (as text buttons).
There is also an additional state for disabled actions, which are generally available but are disabled since they do not apply to the current context or user.
Button type | Button | On hover | When disabled |
---|---|---|---|
Contained button Contained buttons are always displayed as a typical button, filled in with contrasting text. On hover, the button color changes to a darker hue (pressing state) and casts a box shadow. |
|||
Outlined button Outlined buttons are used in normal content or views. Style-wise, they have borders in the color of a normal button, but without fill. The text color is the same as the button as well. On hover, they behave the same way as a contained button. |
|||
Text button Text buttons are used in modal or popup dialogs, and are more similar to links than to actual buttons. The text is displayed in the same color as the previous button types and changes on hover as well. There is no border or box shadow. |
You can customize many aspects of a button's style, for example its background color in general and in specific states, like on hover or when disabled:
Property key | Default value | Usage |
---|---|---|
--color-button | #01539B | Background color |
--color-button-hover | #092B51 | Background color on hover |
--color-button-text | #FFFFFF | Text color |
--color-button-disabled | #E6E6E6 | Background color for disabled buttons |
--color-button-disabled-text | #ADADAD | Text color for disabled buttons |
Notifications or snackbars
Property key | Default value | Usage |
---|---|---|
--color-info-message | #273641 | Background color |
--color-info-message-text | #FFFFFF | Text color |
--color-info-message-link | #2ABDEA | Link color |
--color-info-message-link-hover | #14A1DE | Link color on hover |
Administrative banner
The banner uses different styles depending on the severity levels:
Severity: Success
Property key | Default value | Usage |
---|---|---|
--color-admin-banner-success | #E4FDED | Background color |
--color-admin-banner-success-text | #000000 | Text color |
Severity: Info
Property key | Default value | Usage |
---|---|---|
--color-admin-banner-info | #F9EEFF | Background color |
--color-admin-banner-info-text | #000000 | Text color |
Severity: Warning
Property key | Default value | Usage |
---|---|---|
--color-admin-banner-warning | #FFF6E2 | Background color |
--color-admin-banner-warning-text | #000000 | Text color |
Severity: Error
Property key | Default Vvalue | Usage |
---|---|---|
--color-admin-banner-error | #FFF2F2 | Background color |
--color-admin-banner-error-text | #000000 | Text color |
For information on configuring the banner and updating its content, refer to Administering the display of a site-wide banner.
Modals
Property key | Default value | Usage |
---|---|---|
--color-modal-header | #FFFFFF | Header background color |
--color-modal-header-text | #000000 | Header text color |
Badges
Property key | Default value | Usage |
---|---|---|
--color-badge | #C10C0D | Background color |
--color-badge-text | #FFFFFF | Text color |
Chips
Property key | Default value | Usage |
---|---|---|
--color-chip | #E6E6E6 | Background color |
--color-chip-text | #000000 | Text color |
--color-chip-close | #ADADAD | Background color of close icon |
--color-chip-close-hover | #8F8F8F | Background color of close icon on hover |
Tabs
Property key | Default value | Usage |
---|---|---|
--color-tab | #FFFFFF | Background color |
--color-tab-text | #3D5466 | Text color |
--color-tab-text-selected | #01539B | Text color of active or selected option |
--color-tab-border-selected | #0D264D | Border or highlight of active or selected option |
Toggles
Property key | Default value | Usage |
---|---|---|
--color-switch-primary | #6e9bc2 | Active toggle background color |
Parent topic: Customizing the user interface