Hub Hack: Remove Highlighted Tile from Stream(s) when "Highlight first Item" is selected at Hub Level

Follow

Objective

When "Highlight first Item" is enabled in the Hubs Lab settings, the first tile in all Streams will be shown as larger than the other tiles (approx. 4x size):

Hubs___Appearance_-_Hubs_Lab_-_Uberflip.png

Marketing_Stream_for_Yoga.png

Use this Custom Code snippet to selectively disable this effect for one or more specified Streams, making the first tile the same size as all other tiles.

 

Warning

Hub Hacks are not official Uberflip features.

Hub Hacks may not work on all Hubs or may cause unexpected behavior. If you experience issues with a Hub Hack, available support is limited to helping you disable the Hub Hack only.

Important

This Hub Hack is not compatible with Front End V2 Hubs.

If you are not sure if your Hub uses Front End V2, see this article for help.

 

Details

  • Type: CSS/JavaScript
  • Placement: Body Bottom

Code

Option 1: Disable the "Highlight tile" in a single Stream

This option will disable the "Highlight first Item" effect on a single specified Stream, so that all tiles in that stream are shown as the same size.

  • To specify the Stream, replace instances of XXXX in the code with the relevant Stream ID.
<style>
body.listing-page.stream-XXXX #collection-items > ul > li:nth-child(1) img {
margin-left: 0px !important;
}
</style>

<script>
$("body.listing-page.stream-XXXX #collection-items > ul li.tile.highlight").removeClass("highlight");
</script>

Option 2: Disable the "Highlight tile" in multiple Streams

This option will disable the "Highlight first Item" effect on multiple specified Streams, so that all tiles in those Streams are shown as the same size.

  • To specify the Streams, replace instances of XXXX in the code with the relevant Stream IDs.
<style>
body.listing-page.stream-XXXX #collection-items > ul > li:nth-child(1) img,
body.listing-page.stream-XXXX #collection-items > ul > li:nth-child(1) img {
margin-left: 0px !important;
}
</style>

<script>
$("body.listing-page.stream-XXXX #collection-items > ul li.tile.highlight").removeClass("highlight");
$("body.listing-page.stream-XXXX #collection-items > ul li.tile.highlight").removeClass("highlight");
</script>
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.