Note: This feature is available only with the Enterprise plan as an add-on feature. If your current plan does not support this feature, contact our Customer Success team for account migration assistance.
Important: To test the available customization, make sure you already have a Content Hub enabled.
To apply custom CSS to your Content Hub follow these steps:
1. Go to Settings. Click Account settings from the left sidebar and scroll down to the Content Hub section.
2. Scroll down to locate the Advanced styling with custom CSS section. This is where you can insert your custom CSS code to target and style the elements.
Here's the list of customizable components:
Fields | Selectors |
Parent container div of form (top-level id selector) | .j-custom-page |
Header block | .j-custom-navbar |
Logo block | .j-custom-logo-block |
Logo image | .j-custom-logo-img |
Title block | .j-custom-navbar-title |
Title element | .j-custom-navbar-title span |
Search wrapper | .j-custom-search-input-wrapper |
Search input | .j-custom-search-input-wrapper input |
Login button | .j-custom-login-btn |
Profile block | .j-profile-block |
.j-custom-email | |
Profile icon | .j-custom-profile-icon |
Collections (folders) container block | .j-custom-collections-container |
Collection (folder) item | .j-custom-collection |
Collection (folder) thumbnail | .j-custom-thumbnail |
Folder icon | .j-custom-folder-icon |
Collection (folder) title | .j-custom-title |
Collection (folder) count | .j-custom-count |
Publications container block | .j-custom-publications |
Publication item | .j-custom-publication |
Publication date | .j-custom-date |
Order by block | .j-custom-order-by |
Order by text | .j-custom-order-by-text |
Collection title in Publications block | .j-custom-collection-title |
Back to collection | .j-custom-back-to-collection |
Back to collection arrow | .j-custom-back-to-collection:before |
Publication details popup | .j-custom-publication-details-popup |
Cover in popup | .j-custom-publication-cover |
Title in popup | .j-custom-publication-title |
Subtitle in popup | .j-custom-publication-subtitle |
Description in popup | .j-custom-publication-description |
Read button in popup | .j-custom-read-button |
3. Make the necessary styling updates and click Save changes to apply the results.
Example: Customizing Content Hub header color, page background color and the color of the search input field
1. Specify the background color of the Content Hub main page:
body {
background-color: #f2f2f2;
}
2. Specify the background color of the Header section and customize the input field:
.j-custom-page .j-custom-navbar {
background-color: #FFFFFF;
}
.j-custom-page .j-custom-search-input-wrapper input {
background-color: #f2f2f2 !important;
color: #000000 !important;
}
3. Click Save Changes and browse the Content Hub URL to see the changes:
Example: Hide folder icon:
.j-custom-folder-icon {
visibility: hidden;
}
Example: Change the "Back to collection" arrow color:
.j-custom-back-to-collection:before {
filter: brightness(0) invert(1);
}
