Problems assigning colors to css tab elements

HTML & CSS
1

Hi there everyone!

https://scotchandiron.org/gameassets/tt_help/

Basically, I’m trying to make the active tab background white with black text inside(like the content div below it) and when the tab isn’t active, have the tab background blend into the page background color and have white text inside of it.

I’ve done some googling and it seems I need to use the important tag but I’m struggling to figure out how to assign these properties.

Any help would be greatly appreciated!

2

As it is now the text is white from this boottrap rule, the .nav-pills > li.active > a

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #428bca;
}

You should be able to over ride it in your style.css since it is lower in the cascade.
Try to stay away from using !important, it is a last resort when you can’t access third party CSS.

<head>
		<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
		<link rel='stylesheet' href='./css/style.css'>
	</head>
3

Hi there Ray and thanks very much for your help!

I’ve modified the css as you instructed and removed my css attributes utilizing the imoprtant tag. It got my inactive tag backgrounds the proper color but now I’m stuck with the following issues:

active tab background is blue
inactive tab text is blue

when I’m intending the following:

active tab background white
active tab text is black

I’m trying to fix this but any changes I make mess up the css you fixed for me above.

4

I think I figured out the tab background, just need to figure out the text color. I’ll get it eventually :slight_smile:

5

Well, I’m just having a heck of a time figuring out the inactive tab text color. I can either get it to have white background and text for active tab or I can have white text and blue background on the active tab but I just can’t get both the white tab and black text on the active tab.

6

That’s because this rule will always win out:

#exTab .nav-pills > li > a

You’ve used an id so you need to use an id to over-ride it. Ids carry more weigh than a thousand classes so you have to use the same structure in all rules that refer to that element. That’s the whole basis of CSS :slight_smile:

I’ll let you try to work it out from here :wink:

#exTab .nav-pills > li.active > a, 
#exTab  .nav-pills > li.active > a:hover, 
#exTab  .nav-pills > li.active > a:focus {
    color:#411c1c;
    background:#fff;
}
7

… and a little refinement to get your hover working and to cover up the border-radius on the top left when active.

#exTab .nav-pills > li > a:hover, 
#exTab .nav-pills > li.active > a, 
#exTab  .nav-pills > li.active > a:hover, 
#exTab  .nav-pills > li.active > a:focus {
    color:#411c1c;
    background:#fff;
}

#exTab .nav-pills > li:first-child > a {position:relative;}
#exTab .nav-pills > li:first-child.active > a:after,
#exTab .nav-pills > li:first-child > a:hover:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:1.5em;
    background:#fff;
}
8

Hi there Paul and thanks so much for the help! I know it’s starting to look like I should not be allowed to operate a keyboard but After the changes, I’ve again lost the styling of the non-active tabs. they have lost their font-weight of strong and have returned to a blue color when I am trying to make them strong and white.

My issue is I don’t know how to separate the non active tag from the active in the CSS. I’m trying to but I just keep goofing it up.

9

I think I figured it out. I seem to have overthought it:

#exTab .nav-pills > li > a {
	font-weight:bold;
	color: #ffffff;
}
2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.