Cleo Portal CSS customization parameter reference

Note: This section applies to the Cleo Harmony and Cleo VLTrader applications only.

Note: Unless otherwise stated, changes to the height, width or text size of any element or attribute are not supported.

Top banner

#top-banner: Controls the style of the top navigation banner.; You can also reference #top-banner as .navbar-default.
#top-banner .banner-text a: Controls the default style of the navigation labels in the top navigation banner.
#top-banner .banner-text a:hover: Controls the hover style of the navigation labels in the top navigation banner.
#top-banner .banner-text a.active: Controls the style of the active navigation label in the top navigation banner.
#top-banner .banner-text a .icon: Controls the style of top navigation banner icons.
#top-banner .banner-text a.active .icon: Controls the style of the active navigation icon in the top navigation banner.
#top-banner .icon-avatar: Controls the style of the user avatar icon.
#top-banner .icon-avatar:hover: Controls the style of the user avatar icon on hover.
#top-banner .icon-avatar.open: Controls the style of the user avatar icon when user menu is open.

Log in page

#LogIn: Use the element to update the background color and/or image.
#LogIn .login-image: Use this element to update the corporate logo.
#btn-default[:hover, :active]: Use this element to update the sign in button.

Main masthead

app.portal .navbar-brand: Use this element to update the corporate logo on the main masthead. You will need to explicitly set the width. Maximum dimensions for a new logo is 200px X 65px.
.navbar-default: Use this element to update the background and border colors.

Buttons

.btn-primary[:active, :hover]: Use this element to update the background and border color of all buttons within Cleo Portal.

Background images

New images do not need to be placed within the Cleo Portal directory. You can place them anywhere on your server, a CDN, or anywhere that will provide a publicly accessible URL.