Hub: Stream level Customization

Modified on Wed, 1 Sep, 2021 at 8:30 AM

Currently, Branding is done at the Hub level and this gets applied to all its Streams and its items that are listed under the Hub.

Support for Stream level Customization

Hushly does support Stream level customization, to customize the Stream and its Items, you'll need at least a basic understanding of HTML.

Every Stream is made up of the same basic parts like hub-stream, stream, hub-stream-info, stream-items-container, stream item. We will look at the building blocks of a Steam. Once you understand how they're built, you will be able to use that knowledge to customize the Stream and its Items in your own Hub.

To get you started, we need to identify the class. The class can be defined as 'stream-<URLPath>' [URL Path from the Stream's - Configure section].

.stream-about-hushly{
}

Let's look at a few examples of customizations of different parts of a Stream:

Sample#1 Stream Header: Define the following styles for the Stream header like - color, font size, font-weight, and text transform.

.stream-about-hushly .hub-stream-header{
    font-size: 30px !important;
    font-weight: 200;
    color: red !important;
    text-transform: none;
}

Sample#2 Stream Item Title: Define the following styles for the Stream Item Title like - color.

.stream-about-hushly .hub-tile-content-title{
    color: blue !important;
}

Insert the above sample HTML scripts in the Hub > Branding > CSS section and Save the Branding.

At Hub runtime, when the Stream is accessed, the defined custom styles for the Stream would get applied and the Stream would look different from the rest of the Hub Streams:

While the rest of the Hub Streams would implement the default styles at the hub level: