How to write css for each page in rails 3


Tags: css,ruby-on-rails,twitter-bootstrap

Problem :

I want to make different layouts for different pages in my rails application but if i am creating a different file in assets folder for a particular page then it is taking some values from different page and some from different that file. I am getting mad on this. I ve made a different layout file for that and include this layout'home' in each controller( home for home page). Please help.



Solution :

i found the answer. Actually its not a good practice unless and until you want a different a page in your web application which has totally different views from other pages. All you need to do is as follows:

Suppose i want a total different layout for console page. So here are the steps

  1. Create a layout console.html.erb in layouts folder.
  2. Change this line <%= stylesheet_link_tag "application", :media => "all" %> to <%= stylesheet_link_tag "console_layout", :media => "all" %>.
  3. Also change the javascript_include_tag line if you want to include a different javascript.
  4. Go to assets/stylesheets.
  5. Create a file console_layout.css.scss in that folder and include any stylesheets if you want to add for that particular page. Suppose i want to include the bootstrap_and_overrides.less file for this console page. Write like this
  6. /* *= require 'bootstrap_and_overrides' *= require 'console' */

  7. In the end remove self_tree . from the application.css.

Doing this means you are actually creating a different layout, a different style sheet for that console page. After creating this it will never ever take values from other stylesheets. I would like to mention do this only if you need to create a page which has total different style and has nothing to do with the other page's styling.

Thanks. :)


    CSS Howto..

    How do I use this CSS animation in my HTML file?

    How can I align my search button to the right?

    CSS How to change 3 line (menu icon) color when hover

    how to vertical align a table inside a div

    How to create e-commerce website [closed]

    Show and hide table column using jQuery

    How to make jquery click() work with css button?

    how to apply the style using css3 [duplicate]

    How to use pure css selector to select hidden element

    HTML/CSS - How to make text-overflow in line with each other?

    How to display a horizontal line before and after a heading in css

    How can I get my drop-down to not open unless the li is hovered?

    how to position two image as a background image on div by css

    How to adjust width of right-aligned navbar

    How to force elements to stay in the same row

    How do I remove white space INSIDE CSS border? I want the border to be tight around the text

    How to highlight table row on hover using CSS only?

    How do you choose when to use DIV and when SPAN, to wrap something?

    how scrollable text line inside a div without showing scroll bars

    How to place a div on right side of cascading tables - CSS

    How to set css error-styles programatically on a TextBox

    How can I align a text that has a specific width at the center of a div?

    how to define variable in less

    How to prevent CSS transform skew from breaking child element position?

    How do you design your CSS?

    how to use css to style a descendant (not a direct child) of an element?

    How to create an overlay to be used under a pop up

    How to use CSS spinner in Angular2 while loading asynchronous list?

    How to set css font-size for text input from style sheet

    How do I learn what changes my css values?