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.


 

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.