CODEWITHSUNDEEP
htmlcssruby-on-railssass
Ruegen
Ruegen

Reputation: 665

change body background depending on the page rails

I'm using bootstrap-sass in my rails app which works fine however one particular page 'welcome' I want the body to have have different color.

If I open the welcome.scss file in the assets and add 

html, body {background:#000000;}

I get no change and the bootstrap white overrides the change I expect to happen.

How do I get it to change for that page.

It was my understanding that the page css only loads in when you are on that page - am I wrong and would it just be the same as writing in the Application.scss file?

Upvotes: 2

Views: 2569

Answers (3)

Richard Peck
Richard Peck

Reputation: 76774

It was my understanding that the page css only loads in when you are on that page

The CSS which loads is dependent entirely upon the stylesheet_link_tag in your layout:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>

The way in which you load this determines the stylesheets which load each page.

--

For example, the standard Rails way to load your stylesheets is to use the "sprockets" files & directives to append the required files into your application.css sheet. Although this works in any other sheet, it's mainly used with application.

Since you're using bootstrap (which tells you the following):

#app/assets/stylesheets/application.css
/*
 *= require bootstrap_and_overrides
*/

... you'll need to make sure you know which files you want to load. Specifically, your assertion that page-specific CSS being loaded is false; you either hard-code the loads, or put the code into a single file (EG application):

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, controller_name #=> loads controller CSS page each time you load a new controller %>

--

For you, I would do the following:

#app/views/layouts/application.html.erb
<body class="welcome if action_name == 'welcome'">

Then you'd be able to use the following:

#app/assets/stylesheets/application.css
body.welcome {background:#000000;}

Upvotes: 4

Hieu Pham
Hieu Pham

Reputation: 6707

If you wanna customize the style for a specific controller or action you can follow this:

  1. Add controller name/ action name (if needed) to layout file, application.html.erb is in my example:

<!DOCTYPE html>
<html>
  <head>
    <!-- My header template -->
  </head>
  <body class="<%= controller_name %>_body action_<%= action_name %>">
    <!-- My body template -->
  </body>
</html>

  1. Add css in a suitable file. Eg: controler_name = 'home', action = 'index'. So my css will be (Notice that I don't use action = 'index' here to css, it may be needed in your case)

body {
   background: NORMAL_COLOR;
   &.home-body {
     background: SPECIAL_COLOR;
   }
}

Upvotes: 2

Dushyant
Dushyant

Reputation: 4960

If you are loading that css file only in that particular page, then it will be applicable only to that page. Otherwise it will apply to all of the pages. So in nutshell, it is same as writing in Application.scss.

css classes applied in same order as you defined in declaring them. So to apply welcome.scss you need to declare it after bootstrap css file.

Further you can make use of !important

This is how you can define page specific css files in <head> section:

In your application.html.erb you can define 

<% if content_for?(:head) %>
    <%= yield(:head) %>
<% else %>
    # default css file
<% end %>

And in your pages (welcome page for this particular instance), you can define your respective css file like this:

<% content_for :head do %>
     <link rel="stylesheet" href="/assets/welcome.scss">
<% end %>

Hope it helps!

Upvotes: 0

Related Questions