I am new to Ruby on Rails and am following the Rails Tutorials by Michael Hartl.
According to the book, I had downloaded a set of CSS and placed it in /public/stylesheets/ folder. Also, I had placed a logo.png file in public/images folder. When I request a page from the browser, the logo is not displayed and instead, the Alt text is displayed. Also, I think the CSS is not linked too.
I seemed to have done exactly what the book said. Not sure what the problem is.
Rails 3.2.8, ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]
Here is the layout application.html.erb page:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
</head>
<body>
<div class="container">
<header>
<%= image_tag("logo.png", :alt=>"Sample App", :class => "round") %>
<nav class="round">
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
<section class="round">
<%= yield %>
</section>
</body>
</html>
Rails 3.X has stylesheets in app/assets/stylesheets, and images in app/assets/images.
The other advice is good too... use the latest version of the tutorial and check out rvm.
Why are you following older edition of the tutorial? There is slightly newer version on his site. You should definitely check it out.
Are you using Rails 3? If you are, the proper place to put your stylesheets is now in assets. You can find them in app/assets/ stylesheets.
Related
I have recently upgraded my app from Rails 4.2.6 to Rails 5.2.3.
I followed the procedure as on Rails Guides
Now, when I try to start my development server, it starts without any error.
But when I hit the URL in the browser an error comes up which says:
Sprockets::FileNotFound in UserSessions#new
Showing /home/pranjal/source/my-app/app/views/layouts/application.html.erb where line #5 raised:
couldn't find file 'selectize.source.css'
Checked in these paths:
/home/pranjal/source/my-app/app/assets/config
/home/pranjal/source/my-app/app/assets/font-awesome
/home/pranjal/source/my-app/app/assets/fonts
/home/pranjal/source/my-app/app/assets/images
/home/pranjal/source/my-app/app/assets/javascripts
/home/pranjal/source/my-app/app/assets/stylesheets
/home/pranjal/source/my-app/vendor/assets/javascripts
/home/pranjal/source/my-app/vendor/assets/stylesheets
...
Extracted source (around line #5):
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Looks like issue of incompatibility between js and new version of rails try to use/upgrade selectize-rails gem and remove js and css files from repo (if exists).
So I was wondering if there was a way to have a font awesome icon beside your title like this I want to use the fa fa-pencilicon. This is my code in my head:
<head>
<title><link type="fa fa-pencil" href="fa fa-pencil">Blogger</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
All what shows up in my title is:
<link type="fa fa-pencil" href="fa fa-pencil">Blogger
In my gem file, I have added gem "font-awesome-rails" and ran bundle install.
Am I doing anything wrong? Is there a way to add the pencil icon to the title? Thanks in advance!
I want to have a blue background on one page of my rails application and all other pages to have a white background. How can I do this? I tried doing
<%= javascript_include_tag params[:controller] %> or
<%= stylesheet_link_tag params[:controller] %>
By following this tutorial but I couldn't get it to work.
on way of doing this is rendering a different layout on that page
on your controller
def something
render :layout => 'new_layout'
end
you can also pass a yeald block to over right the css on that pge
in your layout file
<%= stylesheet_link_tag %>
<%= yield(:head) %>
on the view you want to update
<% content_for :head do %>
<style>
body {
background-color: #b0c4de;
}
</style>
<% end %>
You can add class to body according to controller
In Layout File,
<body class="<%= params[:controller]%>">
In CSS,
body.controller_name {background-color : blue;}
In my application layout I have this conditional which helps deciding what stylesheet to use based on existence of current_user:
<% if current_user %>
<%= stylesheet_link_tag 'application', media: 'all', id: "maincss" %>
<% else %>
<%= stylesheet_link_tag 'session', media: 'all', id: "maincss" %>
<% end %>
But how can I specify which stylesheet to use based on the url?
For example, I want to use a 'password_reset.css' file for this path
get '/set/:password_reset_token' => 'password_resets#edit'
Here is what I do in my projects:
In the layout file, add a yield method like this:
<html>
<head>
...
...
<%= yield(:head) %>
</head>
...
In any view page (.erb file) that needs a custom CSS, I would add something like this at the top of the page.
<% content_for :head do %>
<%= stylesheet_link_tag 'custom_css_filename', media: 'all' %>
<% end %>
This way stylesheet will go in the right place only for that page.
Note:
If you want to include a custom stylesheet for every single URL in your application, you should use what is suggested in the previous answer.
You can try using
<%= stylesheet_link_tag *([params[:controller], params[:action]] + (params[:id] || '').split('/')) %>
If you are okay with using password_resets.css instead of password_reset.css
Note: You may get a few unwanted link tags as well, which may result in harmless(except to logs) 404 responses
I am quite new to Ruby on Rails and wanted to place my custom CSS file into the Devise (Sign Up View). I placed my global CSS into the application.js (Asset Pipeline) and placed 2 Helper functions in my
helpers/application_helper.rb
def javascript(*files)
content_for(:head_javascript) { javascript_include_tag(*files) }
end
def stylesheet(*files)
content_for(:head_stylesheet) { stylesheet_link_tag(*files) }
end
and my views/layouts/application.html.erb
<!DOCTYPE html>
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
<html>
<head>
<title>Mysite</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= yield(:head_stylesheet) %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield(:head_javascript) %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= yield %>
</body>
</html>
Then I generated the Devise Views and adjusted my twitter bootstrap form
rails generate devise:views
And now want to place my signup.css inside the Signup View, but how?
So I created the Devise Controllers, to use my helper methods:
bash <(curl -s https://raw.github.com/foohey/cdc/master/cdc.sh)
Now I am stuck, because I my helpers don´t work with:
<%
if (controller.controller_name == "sessions") && (controller.action_name == "new")
javascript 'theme/signup'
stylesheet 'theme/signup'
end
%>
Is there an easy way in rails to handle custom css files? I am new to the asset pipeline concept and it is a bit confusing.
Thanks for help.
Have you heard about content_for? It is really useful for things like that. Inside you layout add:
<%= yield :head %>
inside your head tag. Then you can write the following inside the view (devise/sessions/new):
<% content_for :head do %>
javascript 'theme/signup'
stylesheet 'theme/signup'
<% end %>
This will perfectly separate your layout from single view concerns, and it should also fix the problem you're having.
You can place your custom css files in the css directory inside the public directory and inside the <head> tags of the view you want the custom css files to be you do this
<%= stylesheet_link_tag '/css/signup' %>
The signup.css will only be available to the signup view assuming that's where you place your stylesheet_link_tag
I think you want something like these:--
<% if (controller.controller_name == "sessions") && (controller.action_name == "new")%>
<%= stylesheet_link_tag "theme/signup"%>
<%= javascript_include_tag "theme/signup" %>
<% end %>