I'm new to rails and working my way into the tutorial here: http://ruby.railstutorial.org/ruby-on-rails-tutorial-book
I've added the blueprint css package to the public/stylesheets directory and added a custom.css file however I cannot seem to get the stylesheet to load. From my understanding fo the setup the page should have a blue background and some other small changes.
In my app/views/layouts/application.html.erb file I've added the following line:
<%= stylesheet_link_tag 'stylesheets/custom', :media => 'screen' %>
Which I believe should cause the css from the /public/custom.css to load.
In the tutorial the content of the custom.css file is located in section 5.1.2 (sorry I'm only able to post 2 hyperlinks here) . And the content of the app/views/layouts/application.html.erb file is here:
http://ruby.railstutorial.org/chapters/filling-in-the-layout#sec:adding_to_the_layout
When I view source on the page there is a link to the custom.css file here:
But clicking that brings up a "Routing Error - No route matches "/stylesheets/stylesheets/custom.css"" message.
As far as I can find I've followed the tutorial exactly so I'm not sure what is wrong or what I've missed. Any help on where to go from here would be appreciated.
complete text of the application.html.erb file:
<!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>
</div>
</body>
</html>
This still has the same error when clicking the custom.css link in source as before:
"Routing Error - No route matches "/stylesheets/stylesheets/custom.css""
is this happening on localhost or production environment? If it's production then open config/production.rb and change:
config.serve_static_assets = false
to
config.serve_static_assets = true
If this is happening in development environment then I'm wondering if you possibly have more than 1 layout file. Check to make sure you don't have application.html.erb and application.html.haml. It's also possible that you have a separate layout for your posts, which would be titled post.html.haml or something...
ALSO
you state the following:
Which I believe should cause the css from the /public/custom.css to load.
If your custom.css file is located in public/custom.css then it is in the wrong place, it should be in public/stylesheets/custom.css
EDIT:
below is a screenshot of your app as it appears on my machine, it looks like it works ok after moving stylesheet into the right folder. I also took the liberty of deleting public/index.html, but you can leave it in for now until the tutorial advises you to take it out

Change it to stylesheet_link_tag 'custom', :media => 'screen'. It will automatically look in the /public/stylesheets/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With