Sage: style.css changes overidden by bootstrap.css?

[NickTomlin]

Hi All,

First off, roots rocks! I've been using 1140 starkers as a base theme (i'm a newbie WP designer, slowly getting into this framework stuff) but roots is an excellent alternative.

My problem is this:

I wanted to change the default font to Times New Roman for a client, but I'm not versed in the ways of LESS yet, so I added:

body, p {
  font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
}

to: css/style.css

Unfortunately, it seems that my styles are being overidden by bootstrap.css when I check things out in firefox.

What is the easiest way to change the default font? Is there a way I can just use style.css, or do I need a crash course in LESS?

Thanks,
Nick

[sambody]

The styles are being overridden because styles.css is called BEFORE bootstrap.css, so bootstrap styles will override them, if they have the same specificity. (I agree that it might be a bit confusing, as the style.css has a space to put your styles. But I think this comes from the original HTML5 Boilerplate style file, which, in Roots, is now combined with bootstrap css...)

A simple solution would be to put your styles in app.css, which is called AFTER bootstrap.css. That's were wordpress specific styles reside.

[NickTomlin]

Great, thanks Sam!
Yeah, I was a little bit confused about that.
I wonder if there's a way to make it clearer in the documentation, which currently says: "style.css is simply used to tell WordPress that we're a theme. The actual stylesheet you need to be editing is located at css/style.css"

Anyway, much thanks for your help!

[odysseas]

So what's the file for custom styles? Both css/app.css and css/style.css are being overriden by bootstrap.css. What am I doing wrong?

[NickTomlin]

Hi odysseas,

When you view the source of your page, what is the order the stylesheets are listed in your head tag?

App.css works for me. If you want to get a little hacky, you can check the order of sheets in inc/roots-actions.php and bump app.css below boostrap.css which should make its styles a higher priority in the cascade

[timoburmeister]

Hi guys,

sorry for opening up this issue again.

I'm confused like the people posting before me. I've edited the app.css and everything works so far, but in Documentation css/style.css is named the file to edit. Additionally, the stuff from styles.css seems like it isn't loaded at all...

Please enlighten me! :) And btw: roots theme really rocks, appreciate your work!

Bye
Timo

[abhijitbcob]

The styles are being overridden because styles.css is called BEFORE bootstrap.css, so bootstrap styles will override them, if they have the same specificity. (I agree that it might be a bit confusing, as the style.css has a space to put your styles. But I think this comes from the original HTML5 Boilerplate style file, which, in Roots, is now combined with bootstrap css...)

A simple solution would be to put your styles in app.css, which is called AFTER bootstrap.css. That's were wordpress specific styles reside.

thanks man