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 trial

Ruby Build a Todo List Application with Rails 4 Build a Todo List Application with Rails 4 Writing Test Helpers

Brandon Keene
Brandon Keene
7,217 Points
Posted by Brandon Keene
Brandon Keene
7,217 Points

Here 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;
}
Gabriele Rossi
Gabriele Rossi
5,887 Points
Gabriele Rossi
Gabriele Rossi
5,887 Points

Thank you Brandon :) appreciated.

Sage Elliott
Sage Elliott
30,003 Points
Sage Elliott
Sage Elliott
30,003 Points

Very much appreciated! Much better than having to download the whole file!

Ron Chan
Ron Chan
10,987 Points
Ron Chan
Ron Chan
10,987 Points

Just what I was looking for. Thanks Brandon!

hshan
hshan
8,008 Points

cheese and crackers! unreal frustration. thanks!

Matt Young
Matt Young
6,348 Points
Matt Young
Matt Young
6,348 Points

Thanks! Saved me pulling my hair out!

Chris Buczkowski
Chris Buczkowski
3,939 Points
Chris Buczkowski
Chris Buczkowski
3,939 Points

thanks 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
Kosuke Kondo
1,235 Points
Kosuke Kondo
Kosuke Kondo
1,235 Points

Thank you! That's I wanted to get.

Michael Immordino
Michael Immordino
Courses Plus Student 6,749 Points

The entire css code should have been added as a teacher note to that video, especially since he copy/pasted it himself.

4 Answers

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

Great work - thank you!!

Once I figure out why root-path is causing errors, I'll be needing the CSS!

Cheers,

Steve.

Steve Hunter
Steve Hunter
57,712 Points

Fixed my code and pasted the css and all works great!

Thanks again!!

Steve.

Chris Buczkowski
Chris Buczkowski
3,939 Points
Chris Buczkowski
Chris Buczkowski
3,939 Points

hey 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
Steve Hunter
57,712 Points

Hi 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
Steve Hunter
57,712 Points

This was that post but I'm pretty sure I fixed it without using the amended code.

Anna K
Anna K
17,115 Points
Anna K
Anna K
17,115 Points

Thank you!

janeporter
PLUS
janeporter
Courses Plus Student 23,471 Points
janeporter
janeporter
Courses Plus Student 23,471 Points

thank 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
Ryan Harper
2,926 Points
Ryan Harper
Ryan Harper
2,926 Points

Many, many thanks. It's rather obscene this is all included in the video but not in Teacher's Notes.