Custom values ​​for some bootstrap-sass variables (v2.0.3) do not work

Question

I am trying to override some of the default variables provided by bootstrap, especially some default color and font settings, but only some of them seem to take effect. Here is the top of my custom.css.scss:

$myOrange:#f89406; $myBlueDark: #304269; $myBlue: #91BED4; $myBlueLight: #D9E8F5; $myWhite: #eee; $myGrayBlue: #43464C; /* colors */ $linkColor: $myBlueDark; $navbarBackground: $myBlueDark; $navbarBackgroundHighlight: lighten($navbarBackground, 10); $navbarLinkColor: darken($myOrange, 10); $navbarLinkColorHover: $myOrange; $bodyBackground: #000; $dropdownBackground: $myBlueDark; $dropdownLinkColor: $myOrange; $hrBorder: $myBlue; $heroUnitBackground: lighten($myOrange, 20); $dropdownLinkColorHover: $myOrange; /* typography */ $sansFontFamily: 'PT Sans Narrow', 'Lucida Grande', serif; $baseFontSize: 16px; @import 'bootstrap'; // ... rest of the css .... 

Here I specified the values ​​for several bootstrap variables and expected the font to be specified and the colors of the links to the values ​​I set for them.

However, I noticed that only some of these values ​​work. For example. the font on my page still remains at default loading (Helvetica Neue), but the colors of the navigation bar change to the correct values.

I searched on the Internet, but none of the solutions I found worked. A problem has been reported that resembles this problem, but has since been closed: https://github.com/thomas-mcdonald/bootstrap-sass/issues/102

I would continue and comment on this topic, but I just wanted to make sure that I was not missing something.

One more note here when I explicitly do this later in my custom.css.scss:

 @mixin default_font { font-family: "PT Sans Narrow", "Lucida Grande", sans-serif; font-weight: 400; } body { padding-top: 60px; background-color: #D9E8F5; @include default_font; } 

Fonts display well. I am specifying background-color here due to the same problem.

I am using bootstrap-sass v2.0.3. Is there something I'm doing wrong or missing?

Thanks.

Answer 1

While I was working on a demo application to reproduce my problem: https://github.com/verma/bootstrap-sass-tests I restarted the rail development server.

This seems to fix the problem. I am not sure if this is a permanent fix, so I will wait before I answer this question as soon as they answer.

Answer 2

Removing the navbar-inverse style from the class attribute in the title element may fix the problem.

Use for example:

 <header class="navbar navbar-fixed-top"> 

Answer 3

Hmm, I was fortunate enough to use this for fonts and link colors:

 $baseFontSize: 17px; $baseFontFamily: 'Crete Round', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $baseLineHeight: 20px; $altFontFamily: 'Open Sans Condensed', Georgia, "Times New Roman", Times, serif !default; $headingsFontFamily: 'Alfa Slab One'; // empty to use BS default, @baseFontFamily $headingsFontWeight: normal; // instead of browser default, bold $headingsColor: $blueDark; $linkColor: $blueDark; 

Variables you can use can be found in the _ file varibles.scss .

Answer 4

What does your application.css.scss file look like? I ran into a similar problem and found that I had a different stylesheet overriding my base font, which I didn't want. Make sure that you do not have other files that cause overrides (for example, scaffolds.css), and make sure that you do not have the require_tree option.

Answer 5

I added an important font for the body font family and fixed my problems.

Context: I had a similar problem for my Rails 5 application where my custom fonts (.otf) were not applied. In the developer console, I see the body font applied as "Helvetica Neue", which I think comes from bootstrap-sass.

 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ... 

when I turned off the font family: "Helvetica Neue", I see my fonts as expected, so I know that the resource pipeline for my custom fonts works correctly.

It was supposed that it was important to solve my problem.

 body { font-family: 'Din-Light', 'Helvetica', 'Arial', 'sans-serif' !important; }