Let's dive in to another great series of custom CSS stylin' tricks to really give your Hub its own look and feel.

Let's get CSSin’!

Finding the CSS Path to target specific elements

Custom styling has become a popular trend for Uberflip Hub users.  However, not everyone has the developer resources at their disposal to make their Hub their own. That's why we wanted to show you where you can identify each CSS Selector within your Hub!

This is the first step in styling certain aspects of your Hub!

• Open dev tools
• Mouse over the various elements in dev tools until your desired element is highlighted on the web page
• Right click and press “Copy CSS Path”
• Voila! You have your CSS selector

Changing location of text in CTAs

We allow you to completely change the wording on each and every CTA you create within your Hub.  However, sometimes the placement of these words within the CTA tile are just as important.  If you wanted to move your copy around the tile to showcase a picture in the background, you can do it with just a simple piece of code.

Code:

#hub-cta-#CTA_ID p{   left: 100px; /*Distance in px from the left of the tile*/   top: 150px; /*Distance in px from the top of the tile*/}

See it in action:

Changing the location and color of the Top Nav Bar 

This code is meant to ensure that if you wanted to brand your top navigation bar, you can do so! This is a good tool if you plan on using a Footer/Header combo.  This code will allow you to change the color of the Hubs menu.

Code:

.top-nav {   background-color: #000000; /*Color in hex code.*/   border-bottom: none; /*This removes unwanted line below bar*/   }

See it in action:

Change the location of the Side Navigation Menu

This piece of code is great for when you embed your Hub on your site, or if you are using a standalone Hub to ensure your left-hand navigation menu is completely visible throughout the user's experience on site.  This example is tough to see, however if you continued to scroll down, you would have enough space between the top frame, all the while having the menu right beside the content.

Code:

.left-nav.desktop {margin-top: 105px; /*Adjust value in px as needed*/}

Customize Sprite File for Images

• Download this image template:

https://content.cdntwrk.com/img/hubs/sprite-1x.png?v=1070

• Swap the sprites in any image editor as you desire. Ensure the icons are all in the same places on the image file.
• Upload and host your new sprites image where you wish.
• Add the following code to your Custom CSS

Code:

.icon, .left-nav>li>a, .mobile-nav li:before, .item-next-prev .preview .meta-top .preview-icon {background-image: url("http://IMAGE_FILE_URL");}

***DISCLAIMER*** The code provided has been tested and approved by myself and my team here at Uberflip.  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.