Ruby on Rails: How to Add a CSS File with Rails Project

Ruby on Rails: How can I add a css file with rails project?

Rails is likely consolidating all your css files into one that it is calling assets/all.css

Consider using the free plug-ins firebug + firepath to further characterize the problem. This common combo of tools will help you to interrogate web page elements and see the css that is contributing to their display.

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.

How to implement custom css in Ruby on Rails application?

You could implement customer css in Ruby on Rails application. For example, you could change a color of the texts or the links, or the font sizes regardless of the first or the second approach(see below)

the first approach:

using import statements in application.scss:

    @import "bootstrap-sprockets";
    @import "bootstrap";
    @import "custom";
    @import "styles";

the second approach:

   a) using import statements in custom.scss :
      @import "bootstrap-sprockets";
      @import "bootstrap";

   b) using statements as below in the application.scss:
         *= require_tree .
         *= require_self

You should not mix up the first and the second approach.

    You could not change hover as you would  like because
    it need to be to complied with bootstrap settings.
    For example, changing hover to green or red produces error.
    So, I ended up using the grey-darker color(see below) instead.
    You could override bootstrap but it is considered as the
    bad idea. 

    examples of changing  formatting:

        h1.green-text { color: green; font-size: 10em; }

        <h1 class="green-text">This text is very large and green
        </h1>

        a {
         color: green;
         &:hover {
             color: $gray-darker;
           }

         }

Ruby on rails: how can i add multiple css files in rails project?

<%= stylesheet_link_tag :cssone, :csstwo, and so on... %>

add external style sheet in rails project

I'm just going to assume you're already using something like this in your layout:

stylesheet_link_tag 'application'

If you want to refer to an external stylesheet then all you need to do is pass in the url.

stylesheet_link_tag 'application', 'http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css'

If you want to include the actual files in your codebase:

app/assets/stylesheets is where you should place your main css files.

vendor/assets/stylesheets is where you should place the css files for any plugins that you might have.

It's the same for js files. For example your application.js would go in app/assets/javascripts and a jquery plugin like timeago.js would go in vendor/assets/javascripts.

Where do you put CSS files in a rails app directory?

for Rails 2.x : public/stylesheets

---

Related Topics