Use these selectors to control the style of the Cleo Portal.
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.
Portal-related system properties
You can set the following properties in your
conf/extended.properties
file to further customize your
Cleo Portal experience.
- external.ip.address
- Set this property to customize URLs in Cleo Portal email links.
For example, setting the property to
external.ip.address=my-company.com would change outgoing URLs in
Cleo Portal emails
to https://my-company.com/Portal/.... Note that some protocols
(excluding AS2) can use the external.ip.address property for various
operations. The port properties will only ever be used by HTTP and HTTPs based
protocols.
- external.ip.address.http.port
- Set this property to customize URLs in Cleo Portal email links
if a different port than specified in the local listener is necessary. Port properties
will only be used if the external.ip.address property is set. If both
http and https ports are specified here, the
https port will take precedence.
- external.ip.address.https.port
- Set this property to customize URLs in Cleo Portal email links
if a different port than specified in the local listener is necessary. Port properties
will only be used if the external.ip.address property is set. If both
http and https ports are specified here, the
https port will take precedence.