User Selected CSS Stylesheet in Rails

Specify a style sheet in Ruby on Rails

1) In the controller method that renders your login page, add the following line at the end of the method:

render :layout => false

That code will prevent the application.html.erb layout from being applied to the login page, assuming you want a 100% custom layout and stylesheet. If you're happy with the global layout being applied (the structure of the page, including any header or footer partials, etc.), then ignore this step.

2) In your login.html.erb (or whatever file contains your view), you'll need the following line, to point at your specific css file:

<%= stylesheet_link_tag 'foo', media: 'print, screen' %>

where foo points to a foo.css file contained in your app/assets/stylesheets directory. You can skip the media bit if you don't want to differentiate between stylesheet media versions, but you may run into an issue with an unstyled view if the user ever tries to print the page, or if you're using a responsive layout.

3) Before that stylesheet link tag will work, you'll have to tell Rails to precompile it. In your_app/config/initializers/assets.rb, add the following line:

Rails.application.config.assets.precompile += %w( foo.css )

4) Restart your Rails application.

5) Create and write your foo.css file.

You should see your view specific css being applied. Also... I herd u liek mudkipz.

Rails Giving Each User Their Own Customizable Stylesheet

Despite that sounding like a terrible idea I guess an easy way to do it would be to add a CSS table and map it to the user with a record for each CSS file. When a new user is created you create new records for each file using the default CSS.

To edit you could present the user with the CSS text on a page with some sample mini-page where they could see the changes happen live. You would then need to load the CSS dynamically which could be a huge hit on your database so you'd want to add some memory to the call to retrieve the CSS.

Again though, this is a horrible idea in my opinion. What happens when the user messes up and then can't use the site because they put in some bad value? They can't change it back because they can't see anything so what do they do? They never come back.

You'd be better off just allowing them to pick from a set of allowed themes. But hey, it's your website, you do with it as you please.

How do I use CSS with a ruby on rails application?

Put the CSS files in public/stylesheets and then use:

<%= stylesheet_link_tag "filename" %>

to link to the stylesheet in your layouts or erb files in your views.

Similarly you put images in public/images and javascript files in public/javascripts.

Controller specific stylesheets in rails 3: Inheritence

The Rails guide on how to use the asset pipeline doesn't quite tell the whole truth here. It says:

You should put any JavaScript or CSS unique to a controller inside their respective asset files, as these files can then be loaded just for these controllers with lines such as <%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>.

Now, you could do as they suggest and load specific stylesheets for each controller, but it does not work as they suggest out of the box. The neglect to mention a few things you must do.

  1. You need to remove the //= require_tree . directive from application.css, which, left in place, will load every other asset in the folder. This means that every page would load users.css, and if you added the controller-specific stylesheet line as in their example, it would load the controller stylesheet twice.

  2. You would need to tell Rails to precompile the individual files. By default, all *.css files besides application.css are ignored by the precompiler. To fix this you'd have to do edit your config to do something like this:

    # in environments/production.rb
    # either render all individual css files:
    config.assets.precompile << "*.css"
    # or include them individually
    config.assets.precompile += %w( users.css static_pages.css )
  3. Finally, as instructed by the Rails guide, you'd need to change your stylesheet includes to look something like:

    <%# this would now only load application.css, not the whole tree %>
    <%= stylesheet_link_tag :application, :media => "all" %>

    <%# and this would load the controller specific file %>
    <%= stylesheet_link_tag params[:controller] %>

However, the above may not be truly the best practice. Sure, sometimes you might want individual stylesheets, but most the time you probably just want to serve your style bundle so the client can cache one file. This is how the asset pipeline works out of the box, after all.

Besides that, if you were to just add override rules in your controller specific stylesheets, then you're creating a load-order-specific tangle of styles right out of the gate. This... is probably not good.

A better approach might be to namespace the styles in the controller sheets, something like this:

// in application.css (or some other commonly loaded file)
background-color: $color1;

// in users.css.scss
body.controller-users {
background-color: $color2;
}

// and so on...

Then in your layout, add the controller name to the body class, like:

<body class="controller-<%= params[:controller] %>">

In this way, your styles are resolved by namespace, not just load order. Furthermore with this solution you could still go ahead and load separate controller-specific stylesheets if you desire, or you could forget about that and just let everything be compiled into application.css as it would be by default. All the styles would be loaded for each page, but only the controller-specific styles would apply.

How do I use Controller specific stylesheets in Rails 3.2.1?

I don't think it works that way (Home.css being applied only to Home controller actions). The different files are just for separation, to make it clearer what are the CSS rules describing. You can read this guide about the asset pipeline. I'm guessing you altered the default application.css.scss and removed the line importing all CSS files from app/assets/stylesheets.

How to respond with a stylesheet from your Rails controller?

Browsers expect css to be served with corresponding content type:

render body: css, content_type: 'text/css'

Rails has default mime type for this: render css: css

Also you can render in one step:

render template: "assets/stylesheet", formats: [:css], assigns: {foo: params[:foo]}

How do you associate a css/sass stylesheet to a view in rails?

The best way would be to put a named yield in your application layout:

<%= yield :head %>

Then use a content for block in your view:

<% content_for :head do %>
<%= stylesheet_link_tag :my_css -%>
<% end %>


Related Topics



Leave a reply



Submit