Follow

Customizing Hub Fonts and Colors

Your hub is fully customizable in its fonts and colours. This allows you to make your hub align with your brand or to give it the look and feel that you want to portray to your visitors.

To access the Design menu, navigate to the hub you want to change and click on the  Hub Settings icon > Design

Design Menu Basics

This page will provide you with a comprehensive understanding of four major sections of the design menu. Click the links below to see an explanation of the settings you can configure. 

We will use our Pressly teal to highlight where you will see changes for the setting described.

Cover Settings

The Cover appears at the top of your hub so you can make a visual impact on the visitor. The Design Menu allows you to change the hub logo, cover image and its overlay, along with the associated accent colors. 

Learn more about adding or modifying hub logos and cover image using these help topics:

Cover Overlay 

The cover overlay is a color that is superimposed on top of your cover image. This is especially useful to help make your logo or text more visible. 

Click the Tint Color box to select a color and drag the sliding scale to set the tint opacity.

 

Colors

There are three options under this section: Background Color, Text Color, and Accent Color.

  • The Background Color, marked by teal, is visible if you have no cover image. 
  • The Text Color affects the color of your hub name and description, it is marked by black in the image below. 


Header

The header settings makes modifications to the header navigation bar on each page of the hub, once the user scrolls past the cover image. The header bar is also anchored to the top of the content tool and hub settings pages. 

Header Logo

To add or learn more about the header logo, please visit our help topic Adding A Hub Logo.

Header Background

  • The Background Color changes the overall header color. When the user scrolls down towards the hub, the cover background image also automatically fades into the header color chosen.
     
  • The Text Color field changes the color of any text that exists within the header bar. The example below shows the color changed in the Hub Settings page. 


  • The Icon Color changes the color of the icons both initially on the cover image that later is part of the header bar, along with the icons seen in the header of any hub settings/ content pages. 
     

Text

The Text settings consists of Collections Menu options, Headline Text, Byline Text, Body text, Menu text, and General settings. They control the overall look and feel of your hub menus, stream, and the spotlight layers. 

Collections Menu 

The Collection Navigation section allows you to change the color of both the background and font of the collections bar in your hub.

Headline Text 

The headline text corresponds to the text found in the post tiles and the spotlight view. 

  

Body Text: Body Color

The body color setting changes the abstracts and descriptions found in both post tiles and the spotlight view. 

Body Text: Link Color

The link color affects the spotlight view and the collections menu. Specifically, it highlights the collection the post is part of, along with the Continue to button. The link color setting also changes all the clickable links on the collections menu, along with the color of breadcrumbs when a visitor is viewing a collection. 

   

Byline Text 

The byline text corresponds to the text indicating the source of content on post tiles. On the spotlight view, the byline color/font affects the details about the content, and the share buttons. 

Stream

Three settings are included in this section: 

  1. Background Color: This changes the overall background color of your streams. Make sure it matches well with the tile color. 
  2. Tile Color: By default, Pressly includes borders to show visible tiles for each post. 
  3. Icon Color: This changes the color of any accent elements on the hub tiles. 
  4. Accent Color: The accent color is visible mainly in the various menu options. For instance, it is used to highlight the hub you are currently viewing in the user menu, or to mark the role of a particular member of your hub. 


Footer

The footer appears on the bottom of your stream and allows your visitors to select the next or previous collections. You can set both the background color and the text color using the options in this section. 

 

Addons

If you want to do any customizations above and beyond the options provided in our design menu, you can modify the <head> tag of your hub.

Learn more here: Integrating Advanced Customizations

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments