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

Justin Geronimo
Justin Geronimo
3,531 Points
Posted by Justin Geronimo
Justin Geronimo
3,531 Points

ODOT web page does not look like Treehouse version

I'm having trouble making my final version of ODOT look like the Treehouse version. In my image of my version, you see Todo Lists on the very top next to Odot not highlighted and with a bullet point, as opposed to the Treehouse version which is highlighted grey with no bullet point. I copied the application.css and the application.html.erb from the project files in the final video of the Build a Todo List Application with Rails 4 series, and it still does not look like how it is supposed to. Can someone please tell me how to fix it. I linked my Odot repository below and the images as well.

http://imgur.com/EfsDgsl

http://imgur.com/EOA1Xg6

https://github.com/jmgeronimo/ODOT

2 Answers

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

OK, got your bug. It's actually a funny little one that's easy to miss :). Look at your app/views/layouts/application.html.erb file, line 13:

        <u1>

This tag should be ul, not u1, although they look similar and this was probably caused by h1 just above it. Change that and you are ready to go :)

Justin Geronimo
Justin Geronimo
3,531 Points
Justin Geronimo
Justin Geronimo
3,531 Points

Oh wow, I can't believe I missed that. If only tags were written in capital letters I wouldn't of thought my "1" was an "l" =D. That worked perfectly, thank you so much!.

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

Try removing the scaffolds.css.scss file. It probably overrides some of the styles. I remember that my site did not look the same even when I did everything the same way. But you should not worry about the way the app looks right now. This is not the final version of the site. Later on you will add professional looking styles using Zurb Foundation. Odot series has a total of 8 courses and the final app will look something like this if you're patient: https://vast-sierra-1767.herokuapp.com/ (it's my working demo with two slight changes). This is the full series of courses that lead you to this look and behavior of the page, in proper order:

http://teamtreehouse.com/library/build-a-todo-list-application-with-rails-4

http://teamtreehouse.com/library/user-authentication-with-rails

http://teamtreehouse.com/library/rails-layouts-and-css-frameworks

http://teamtreehouse.com/library/the-rails-asset-pipeline-and-styling

http://teamtreehouse.com/library/rails-partials-and-helpers

http://teamtreehouse.com/library/ruby-on-rails-forms

http://teamtreehouse.com/library/blank-slates-in-ruby-on-rails

http://teamtreehouse.com/library/polishing-ruby-on-rails

Justin Geronimo
Justin Geronimo
3,531 Points
Justin Geronimo
Justin Geronimo
3,531 Points

Maciej,

I removed the scaffolds.css.scss file as you suggested, and it still did not change it.

http://imgur.com/Xq6OvkL

I do understand what you are saying that this is not the final version (and that final version you posted looks amazing), but I still really want to understand what causes this problem and how to resolve it.

Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points
Maciej Czuchnowski
Maciej Czuchnowski
36,441 Points

OK, I'll see what can be done. It's hard for me to give you advice blindly ;). In general: some styles are overriding the styles you want to have. The styles you want come before the styles that are applied. This is how CASCADING style sheets work, hence the name.