Hub Hack: Add a Custom Banner for All Streams

Follow

Hub Hack: Use this Custom Code snippet to add a custom screen-width image (banner) to all Streams.


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

Hub Hacks are 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
  • Placement: Head
  • Notes: Do not use this if you have separately configured banners on Marketing/Sales streams, as they will display side-by-side. Replace the URL shown in the snippet with the URL where the banner you want to use is hosted.

 

Code

<style>
/*-- Custom Banner For All Stream Pages --*/ .listing-page > header:after{ content:''; background-size:cover; display:block; width:100vw; min-height:280px; background-image:url('https://unsplash.it/1200/768/?random'); /*Change this to your image's URL*/ height:33vh; /*Set the height of your banner, you can use PX, VH, or % */ }
</style>
0 out of 0 found this helpful

Comments

2 comments
  • That closing style tag isn't quite closed.

    1
    Comment actions Permalink
  • Thanks for catching that, Joshua! Should be fixed now, sorry if it caused you any issues!

    0
    Comment actions Permalink

Please sign in to leave a comment.