Change tab background colour

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.
• This reply was modified 7 years, 9 months ago by etoilewebdesign.

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.

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