Theming Sitecore Content Hub Interface
Branding is important, and companies need to retain it across the tools used in their Martech stack. It is essential for several reasons, from simple consistency, to the impact on culture and productivity. There is plenty written on it already, so in this post, we will take a look at how to make the Sitecore Content Hub interface “feel like home” for various teams. Personally, I am not too fond of bland interfaces, so some of the methods mentioned below are always included in Sitecore Content Hub implementations that I am part of. I like to go a bit beyond the standard and deliver a working platform that’s intuitive and enjoyable to use; you could call it a personal signature for Content Hub styling.
If you are a product manager in charge of Sitecore Content Hub interested in styling your favorite content platform, know that there is no restriction on what you can do. There are three progressive approaches to branding and theming your instance of Content Hub: basic platform theming, custom styling, and custom interface creation. Below we’ll look at how to implement each one.
Sitecore Content Hub Portal Theming
This piece is relatively straightforward, as Sitecore Content Hub makes basic interface theming a breeze. If you have the right assets and a style guide, you can theme a portal with a point and click theming engine in under 30 minutes. It is impressive how big of a difference those 30 minutes can make!
To get to the theming engine, you want to make sure you have Superuser-level access to the platform, after which the Themes section can be accessed from the Content Hub’s Control Panel.
Unfortunately, we cannot yet export and import themes; this one is on my wish list, and Sitecore’s new feature request lists; in the meantime, we have to create our themes from scratch and manually customize them every time. The good news is that it doesn’t take long, and unless you are an implementation partner, you shouldn’t be doing these types of things frequently anyway.
Sitecore content Hub ships with a default “base” theme, which is your standard layout, font set, and color scheme, when you first login to the platform. To learn more about the theming engine, take a look at Sitecore documentation on Content Hub styling. This documentation is where you want to start when theming Content Hub’s interface for the first time. More good news – there is no coding required for this first part. Sitecore’s documentation describes what can be updated in detail, and as you will see, it is actually pretty neat. Once you are finished with the point and click theming steps and ready to take it a step further, bring your UI developer to the next section.
Building Custom Styling with Custom Theme CSS
Content Hub theming tool has a Custom CSS tab that allows to change the look and feel of the entire interface. There is a lot that can be done here with just CSS! Warning, you need to be a good UI developer for this piece, not just know some CSS. Once created, these styles will get loaded on every page, so they can unintentionally corrupt other interfaces or responsive experiences (yes, the Sitecore Content Hub interface is responsive, so keep that in mind when creating custom styling).
The way a UI developer would go about creating styles is through overriding the existing ones. This is done by navigating to the interface or page that needs to be styled, viewing the sources code, pulling element IDs or classes for reference, and using them in the custom CSS sheet. Two things to keep in mind here:
- Be careful about using classes and test all pages where that class is used to avoid accidentally corrupting other views.
- Minimize the use of !important directives. Not only it’s a general best practice in styling, but it will also pay off when we get to the final layer of a component or page-specific styling.
Adding Interactivity to Interfaces
After setting up the basic theme and implementing custom styling, our Sitecore Content Hub can already be hard to recognize. However, if you are looking for advanced customizations in functionality in addition to styling, we can integrate custom JavaScript with the help of external components. These types of components can either add some desired functionality to the page, customize the look and feel of the page, or even modify how the other components on the same page work (as always, keep in mind component reusability and perform proper checks before running your JavaScript code). Sitecore documentation for external components covers them pretty well.
Here is what external components look like in action. Let’s say, we would like to add informational icons with smooth-appearing help messaging to our interface. In this case, we would create a new external component and add the required JavaScript to the Code tab that would parse through the interface and augment it with helpful tips on a page load event.
This is a simple example, but now you can see how much flexibility you already have with changing the way Content Hub Components look. Now, if your idea of customization does not fit into existing Sitecore Content Hub pages, views, and components – create your own!
Yes, you can create custom pages and custom components with the use of external components. This is the ultimate level of control over Content Hub’s theming, allowing creating interfaces to be pixel-perfect to your specifications.
If you would like to create your own pages, navigate to Control Panel > Pages and start composing your new page with layouts and existing or custom components.
I encourage all Sitecore Content Hub clients to ask for custom Theming as part of their Sitecore Content Hub implementation. If you work for a Sitecore partner, I encourage you to include this practice in your implementations by default.
WARNING
With great power comes great responsibility – remember that Sitecore can update interfaces without a forewarning, which can cause conflicts with your custom styling, so it is important that your UI developer has experience of customizing styling Sitecore Content Hub to reduce the amount of future rework. You don’t want to wake up to your pages being corrupt only because your junior developer thought it would be neat to add an untested JavaScript library. Work with a Sitecore partner that is specialized in Sitecore Content Hub to sleep well at night.
If you have any questions related to Sitecore Content Hub theming, please feel free to reach out to me directly vasya.fomichev@gmail.com.