CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
Linus
Linus

Reputation: 4783

Change Rails Bootstrap body color

I'm trying to change the body background-color to a custom color. Usually I've written the custom css into the bootstrap_and_override.css file, which works, but with the body tag it doesn't. Some people here suggested finding and overriding the standard body css settings but sublime-text is, just as me, unable to find the corresponding line anywhere in the project.

Maybe I'm adressing the body tag wrong? I've written:

  body {
    background-color: #F8F8F8;
  }

since the body tag doesn't seem to have any custom class by which it could be adressed. In chrome web inspector, I can see this, so it seems like my code is being noticed but later overwritten. But I just can't find the place where that happends.

chrome analytics picture

The crossed out background-color is the correct one, not #FFF.

I hope someone knows the answer to this, it can't be this hard? Thanks a lot!

Update: Here is the content of the application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

Update 2: Here is the content of the stylesheets folder:
application.css
bootstrap_and_overrides.css
bootstrap_and_overrides.css.less
... the rest are the site specific files, ending with .css.scss

Upvotes: 1

Views: 2206

Answers (2)

Thanushka
Thanushka

Reputation: 227

You must modifying the 'body' style in bootstrap css. The default is #fff (white). Beware because there are 2 'body' styles and the one on top is just for margin and the one in middle is for background color, font etc..

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

You could use !important. I would proceed with caution as this is not best practice. Forcing an override with !important has it's place and should be used only when necessary. 

body {
    background-color: #F8F8F8 !important;
  }

An example of when I personally use !important is for debugging and to override rules set by javascript-generated inline CSS, if I do not have the permissions to edit the javascript/plugin.

Upvotes: 2

Related Questions