I tried to change the hover color of these tabs without success. Need a little hint. O:-)
Those colors should be in the variant css file under the "$TABS" section ... they all start with .ui-tabs
Yeah, I tried this. But I am confused... That's my code so far.
.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active {
background: #529DCC;
background: linear-gradient(to bottom, #5BA9D9, #529DCC) repeat scroll 0 0 #529DCC;
}
.ui-tabs .ui-state-hover {
color: #464646;
}
.ui-tabs .ui-tabs-nav li a {
background: #f0f0f0;
color: #464646;
border-bottom-color: #ccc;
outline: none;
border-radius: 2px 2px 0 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
cursor: text;
color: #fff;
background: #6eb4e0;
background-image: linear-gradient(to bottom, #6eb4e0, #529DCC);
}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus {
border: 1px solid #ccc;
background: #6eb4e0;
background-image: linear-gradient(to bottom, #6eb4e0, #529DCC);
font-weight: normal;
color: #fff;
}
.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited,a.ui-button:hover,a.ui-button:focus {
color: #fff;
background: #6eb4e0;
background-image: linear-gradient(to bottom, #6eb4e0, #529DCC);
text-decoration: none
}
The jquery .ui-tabs css is nothing but confusing !
Are those from 1.0? The css lines changed a bit in 1.1 so be sure to start from the newer 1.1 declarations in the variant file.
The hover background for the non-active tabs is this section
.ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor {
border-color: #CCCCCC;
border-top-color: #AFAFAF;
border-left-color: #AFAFAF;
background: #F0F0F0;
color: #585858;
}
Nope, these are from the 1.1 default theme.
Okay, I do my very best. :D
Edit: Nope, that's not it. Damn, I wish those buttons could be easily make look like the other buttons on my board, which are blue or green and any link text is not underlined. I don't know what to do without messing the whole ui-tabs stuff up. :-[
strange, I don't see some of those declarations you posted in the default, well at least with those colors definitions. If you changed that you should put them back to default and try just changing the lines I indicated.
Oh yeah, that is strange. Maybe I did a mistake, I am very confused right now (as nearly always it seems). :-X
I will take a look tomorrow. For now I am done. ;)
At least it's online and not anymore into maintenance mode.
I write you a PM, found a little bug :D I know, I'm a bad person, just one click and one bug found :D
@Spuds Okay, I did. Works, but I need to change the color of the active hovered button AND the active, but not hovered button. ;) And the text links of the hovered buttons (no matter if active or not) are underlined, but should not be. I already insert a "text-decoration: none !important", but it doesn't help.
Sorry, many wishes, I know. O:-)
I remember it has something to do with admin tab as well, only that I forgot how I did that in faceit during 1.0 time.
Why are we using this system, when nobody understands it? :D
Is it that complicated? :D
We are still on page 1, so... No. :D
I did it but I don't remember how, I'll take a look tonight and let you know
Hover right? Try these (change it to your color of course ;D):
.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.
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. ;)
If I remember right, (since I am on my hp), adding .active to it would fit what you want.
Nope, all I try, no effect. :(
I could change the color of the active, not hovered button with this, yippie:
.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. :(
I hope you have solved this but if you haven't, try this:
.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:
.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.
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. ;)
have you tried CTRL+F5 after the css edit?
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.
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.
Lol. Sorry for confusing you. :D Thanks for your help, I appreciate it.
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
Of course you are right. I will begin from the start. Step by step.