Portfolio Tab-bar fill and stroke color

[jiwon]

Hi,

At product(portfolio) page, I need to change the tab-bar fill and stroke color.

(default, hover, and selected colors)

Now when user hover the tab-bar, stroke is disappeared.

Especially, the color settings should apply to tab-bar, not other elements.

Thanks.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

/* Default*/
ul.bar-styling li > a, ul.bar-styling li > span, ul.bar-styling li > div, ul.bar-styling li > form input {
    background-color: #ff0000 !important;
}

/* Hover*/
ul.bar-styling li:not(.selected) > a:hover {
    color: #FFF !important;
    background: #F2BB34 none repeat scroll 0% 0% !important;
    border-color: #fff;
}
/* selected*/
ul.portfolio-filter-tabs li.selected a{
background: #0E2E17 none repeat scroll 0% 0% !important;
}

Thanks
Mohammad

[Edit]

Hi,

sorry for the rookie question (I’m a beginner:) I hope it’s related to this topic…
How can I change the background of my tabs? I’d like them e.g. green. When clicked on, the default grey (see the first tab) is just fine.
Could you help me, please?

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

can you provide us a link to that page?

-Rui

[Edit]

Hi,

thanks for the reply. Unfortunately I can’t because the website is offline just yet. Please let me know whet further information I can provide (except the link…) 🙂

Thanks in advance.

[David Martin – Support]

Please use this CSS:

ul.portfolio-filter-tabs li.selected a {
    background-color: green;
    color: #fff;
}

[Edit]

Thanks for your reply. I added that CSS to Custom CSS and doesn’t seem to work (I changed the colour to orange). Maybe I missed something.

Apologies for the rookie mistakes but any further ideas?

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Will need a URL/login to check this for you.

[Edit]

Hi, it’s on a MAMP solution stack, I edit it offline. That’s why the link looks like this: http://localhost:8888/hu/tolmacsolas/ and I don’t think it helps.

What’s your advice?

Thanks in advance.

[David Martin – Support]

You can create a staging site? Or use this: https://local.getflywheel.com/

[Edit]

Hi,

I tried it and unfortunately had lack of storage on my Mac. I went to the theme documentations and searched for the tabs in question: http://dante.swiftideas.com/pages/about-us-alt/#capabilities
There’s the ‘Why choose us’ column including Approach, Support, Capabilities tab if you scroll down a bit.
I hope it helps.
I’d just like to give an orange background colour to the tab buttons so they won’t be transparent.

Sorry for any inconvenience.

Thank you for your help in advance.

[Rui Guerreiro – SUPPORT]

Hi,

Can you try this code.

.spb_tabs .nav-tabs .active a {
    background-color: green!important;
    color: #FFF;
}

-Rui

[Edit]

It works! 🙂 Thank you so much for your support!

[Rui Guerreiro – SUPPORT]

No problem. Glad I could help.

-Rui