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.
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:
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.
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.
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.
To add or learn more about the header logo, please visit our help topic Adding A Hub Logo.
- 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.
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.
The Collection Navigation section allows you to change the color of both the background and font of the collections bar in your hub.
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.
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.
Three settings are included in this section:
- Background Color: This changes the overall background color of your streams. Make sure it matches well with the tile color.
- Tile Color: By default, Pressly includes borders to show visible tiles for each post.
- Icon Color: This changes the color of any accent elements on the hub tiles.
- 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.
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.
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