Hub Hack: Replace Links on Item Tiles With Buttons

Follow

Use this Custom Code snippet to replace the standard 'Read Article', 'Read Flipbook' and 'View Presentation' links on each Item Tile in a Stream with a blue button.


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
  • Note: Also includes a white gradient background behind the button. Both the button and the gradient can be changed to any color you prefer.

 

Screenshot

itemeditorimage_57f7c8778b83f.png

Code

<style>
/*-- Tile Buttons --*/ div.tile.single>a.view, li.tile.single>a.view { background-image: none; margin: 0 20px; padding: 11px 10px; font-size: 13px; font-weight: bold; width: auto; border-radius: 0; height: auto; line-height: 1; bottom: 20px; white-space: nowrap; color: #fff; border-color: #0093D0; background: #0093D0!Important; border-width: 1px; border-style: solid; box-shadow: none; -webkit-transition: 0.2s all; transition: 0.2s all; -webkit-font-smoothing: antialiased; -webkit-transform: translateZ(0); transform: translateZ(0); } .tile.single:hover>a.view { background: #fff!Important; color: #0093D0!important; text-decoration: none; } .tile.single>a.view:before { display: none; } .tile.single>a.view:after { display: inline; content: ''; position: relative; top: -1px; left: 3px; right: auto; bottom: auto; background: none; } .tile .description { border-top: 1px solid #ddd; } /*--Description Gradient--*/ .tile.single>.description:after { content: ''; margin-left: -20px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 25%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 25%); height: 8rem; bottom: 0; display: block; position: absolute; left: 0; right: 0; }
</style>

 

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.