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.   

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
3 Companies Proving Customer Success Equals Company Success
3 Companies Proving Customer Success Equals Company Success

A look at how 3 companies are setting their customers up for success.

Next Article
Is A Leaky Content Experience Costing You Leads?
Is A Leaky Content Experience Costing You Leads?

Build a content experience that retains your traffic. Here's what you need to have.

Check Out Our Upcoming Webinars and Events

Find Out More