Changing the font colour of active tabs

Changing the font colour of active tabs

by Ross Lovell -
Number of replies: 3

I’m trying to change the font colour of active tabs in Moodle and been experimenting with the following code:

.nav-item {
	@include 	tab-background;
	box-shadow: 	$box-shadow;
	border-bottom:	solid 1px #dddddd;

	.active {
		@include active-tab-background;
		@include text-shadow;
		color:	 #fff;
	}
}

I can get the the active tab background and text shadow to display, but I cannot for the life of me get the font colour to change to white.

I'm using Moodle 3.2.3 (Build: 20170508) with a child theme based on boost.

Average of ratings: -
In reply to Ross Lovell

Re: Changing the font colour of active tabs

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

where are you adding this code?

Average of ratings: -
In reply to Mary Evans

Re: Changing the font colour of active tabs

by Ross Lovell -

I'm adding it to the second raw SCSS box in the themes Advanced settings tab.

Average of ratings: -
In reply to Ross Lovell

Re: Changing the font colour of active tabs

by David Scotson -
You can probably do part of this just by setting some Sass variables, $nav-tabs-active-link-hover-color perhaps:

bootstrap/_variables.scss
507:$nav-tabs-border-color:                       #ddd !default;
508:$nav-tabs-border-width:                       $border-width !default;
509:$nav-tabs-border-radius:                      $border-radius !default;
510:$nav-tabs-link-hover-border-color:            $gray-lighter !default;
511:$nav-tabs-active-link-hover-color:            $gray !default;
512:$nav-tabs-active-link-hover-bg:               $body-bg !default;
513:$nav-tabs-active-link-hover-border-color:     #ddd !default;
514:$nav-tabs-justified-link-border-color:        #ddd !default;
515:$nav-tabs-justified-active-link-border-color: $body-bg !default;

Generally speaking, when trying to change some CSS, you should use the browser tools to look at the current CSS that is setting the value that you want to change. Moodle often has long and very specific selectors which are a problem, because any rule that wants to overrule them needs be even longer and more specific, or else it will get overruled.
Average of ratings: -