8 CSS Hacks to Customize the Look of Your Hub

July 7, 2015 Tyler Ryll

CSS Hub Hacks

In the third installment of our Hub CSS Hacks series, I took some common requests from our customers about styling their Hubs and compiled the code here in this post to make it easier to implement.

As always, I must add a disclaimer:

While this code has been tested on Content Hubs here at Uberflip, we can’t ensure the code will work flawlessly on your Hub. This is due to the possibility of conflicting CSS, HTML, or JavaScript.

So please keep that in mind when you try these cool Hub Hacks out!

Add colors to specific content tiles

With this series of code, you are able to call out a Stream ID number, and have that Stream you pick change the color of the link background section.

In the image below, I have changed the color of my “Liked Instagram Posts” to Blue, “My Instagram Photos” to Orange, “Blog Posts” to Green, and Twitter to Red.

Code:

.stream-173614 a.item-link.view.hooked {

    background-color:blue !important;

}

.stream-YOUR STREAM ID HERE a.item-link.view.hooked {

    background-color:green !important;

}

See it in action:

Change Hub Tile Color

Remove the Featured Star from your tiles 

We add a nice star icon to all of your featured content in Uberflip.  Even though you can change what is featured, you cannot change the star icon.

This code will remove the Star Icon, but still keep the content at the top. You can use this if you are a stickler for aesthetics.

Code:

.tile.single .icon{

    display:none;

}

See it in action:

Featured Content Star

Featured Content Star REMOVED

Customize the font of a specific CTA

 Sometimes you’ll want to have CTAs that POP! And if you have used our code for adding images to CTAs from my previous post, we take it one step further here and actually import a specific font for a CTA!

 Code:

/* Make sure the @import line is at the top of the CSS Custom Code section */
@import url('http://fonts.googleapis.com/css?family=Lobster');


#hub-cta-CTA # HERE p{ 

 font-family: 'Lobster';

  }

See it in action:

Fancy CTA Font

Remove the timestamp from all tiles

When it comes to content, one of your main initiatives should be to repurpose or re-promote your existing content. That’s why sometimes you would like the date stamp removed from a tile.

This will allow you to promote content without showing readers that a post is from 2 years ago.

Code:

/* FOR TILES */

.friendly-timestamp {

display:none;

/* FOR ITEMS */

span.date {

display:none;

}

Remove the default sharing widgets to add your own from our AddThis integration

We offer social sharing on all content within the Hub!  This is done by default, and we give you a certain set of social networks to share too. However, we also give you the chance to use AddThis, a great way to customize your own share bar for the networks you know your users will share to.

This code allows you to hide our default share icons and just have the AddThis toolbar!

Code:

.addthis_toolbox.addthis_floating_style {

 display: none!important;

}

Remove the Author Profiles section from the Hub

Sometimes you do not want the user to be able to navigate through an Author Profile away from the content, say, if you have a CTA that leads to a gated eBook. Or you may be trying to encourage visitors to use our next item fly-out to consume more content.

This code allows you to remove the entire Description Block at the bottom of blog posts! 

(NOTE: This will only remove the bottom description, and not the top link to the author profile)

Code:

blockquote.author{

    display:none;

}

Always show the tile description even with long titles

Uberflip tiles by default show both a tile image, title and description section.

However, when the title runs over 30+ characters, the description will disappear to make room for the title.  With this code, you will be able to have the description show no matter the length of the title!

Code:

.tile.single.with-img .description h4.long-h3 {

display: block;

}
 

See it in action:

Always Show Tile Description

Make your Flipbook cover the full size of a tile

Want your cover page to become a full-sized tile in a Hub? Well then this code is for you! This will make your flipbook cover the entire size of the tile and when the user clicks on it, it will take them directly to the Flipbook!

Code:

#collection-items > ul > li.tile.single.uberflip.portrait > a.item-link.view.hooked{

display:none;

}

 

#collection-items > ul > li.tile.single.uberflip.portrait > div.description {

display:none;

}

See it in action:

Flipbook Cover Full Tile Size

If you are interested in completely customizing your Hub to make it fit in with the branding and links of your current website, please reach out to one of our Customer Success team members at success@uberflip.com and ask about our new Custom Implementation package!

Happy Uberflippin’!

For more cool Hub Hacks, check out the Uberflip Knowledge Base.

About the Author

Tyler Ryll

Before becoming Uberflip's Sales Engineer, Tyler joined the team as a Customer Success Specialist. He previously received his BBA in Marketing and racked up 10 years of sales/service/support experience in everything from gym memberships to SaaS products.

Follow on Google Plus Follow on Twitter More Content by Tyler Ryll
Previous Article
4 Actionable Tips for Improving Lead Quality
4 Actionable Tips for Improving Lead Quality

Improve the quality of your leads by considering the entire buyer journey.

Next Article
5 Tips for More Efficient and Effective Content Curation
5 Tips for More Efficient and Effective Content Curation

Content curation is an integral part of your content marketing mix. Social media marketing expert Peg Fitzp...

Check Out Our Upcoming Webinars and Events

Find Out More