8 CSS Hacks to Customize the Look of Your Hub
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:
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:
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:
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:
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:
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.