Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialBrandon Keene
7,217 PointsHere is the CSS Jason pastes into application.css so you don't have to type it from the video.
To save your eyes from having to squint through reproducing the nearly 40 lines of the CSS that Jason pastes in around 6:46, here is that code, extracted from the downloadable project files a few videos afterward.
.clear { clear: both; }
div.nav {
border-bottom: 1px solid #aaa;
margin-bottom: 20px;
padding: 10px 0 0 5px;
}
div.nav h1 {
float: left;
margin: 0 1em 0 0;
}
div.nav a { text-decoration: none !important; }
div.nav ul {
float: left;
list-style: none;
clear: right;
margin: 0 0 0 1em;
padding: 0;
}
div.nav ul li {
float: left;
}
div.nav ul li a {
display: block;
width: auto;
padding: 8px 10px 8px 10px;
background: #eee;
color: #aaa;
}
div.nav ul li a:hover {
background: #aaa;
color: #eee;
}
Sage Elliott
30,003 PointsVery much appreciated! Much better than having to download the whole file!
Brandon Keene
7,217 PointsGabriele Rossi & Sage Elliott Happy to help!
Ron Chan
10,987 PointsJust what I was looking for. Thanks Brandon!
hshan
8,008 Pointscheese and crackers! unreal frustration. thanks!
Matt Young
6,348 PointsThanks! Saved me pulling my hair out!
Chris Buczkowski
3,939 Pointsthanks Steve! unfortunately I did already have root 'todo_lists#index' appearing in the routes.rb file, so that wasn't it. I took a look at the other thread, which looks like a slightly different issue (that, if I recall correctly I also encountered, and was able to fix thanks to that thread, so thanks for that!). that was an error where it wasn't finding the CSS element. here, it's finding what appears to be a second h1 element, and doesn't seem to know which to use, so it throws the 'ambiguous element' error.
I'll try posting this as its own question, since it's technically outside the scope of this thread. appreciate you taking a look!
Kosuke Kondo
1,235 PointsThank you! That's I wanted to get.
Michael Immordino
Courses Plus Student 6,749 PointsThe entire css code should have been added as a teacher note to that video, especially since he copy/pasted it himself.
Javier Mera
16,472 Pointsthank you sire!
4 Answers
Steve Hunter
57,712 PointsGreat work - thank you!!
Once I figure out why root-path
is causing errors, I'll be needing the CSS!
Cheers,
Steve.
Steve Hunter
57,712 PointsFixed my code and pasted the css and all works great!
Thanks again!!
Steve.
Chris Buczkowski
3,939 Pointshey Steve, I'm having the same issue. I'm getting:
Failures:
1) Viewing todo items displays the title of the todo list
Failure/Error: within("h1") do
Capybara::Ambiguous:
Ambiguous match, found 2 elements matching css "h1"
# ./spec/features/todo_items/index_spec.rb:9:in `block (2 levels) in <top (required)>'
and was able to comment stuff out until I narrowed it down to this line in my application.html.erb file:
<h1><%= link_to "Odot", root_path %></h1>
I looked in todo_lists_routing_spec.rb and through several other files, but I'm not sure where I need to look. I'd be grateful if you could share how you fixed this error. :)
Steve Hunter
57,712 PointsHi Chris,
Have you tried adding root 'todo_lists#index'
in your routes.rb file (in the config folder)?
Worked for me but I didn't see it in the video.
I have a thread about it somewhere; I'll try to find a link for you.
Steve.
Steve Hunter
57,712 PointsThis was that post but I'm pretty sure I fixed it without using the amended code.
Anna K
17,115 PointsThank you!
janeporter
Courses Plus Student 23,471 Pointsthank you, however, the custom css isn't working for me...at all. Would it have anything to do with the fact that I have Rails 4.2.5?
here is my application_html.erb file
<!DOCTYPE html>
<html>
<head>
<title>Odot</title>
<%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="nav">
<h1><%= link_to "Odot", root_path %></h1>
<ul>
<li><%= link_to "Todo Lists", todo_lists_path %></li>
</ul>
<br class="clear" />
</div>
<% flash.each do |type, message| %>
<div class="alert flash <%= type %>">
<%= message %>
</div>
<% end %>
<%= yield %>
</body>
</html>
had to change 'application' to 'default' in this file to resolve another issue I was having.
and here is my application.css file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
div.alert {
border: 2px solid #aaa;
padding: 10px;
}
div.flash.success { border: 2px solid #00ff00; color: #00ff00; }
div.flash.error { border: 2px solid #ff0000; color: #ff0000; }
div.flash.notice { border: 2px solid #0000ff; color: #0000ff; }
.clear { clear: both; }
div.nav {
border-bottom: 1px solid #aaa;
margin-bottom: 20px;
padding: 10px 0 0 5px;
}
div.nav h1 {
float: left;
margin: 0 1em 0 0;
}
div.nav a { text-decoration: none !important; }
div.nav ul {
float: left;
list-style: none;
clear: right;
margin: 0 0 0 1em;
padding: 0;
}
div.nav ul li {
float: left;
}
div.nav ul li a {
display: block;
width: auto;
padding: 8px 10px 8px 10px;
background: #eee;
color: #aaa;
}
div.nav ul li a:hover {
background: #aaa;
color: #eee;
}
Ryan Harper
2,926 PointsMany, many thanks. It's rather obscene this is all included in the video but not in Teacher's Notes.
Gabriele Rossi
5,887 PointsGabriele Rossi
5,887 PointsThank you Brandon :) appreciated.