---
title: Customizing Content Hub Styles with Custom CSS
description: Personalize the look and feel of your Content Hub by using Custom CSS. This article provides step-by-step instructions to modify styles, alter layout, and implement a unique brand aesthetic that aligns with your company values.
---

[Skip to content](https://help.joomag.com/knowledge/customizing-content-hub#main-content)

- [English](https://help.joomag.com/knowledge/customizing-content-hub)
- [Deutsch](https://help.joomag.com/de/knowledge/individuelle-gestaltung-des-content-hubs-mit-custom-css)

English

Show submenu for translations

[![joomag logo blue-3.png\]](https://help.joomag.com/hs-fs/hubfs/joomag%20logo%20blue-3.png?height=29&name=joomag%20logo%20blue-3.png)](https://joomag.com)

- [Joomag Blog](https://help.joomag.com/blog)

Open main navigation

Close main navigation

- [Joomag Blog](https://help.joomag.com/blog)
- - [English](https://help.joomag.com/knowledge/customizing-content-hub)
    - [Deutsch](https://help.joomag.com/de/knowledge/individuelle-gestaltung-des-content-hubs-mit-custom-css)

  English
  
  Show submenu for translations
- [Contact us](mailto:support@joomag.com)

[Contact us](mailto:support@joomag.com)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Help Center](https://help.joomag.com/knowledge?hsLang=en)
2. [Engage](https://help.joomag.com/knowledge/engage?hsLang=en)

# Customizing Content Hub Styles with Custom CSS

## Personalize the look and feel of your Content Hub by using Custom CSS. This article provides step-by-step instructions to modify styles, alter layout, and implement a unique brand aesthetic that aligns with your company values.

> **Note**: This feature is available only with the brand new Enterprise plans as an add-on feature. If your current plan does not support this feature feel free to contact our**[Customer Success](mailto:success@joomag.com)** team for account migration assistance.
> 
> **Important**: To test the available customization, make sure you already have a [Content Hub enabled](https://intercom.help/joomag/en/articles/5633019-enable-content-hub-for-your-publications).

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 the **Content Hub** section.

![](https://help.joomag.com/hubfs/image-png-1.png)

2\. Scroll down to locate **Advanced styling with custom CSS** section. This is where you can insert your custom CSS code to target and style the elements.

![](https://help.joomag.com/hubfs/image-png-2.png)

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 |
| **Email** | .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 [see example](https://help.joomag.com/knowledge/customizing-content-hub#hide-folder) |
| **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 [see example](https://help.joomag.com/knowledge/customizing-content-hub#arrow) |
| **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.

![](https://help.joomag.com/hubfs/image-png-3.png)

 

**Example: Customizing Content Hub header color, page background color and the color of the search input field**

1\. Let's first specify the background color of our Content Hub main page:

```
body {  background-color: #f2f2f2;}
```

2\. Then we can specify the background color of 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 Content Hub URL to see the changes:

![](https://help.joomag.com/hubfs/image-png-4.png)

Example: Hide folder (flap) icon:

```
.j-custom-folder-icon {visibility: hidden;}
```

![](https://help.joomag.com/hs-fs/hubfs/image-png-Sep-27-2024-06-49-55-3216-PM.png?width=181&height=290&name=image-png-Sep-27-2024-06-49-55-3216-PM.png)    ![Group (1)](https://help.joomag.com/hs-fs/hubfs/Group%20(1).png?width=133&height=65&name=Group%20(1).png)  ![](https://help.joomag.com/hs-fs/hubfs/image-png-Sep-27-2024-06-50-59-1674-PM.png?width=184&height=292&name=image-png-Sep-27-2024-06-50-59-1674-PM.png)

Example: Change the "Back to collection" arrow color:

```
.j-custom-back-to-collection:before {filter: brightness(0) invert(1);}
```

![](https://help.joomag.com/hs-fs/hubfs/image-png-Apr-16-2026-01-39-02-3258-PM.png?width=192&height=48&name=image-png-Apr-16-2026-01-39-02-3258-PM.png)   ![Group (1)](https://help.joomag.com/hs-fs/hubfs/Group%20(1).png?width=59&height=29&name=Group%20(1).png)   ![](https://help.joomag.com/hs-fs/hubfs/image-png-Apr-16-2026-01-40-42-4316-PM.png?width=254&height=49&name=image-png-Apr-16-2026-01-40-42-4316-PM.png)

- [Email Marketing](https://help.joomag.com/knowledge/email-marketing?hsLang=en#main-content)

    - [Email Templates Basics](https://help.joomag.com/knowledge/email-marketing?hsLang=en#email-templates-basics)
    - [Standard Email Template Editor](https://help.joomag.com/knowledge/email-marketing?hsLang=en#standard-email-template-editor)
    - [Campaign Basics](https://help.joomag.com/knowledge/email-marketing?hsLang=en#campaign-basics)
- [Publications](https://help.joomag.com/knowledge/publications?hsLang=en)
- [Distribute](https://help.joomag.com/knowledge/distribute?hsLang=en#main-content)

    - [Private Sharing](https://help.joomag.com/knowledge/distribute?hsLang=en#private-sharing)
    - [Embed a Collection](https://help.joomag.com/knowledge/distribute?hsLang=en#embed-a-collection)
    - [URL Customization](https://help.joomag.com/knowledge/distribute?hsLang=en#url-customization)
    - [Embed a Specific Publication](https://help.joomag.com/knowledge/distribute?hsLang=en#embed-a-specific-publication)
    - [AI Tools](https://help.joomag.com/knowledge/distribute?hsLang=en#ai-tools)
- [Collections](https://help.joomag.com/knowledge/collections?hsLang=en)
- [For the Readers](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#main-content)

    - [Managing Reader Account Data](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#managing-reader-account-data)
    - [Publication Viewer](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#publication-viewer)
    - [Mobile HTML5 Viewer](https://help.joomag.com/knowledge/for-the-readers?hsLang=en#mobile-html5-viewer)
- [For Branded Mobile Applications Development](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#main-content)

    - [Android Branded Application](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#android-branded-application)
    - [iOS Branded Application](https://help.joomag.com/knowledge/for-branded-mobile-applications-development?hsLang=en#ios-branded-application)
- [Viewer Customization](https://help.joomag.com/knowledge/viewer-customization?hsLang=en)
- [Measure](https://help.joomag.com/knowledge/measure?hsLang=en#main-content)

    - [Analytics](https://help.joomag.com/knowledge/measure?hsLang=en#analytics)
- [The Creative Studio](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#main-content)

    - [Images](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#images)
    - [Links](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#links)
    - [Crater Editor Basics](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#crater-editor-basics)
    - [Texts](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#texts)
    - [Lines and Shapes](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#lines-and-shapes)
    - [Slideshows](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#slideshows)
    - [Popups](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#popups)
    - [Library](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#library)
    - [Videos](https://help.joomag.com/knowledge/the-creative-studio?hsLang=en#videos)
- [Forms](https://help.joomag.com/knowledge/forms?hsLang=en)
- [Create](https://help.joomag.com/knowledge/create?hsLang=en)
- [Engage](https://help.joomag.com/knowledge/engage?hsLang=en)
- [FAQ](https://help.joomag.com/knowledge/faq?hsLang=en)
- [CRM](https://help.joomag.com/knowledge/crm?hsLang=en#main-content)

    - [Filters](https://help.joomag.com/knowledge/crm?hsLang=en#filters)
    - [Contacts](https://help.joomag.com/knowledge/crm?hsLang=en#contacts)
    - [Lists](https://help.joomag.com/knowledge/crm?hsLang=en#lists)
- [Managing Account Data](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#main-content)

    - [Users](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#users)
    - [Payments](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#payments)
    - [Billing](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#billing)
    - [Account Settings](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#account-settings)
    - [Integrations](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#integrations)
    - [User Settings](https://help.joomag.com/knowledge/managing-account-data?hsLang=en#user-settings)
- [Troubleshooting](https://help.joomag.com/knowledge/troubleshooting?hsLang=en)
- [Edu accounts](https://help.joomag.com/knowledge/edu-accounts?hsLang=en)
- [Integrations](https://help.joomag.com/knowledge/integrations?hsLang=en#main-content)

    - [SSO](https://help.joomag.com/knowledge/integrations?hsLang=en#sso)

Copyright © 2026, Joomag, Inc.