7+ Easy CSS and HTML Tips

November 4, 2014 Uberflip Customer Success

There are many ways to use HTML and CSS to customize and style your Hub. 

1.  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.


<b>insert text</b>


<u>insert text</u>


<i>insert text</i>


2. 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>


3. 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: http://www.color-hex.com/color-names.html

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;}


4. Changing Text Colors Using CSS

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;}


5. 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 


6. 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!

You'll need:

  • the ID of the CTA you'd like to add a picture to. Using your browser's Developer Tools, you can 'Inspect Element' of the CTAs. Look for something that looks like this: #hub-cta-123456, and
  • the URL for the image you'd like to use.

Adding a picture to a call-to-action

background-image: url('THE URL FOR THE IMAGE.jpg') !important;
background-color: initial !important; 
background-repeat: no-repeat !important;
background-origin: padding-box;
background-size: 100%;

7. Creating A Custom Hubs Menu To Match Your Site Menu

Using Custom Code (HTML and CSS) to display your own customized menu at the top of your standalone Hub.

Step 1:  Add HTML to Custom Code>HTML section

Using basic HTML (div, class, and a href tags — advanced HTML tags like script are not supported), add the elements of your site menu into the Custom Code>HTML section.  You’ll be using the divs and classes designations so Custom CSS will be able to target those elements in order to place/position them at the top of your Hub and to style them to look like your own site menu.

Here is how we've done this for our main site Hub:

<div class="site-menu-wrapper">
     <div class="site-menu">  
                <div class="winking-logo">
                    <a rel="tooltip" href="http://www.uberflip.com" title="visit home page" data-placement="right">Uberflip</a>
                    <div class="wink"></div>
                <div class="nav-collapse">
                    <ul class="nav  active">
                      <li><a href="http://www.uberflip.com/product">Product</a></li>
                      <li><a href="http://www.uberflip.com/pricing">Pricing</a></li>
                      <li><a href="http://www.uberflip.com/customers">Customers</a></li>
                      <li class="active"><a href="http://hub.uberflip.com/h/" data-internal="standard">Our Hub</a></li>
                    <ul class="nav btns  pull-right">
                        <li><a class="btn btn-uberflip pull-left" href="https://app.uberflip.com/try/plus">Create a Hub - FREE</a></li>
                        <li><a href="https://app.uberflip.com/login">Login</a></li>

Step 2: Position and style the code using custom CSS 

Refer to this CSS file so you can see how the custom HTML code  is targeted, positioned and styled.

***DISCLAIMER*** The code provided has been tested and functionality confirmed on the Uberflip Hub.  Your own Hub will require adjustment of the code provided here to achieve your own Custom Menu.  If there are any issues with the code or appearance, there is limited support on CSS styling that we are able to provide. 

Previous Article
Adding Custom Code to Your Hub: HTML, CSS & JavaScript
Adding Custom Code to Your Hub: HTML, CSS & JavaScript

Customize the look and feel of your Hub by using custom CSS

Next Article
What’s the Best Size for Blog Images That Appear Inside My Hub?
What’s the Best Size for Blog Images That Appear Inside My Hub?

As long as your RSS feed contains a properly formatted image, your Hub will automatically pull that image a...

Ready to Upgrade and supercharge your Hub with Custom Code?

We Can Help