Tabbed Nav Theme Css

Introduction

You are able to modify the Tabbed Nav v1 layout for your CustomerHub portal by creating a custom CSS stylesheet (Settings > Customize Theme > stylesheet tab). This level of customization requires some basic knowledge of CSS code and hexadecimal color codes. You may need to get assistance from an experienced website administrator.

 

Step-by-Step Instructions

  1. Here are some code examples to get you started:

    Remove the Default Page Titles 
    #page_header{display:none;}

     

    Change the Color of Teaser Background (main page)
    #page_content .teaser{background-color:#FFFFFF;}

     

    Change the Color of Teaser Text (main page)
    #page_content .teaser{color:#000000;}

     

    Change the Color of Teaser Background (right column)
    #right .teaser{background-color:#FFFFFF;}

     

    Change the Color of Teaser Text (right column)
    #right .teaser{color:#000000;}

     

    Change the Color of the Logged in Customer / Member's Name
    div#top-links {color: #FFFFFF;}

     

    Change the color of the View Profile and Logout Top Links in the Customer / Member Portal
    div#top-links a,div#top-links a:visited{color: #FFFFFF;}

     

    Customize Tab Colors on a Per-Page Basis
    /*This code controls the background color of the tab and the font color of the text displayed on it when the page it links to is not currently displayed.*/ul#nav li#premium-membership a{background-color:#FF9900;color:#FFFFFF}/*This code controls the background color of the tab and the font color of the text displayed on it when a visitor's mouse hovers over it.*/ul#nav li#premium-membership a:hover{background-color:#FFFFFF;color:#FF9900}/*This code controls the background color of the tab and the font color of the text displayed on it when the page it is linked to is displayed in the main content area.*/ul#nav li#premium-membership.current_page a,ul#nav li#premium-membership a:hover{background:#EAEAEA;color:#333333}Note: The tabs are identified based on the perma-link assigned to the page it links to (e.g. premium-membership). Go to Content > Pages and click on the page name. Click on the General Info tab and copy the permalink. Use it to replace the permalink references in the example code. You will also need to customize the highlighted color codes.

     

    Change the Width of File Download Links
    a.member-file{width:200px;}

     

    Remove the View Profile Link from the Member / Customer Portal
    #view-profile{display:none;}

     

    Remove the My Filebox Link from the Member / Customer Portal
    .filebox-wrapper{ display: none; }

     

     

    Remove the Print Button
    #print_small{display:none;}

     

    Customize the My Filebox Link:  Text Color, Background Color, & Size (etc.)
    a.filebox span{ color: #FFFFFF; background: #E07500; font-size: 10px; font-weight:bold; padding: 2px 3px; text-shadow: rgba(0,0,0,0.3) 1px 1px 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

     

     

    Remove the Logo from Right Side Column 
    div#logo{display:none}

     

    Add a Logo to Top Header 
    div#header #company_name{clear:both;float:left;margin-top:10px;height:46px;width:300px;background:url('https://d2ma5jma76a61i.cloudfront.net/images/1076/7017/thumb/logo-brand.png') no-repeat;}div#header h1{display:none;}Note: You must replace the URL highlighted in the code above. Upload the image to CustomerHub and then view it through Content > Images. Right click on the image link, and selectCopy Link Location from the dropdown. Paste the link in place of the example URL above. You can replace the URL with the URL for an image stored on a secure server outside of CustomerHub, but may need to add code to scale the image size to make sure it fits in the header space properly.