7+ Easy HTML And CSS Hub Styling Tips

September 18, 2014 Tyler Ryll

As part of the Customer Success team at Uberflip, one of the common questions I get from customers is: “Is there a way I can change the background color and look of my Hub?!?”

So, I decided to create something that all of our customers (and non-customers alike) could use to style their Hub and content in a way that lets them carry over their company branding and improve the user experience. Or just learn a few HTML and CSS tricks to have in their back pocket for any formatting purposes!

So sit back, relax, and let’s learn some code!

Make Text Stand Out With Formatting

By adding some basic HTML code, you can bold, italicize, and underline text in your introduction, full description, and footer areas in the Appearance section of your Hub.

Bold

<b>insert text</b>

Underline 

<u>insert text</u>

Italics

<i>insert text</i>

Add Links To Your Footer Bar

Using the footer bar to feature links to your website, email,  or other part of your Hub is a great way to leverage this often unused space and keep users engaged with your content. 

Just head into your Hubs > Appearance > Branding > Footer and input the relevant code:  

Linking to Another Site

<a href="insert website URL">insert link text</a>

Linking to an Email Address

<a href="mailto:insert email address">insert link text</a>

Styling The Background Of Your Hub With CSS

This is an easy bit of code you can use to change the color of the background within your Hub as well as the header and paragraph background colors. Simply copy the code into the Custom CSS section under Appearance, replacing the hex code with the color you want to use! You can use the color name — e.g. yellow — or the RGB code — e.g. (255,0,255).  Here's a list of RGB and HTML color codes if you're not sure what your color's code is.  

Change the background color for the body of your Hub

body {    background-color: #00ff00;}

Change the background color of the header

h1 {    color: #00ff00;}

Change the background color of paragraphs

p {    color: #00ff00;}

Changing Text Colors Using CSS (Plus or Higher)

Tired of good ol' black and white color combinations?  Change the color of your font on your Hub by inputting this CSS code!

Change the color of the header text 

h1 {    color: #00ff00;}

Change the color of the paragraph text 

p {    color: #00ff00;}

Changing The Font Style 

Changing the font is one of the main feature requests that we receive.  We do offer a limited number of fonts, however when you use this code you are able to change the font type you would like to use within your Hub.  You can select any one of the many fonts available, and just replace it where it says "Times New Roman."

Change the font within the body of your Hub

body {    font-family: "Times New Roman";}

Change the font of the header  text

h1 {   font-family: "Times New Roman";}

Change the font of the paragraph text 

Changing The Look Of CTA Tiles 

These next two tips are a bit more advanced than the others but still easy to do. Adding pictures to CTA tiles is something that the Customer Success has been asked team many times.  Here is a quick way to get a picture of whatever you would like to appear behind the wording and button on your call-to-action!

Adding a picture to a LINK call-to-action

#hub-cta-YOUR CTA NUMBER HERE {
background: url('URL FOR THE IMAGE YOU WANT') !important;
background-color: initial !important; 
background-repeat: no-repeat !important;
background-origin: padding-box !important;
background-size: cover !important;
}

Adding a picture to a FORM call-to-action - Code from Above AND Below

.cta.full-screen-cta[data-cta-id="YOUR CTA NUMBER HERE"],
.cta.full-screen-cta[data-cta-id="YOUR CTA NUMBER HERE"] > div.hidden-cta-fields,
.cta.full-screen-cta[data-cta-id="YOUR CTA NUMBER HERE"] > div.run-away{
background-color: COLOUR CHOICE HERE !important;
border-bottom-color: COLOUR CHOICE HERE!important;
}

***DISCLAIMER***   If there are any issues with the code or appearance, there is limited support on CSS styling that we are able to provide.  Please make sure the code you're inputting matches your own branding before making any changes.   

Check out "The Complete Guide To Branding Your Hub" for more tips on making your Hub all your own. 

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 Video
The Dos and Don’ts of Gating Content for Lead Generation
The Dos and Don’ts of Gating Content for Lead Generation

<p> Many people draw a fine line between pop-up ads and gated content. Both can come across as obnoxious, ...

Next Article
14 Knock-Your-Socks-Off Ways To Use A Content Hub
14 Knock-Your-Socks-Off Ways To Use A Content Hub

Looking for content marketing inspiration? Here are 14 companies who took their own spin on a content Hub.