CODEWITHSUNDEEP
cssruby-on-railsstylesheet
xps15z
xps15z

Reputation: 1829

How to apply stylesheet to view page

I am new with CSS/stylesheets. How can I apply the stylesheet I created under the vendors folder to my users show page? It's for the profile thumbnail photos.

show.html.erb:

<div class="parent-container">
    <% @user.photos.each do |photo| %>
        <%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<% end %></div></p>

Upvotes: 0

Views: 113

Answers (2)

JellyFishBoy
JellyFishBoy

Reputation: 1798

The rails asset pipeline is broken up into 3 different sections.

  • app/assets is for assets that are owned by the application, usually scripted by yourself.

  • lib/assets is for your own libraries' code that doesn't really fit
    into the scope of the application or those libraries which are shared across applications.

  • vendor/assets is for assets that are 3rd party, such as js plugins and frameworks.

It is generally bad practise to start adding assets in the public folder. When your asset pipeline tries to compile and compress them in production, it won't be able to find them because it only looks in the app, lib and vendor folders.

<%= stylesheet_link_tag :application %>

This will automatically look in the app/assets folder, and retrieve, the file named 'application'. Thereby rendering new styles within your application!

To include new stylesheets into your application, just require the file into the application file, e.g.

/* ...
*= require_self
*= require_tree .
*= require custom_stylesheet_name
*/

The require will automatically look in the above mentioned folders (app/lib/vendor).

If you need further help with assets, check out the RailsGuides; they have alot of helpful and in depth content.

http://guides.rubyonrails.org/asset_pipeline.html

UPDATE FOR COMMENTS:

You can set up controller specific assets by using the params[:controller] value. For example, if you have a store_controller.rb you can include a store.css file. There are three 3 steps to the solution:

  1. You need to remove the *= require_tree . from the application.css otherwise the controller specific css file will be included twice.

  2. Make sure the asset pipeline precompiler is notified of the new file - all files apart from application.css are ignored unless otherwise specified. You can do this in the production.rb file with the following: config.assets.precompile << "*.css".

  3. Finally, you need to include controller specific file:

    <%# 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] %>

On the other hand, having specific stylesheets may not be best practise. Having more than one file will incur multiple server calls, reduce response times and create a load order tangle of styles. Besides the asset pipeline is designed to serve a single stylesheet which the client can cache.

Another approach may be to have a bespoke global class for each controller, i.e.

body.controller-users {
   background-color:#000000;
}

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

Upvotes: 1

Shaun Frost Duke Jackson
Shaun Frost Duke Jackson

Reputation: 1266

Assets are pulled across all HTML files from the layouts/application.html.erb

This document contains all the <head> & <body> attributes. You should see the below in there:

<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

This will keep all css shown in your assets in all the html files. Make sure you save files as index.html.erb

Here some reading to do:

http://guides.rubyonrails.org/asset_pipeline.html

Enjoy.

Upvotes: 0

Related Questions