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 to get a label under an underlined word in css? [closed]

    How to move the blue twitter bird slowly using css and js?

    How to Remove the White Space below the Footer in Wordpress Site using CSS

    Using css modules how do I define a global class

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to style a tag for current div with css?

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    Control Show/Hide multiple DIV using CSS, Javascript, and Anchor without unique ID

    How to make all my div's same height based on breathing content

    How to do animation of using CSS and webkit

    How to create one UL menu similar to another

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to put 2 text input fields in one?

    In a responsive layout how can I get divs to shrink uniformly?

    How to stop a webpage from loading until all jQuery load functions are complete?

    How to disable flow around elements in table (CSS)

    How to set css style to asp.net button?

    How can I show an attribute as text with CSS?

    how to add css for div tag

    How to prevent opening a link of the submenu when tapping the menu?

    CSS - How to make IE7 respect min-width

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How to specify height using fancybox 2.1.4

    How to use Image instead of border-right with CSS in Wordpress?

    How to make dropdown list unselectable?

    How to move this button?

    how to wrap a text around a image?

    How to add another two full width sections below (CSS)

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    how can I do this space between tables? [closed]