Skip to main content
Topic: hover color of ui-tabs (Read 5228 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: hover color of ui-tabs

Reply #15

Hover right? Try these (change it to your color of course ;D):
Code: [Select]
.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor {
    background: #43a8da;
    background-image: linear-gradient(to bottom,#6db3f2 0,#54a3ee 30%,#3690f0 68%,#1e69de 100%);
    color: white;
}

Don't forget to Ctrl + F5.
Last Edit: May 29, 2018, 10:38:03 am by ahrasis

Re: hover color of ui-tabs

Reply #16

Ehm... No...

I don't want to color the not active buttons when mouseover, no.

I want to color the active button when mouseover. And when active, but not mouseover.  ;)

Re: hover color of ui-tabs

Reply #17

If I remember right, (since I am on my hp), adding .active to it would fit what you want.

Re: hover color of ui-tabs

Reply #18

Nope, all I try, no effect.  :(

I could change the color of the active, not hovered button with this, yippie:

Code: [Select]
.ui-tabs .ui-tabs-nav .ui-state-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav .ui-state-active {
    background: #529DCC;
    background-image: linear-gradient(to bottom, #6eb4e0, #529DCC);
    color: #fff;
}

But I can't change the color of the active, hovered button, no matter what I try.

And the hovered button text links are underlined, which I don't want too.  :(

Re: hover color of ui-tabs

Reply #19

I hope you have solved this but if you haven't, try this:
Code: [Select]
.ui-tabs .ui-tabs-nav li.ui-state-active:hover .ui-tabs-anchor {
    background: #43a8da;
    background-image: linear-gradient(to bottom,#6db3f2 0,#54a3ee 30%,#3690f0 68%,#1e69de 100%);
    color: white;
}
Or this:
Code: [Select]
.ui-tabs .ui-tabs-nav .ui-state-active:hover .ui-tabs-anchor, .ui-tabs .ui-tabs-nav .ui-state-active:hover {
    background: #529DCC;
    background-image: linear-gradient(to bottom, #6eb4e0, #529DCC);
    color: #fff;
}
Both should work the same as you intended i.e. on hover / mouseover, only highlight the active button.
Last Edit: June 04, 2018, 05:03:15 am by ahrasis

Re: hover color of ui-tabs

Reply #20

The first doesn't work at all, the second works a bit.  :-X

Maybe I need to describe better with images what I want to reach. I will do this later. Thanks for now anyway.  ;)

Re: hover color of ui-tabs

Reply #21

have you tried CTRL+F5 after the css edit?
sorry for my bad english

Re: hover color of ui-tabs

Reply #22

Of course.

Normally it should be easy. There are three buttons right on top of the profile. Let's name them row #1. The buttons in row #2 should behave and look exactly as row #1.

But they don't. The look different and the text is underlined when hovered (which is not the case with the buttons of row #1) no matter what I try to do with the help of the examination tool of my browser.

Re: hover color of ui-tabs

Reply #23

Quote from: Jorin – The first doesn't work at all, the second works a bit.
Well it was tested and works on my forum, both of them.

Anyway, I was testing using besocial variant, that may be a bit different than yours if you using light variant, though the principle should be the same.

First I think you want a hover effect on row#2 tab button so there was my first working answer and then later a hover effect only on active row#2 tab button so there was my second working answer.

Now I am not sure what you really want anymore and your images doesn't help me to understand it either.  :(

Hopefully you will find a way to achieve what you really intended.

Re: hover color of ui-tabs

Reply #24

Lol. Sorry for confusing you.  :D  Thanks for your help, I appreciate it.

Re: hover color of ui-tabs

Reply #25

With the tabs, you have to try one thing at a time, and if it does not work, remove it.

Those css declarations are highly specific, often targeting 3 or 4 levels deep which makes them hard to override if you leave ones in place that don't appear to work.  Anyway, like I said they are a PITA

Re: hover color of ui-tabs

Reply #26

Quote from: Spuds – With the tabs, you have to try one thing at a time, and if it does not work, remove it.

Of course you are right. I will begin from the start. Step by step.