Customize and brand your Hub

Learn how to customize the look and feel of your Hub to be consistent with your company's brand.

 

Before You Begin

• To use the features described in this article, you need to be an Account Admin or Content Manager.

 

Customize Your Hub's Branding

Your Hub will look great even if you do absolutely nothing to customize it. But let's be honest: that's not going to cut it. You're using your Hub to present your content for your audience, so it's important that it reflects your brand. That's why we have all kinds of ways for you to customize the appearance of your Hub. In this article, we'll give you an overview of the things you can do to get your Hub looking the way you want.

 

Custom Domains

How do visitors get to your Hub? With a URL, which means that your Hub's domain is the first thing they'll see. When you set up a brand new Hub, the default, co-branded domain usually looks something like this:

http://mycompany.uberflip.com

Make a great first impression by using a custom domain instead. This will allow you to host your Hub on a domain that looks like this:

http://resources.mycompany.com

Or like this:

http://www.mycompany.com/resources

Learn all about custom domains in this article.

 

Hero Logo, Background, Banner & Favicon Images

There are several ways you can customize your Hub's branding with images. You can customize all of these under Hubs > Appearance > Branding > Images.

The background and hero images are what visitors will see first when they arrive at your Hub — so if you don't add any, it'll look something like this:

Pretty boring, right? Now let's add a hero logo and background image:

Much better! With a hero logo and background in place, your visitors will be greeted with a visually appealing experience that's also consistent with the rest of your brand's online presence.

The same thing goes for your banner, as well. The banner sits at the top of your Hub as visitors navigate through your content. It reminds your visitors of who you are and where they are. Without a banner, your Hub will look like this:

Add your logo to the banner, and this is what it will look like instead:

As you can see, uploading your logo will go a long way towards branding your Hub.

Finally, don't forget the favicon! It's a subtle detail that's easy to overlook, but it can make a big difference. Here's what it might look like when you add your favicon:

So what's the big deal? When someone bookmarks your Hub, this little favicon will be its visual representation. That's especially important on mobile device browsers, where bookmark favicons are often very prominent on the browser's homescreen. With no favicon, this space will be blank — and who wants to click on that?

 

Colors

Colors are a huge part of most brand identities, so it's important that your Hub uses your brand's colors as well. You can customize these under Hubs > Appearance > Branding > Colors. We recommend using the hexadecimal color values for your brand colors, which you should be able to get from your web designer/developer.

If you opt for a side menu rather than a top menu for your Hub, the menu items will be represented by icons. Navigation color determines the background color of those icons. Our example company Targetly uses turquoise as one of its brand colors, so if we change the navigation color to turquoise, it will look like this:

Background + Link Color determines the color of the background on your Hub's homepage, as well as the color of links. This will only apply to the background if you didn't replace it with a background image as we recommended above, so it usually applies to links primarily. Targetly's other brand color is red, so here's what it looks like if we set the background + link color to red:

It's a great way to feature another of your brand's colors in your Hub, and really helps to create a unified experience.

 

Light/Dark Theme

The default look for all Hubs is a clean, bright white theme. But maybe that doesn't really work for your brand? If so, no problem - just switch to the Dark Theme under Hubs > Appearance > Hubs Lab. This will give your Hub a dark appearance with prominent grays and blacks, like this:

The Dark Theme won't work for all brands, but it's an option if a darker appearance is what you're going for.

 

Custom Labels and Hub Descriptions

Labels:

Your Hub comes with standard labels for the various interface elements that users see and can interact with. But since one size doesn't fit all, you can modify all of these labels however you like to make them more consistent with your brand and the language your company uses. Learn what you can change, and how to do it, in this article.

Hub descriptions: 

Your Hub descriptions can be edited at anytime. To do so, click Appearance in the sidebar menu, then click Branding. From here you can update: 

 

Advanced Customization: HTML, CSS and JavaScript

As you can see, you can do quite a lot to customize and brand your Hub with our basic customization tools. But these only scratch the surface of what's possible, and if you have the technical know-how (or a resource who does), you can take your Hub to a whole other level with Custom Code. Using Custom Code, you can add custom HTML, CSS and JavaScript to change pretty much anything in your Hub — the possibilities are endless.

Want to learn more? Check out Add HTML, CSS, and JavaScript to your Hub with Custom Code.