Title: Change tab background colour
Last modified: August 23, 2018

---

# Change tab background colour

 *  Resolved [heroprint](https://wordpress.org/support/users/heroprint/)
 * (@heroprint)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/change-tab-background-colour/)
 * Hi there.
 * How can I change tab background colour in product view? Previous topics have 
   the css for changing colour of tabs on hover.
 * And also is it possible to change the catalogue colour?
 * Many thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fchange-tab-background-colour%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [heroprint](https://wordpress.org/support/users/heroprint/)
 * (@heroprint)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10619174)
 * For catalogue colour above other than the 3 standard colours.
 *  [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/)
 * (@etoilewebdesign)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10621640)
 * Your link goes to a page not found error.
 * You can just use custom CSS for the tab colour, exactly the same as any examples
   we would’ve given previously for the hover. For instance:
 *     ```
       .upcp-tabbed-layout-tab {
       background: #f0a !important;
       }
       ```
   
 * You can use custom CSS to change the colour of most elements in the catalogue.
   Just right click on an element and choose “Inspect Element” (or just “Inspect”
   depending on the browser). There you’ll find the class or ID that you need for
   your custom CSS.
 * If you’re referring to the little tabs at the top of the catalog that allow you
   to switch between the layouts, then those are images and currently only available
   in those colours. At some point, we hope to be able to convert those to font 
   icons, which will allow more colour choice.
    -  This reply was modified 7 years, 9 months ago by [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/).
    -  This reply was modified 7 years, 9 months ago by [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/).
 *  Thread Starter [heroprint](https://wordpress.org/support/users/heroprint/)
 * (@heroprint)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10623117)
 * Hi. The link now is [https://www.iffl.com.au/gia-certified-loose-diamonds/?&SingleProduct=12](https://www.iffl.com.au/gia-certified-loose-diamonds/?&SingleProduct=12)
 * So when I use the above css
 * .upcp-tabbed-layout-tab {
    background: #f0a !important; }
 * with
 * .upcp-tabbed-tabs-menu li#upcp-tabbed-tab:hover {
    background: #D56093;}
 * to ensure tabs colours change on hover
 * Tab colours do not change on hover.
 * Thank you.
 *  [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/)
 * (@etoilewebdesign)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10629055)
 * Hi heroprint,
 * Can you try replacing all the CSS in your “Custom CSS” box with this code instead(
   before you do, make sure to take a copy of the code that’s in there, just in 
   case):
 *     ```
       .upcp-tabbed-addtl-info-menu, .upcp-tabbed-addtl-info {
       display: none;}
   
       .upcp-tab-break {
       display: inline;}
   
       .upcp-tabbed-layout-tab {
       background: #1e2d3d !important;}
   
       .upcp-tabbed-layout-tab:hover {
       background: #990000!important;}
   
       .upcp-tabbed-layout-tab:hover a {
       color:#fff;
       text-decoration: none;}
       ```
   
 * To replace the tab background, swap out `1e2d3d` with another HEX colour.
    To
   change the background hover, replace `990000`.
 * Note: We also added “.upcp-tabbed-layout-tab:hover a” to set the link colour 
   as white + remove the extra underline on hover.
 *  Thread Starter [heroprint](https://wordpress.org/support/users/heroprint/)
 * (@heroprint)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10641638)
 * Thank you. Works like a charm. One question though. How did you know what CSS
   I have added already :-)?
 *  [etoilewebdesign](https://wordpress.org/support/users/etoilewebdesign/)
 * (@etoilewebdesign)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10644473)
 * Hi heroprint,
 * You’re very welcome. Happy we were able to help!
    We could figure out the CSS
   by using the Google Chrome Developer menu(you could use any browser’s developer
   console and see the scripts, CSS and other components loaded by any page).
 *  Thread Starter [heroprint](https://wordpress.org/support/users/heroprint/)
 * (@heroprint)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10645288)
 * Thank you. That is above my knowledge 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Change tab background colour’ is closed to new replies.

 * ![](https://ps.w.org/ultimate-product-catalogue/assets/icon-128x128.png?rev=1805317)
 * [Ultimate Product Catalog](https://wordpress.org/plugins/ultimate-product-catalogue/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ultimate-product-catalogue/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ultimate-product-catalogue/)
 * [Active Topics](https://wordpress.org/support/plugin/ultimate-product-catalogue/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ultimate-product-catalogue/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ultimate-product-catalogue/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [heroprint](https://wordpress.org/support/users/heroprint/)
 * Last activity: [7 years, 8 months ago](https://wordpress.org/support/topic/change-tab-background-colour/#post-10645288)
 * Status: resolved