Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

Thank you Brandon :) appreciated.

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

Just what I was looking for. Thanks Brandon!

cheese and crackers! unreal frustration. thanks!

Matt Young
Matt Young
6,348 Points

Thanks! Saved me pulling my hair out!

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

Thank you! That's I wanted to get.

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

4 Answers

Great work - thank you!!

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

Cheers,

Steve.

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

Thanks again!!

Steve.

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. :)

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.

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

Anna K
Anna K
17,115 Points

Thank you!

janeporter
PLUS
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

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