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

hover color of ui-tabs

I tried to change the hover color of these tabs without success. Need a little hint.  O:-)

Re: hover color of ui-tabs

Reply #1 –

Those colors should be in the variant css file under the "$TABS" section ... they all start with .ui-tabs

Re: hover color of ui-tabs

Reply #2 –

Yeah, I tried this. But I am confused... That's my code so far.

Code: [Select]
.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
}

Re: hover color of ui-tabs

Reply #3 –

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.

Re: hover color of ui-tabs

Reply #4 –

The hover background for the non-active tabs is this section
Code: [Select]
.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;
}

Re: hover color of ui-tabs

Reply #5 –

Quote from: Spuds – 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.

Nope, these are from the 1.1 default theme.

Quote from: Spuds – The hover background for the non-active tabs is this section
Code: [Select]
.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;
}

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.  :-[

Re: hover color of ui-tabs

Reply #6 –

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. 

Re: hover color of ui-tabs

Reply #7 –

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

Re: hover color of ui-tabs

Reply #8 –

Quote from: Jorin – 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
sorry for my bad english

Re: hover color of ui-tabs

Reply #9 –

@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:-)

Re: hover color of ui-tabs

Reply #10 –

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.

Re: hover color of ui-tabs

Reply #11 –

Why are we using this system, when nobody understands it?  :D

Re: hover color of ui-tabs

Reply #12 –

Is it that complicated?  :D

Re: hover color of ui-tabs

Reply #13 –

We are still on page 1, so... No.  :D

Re: hover color of ui-tabs

Reply #14 –

I did it but I don't remember how, I'll take a look tonight and let you know
sorry for my bad english