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 Adding Validations to Todo Items

Anthony Cintorino
Anthony Cintorino
2,602 Points
Posted by Anthony Cintorino
Anthony Cintorino
2,602 Points

Changing colors in CSS not working

I cannot get the success, error and notice messages to change colors. They get the border and turn gray but i can't get the colors to work.

div.alert { border: 2px solid #aaa; padding: 10px; }

div.flash.success { border: 2px solid green; color: green; } div.flash.error { border: 2px solid red; color: red; } div.flash.notice { border: 2px solid blue; color: blue; }

3 Answers

Andrew Stelmach
Andrew Stelmach
12,583 Points
Andrew Stelmach
Andrew Stelmach
12,583 Points

Change color to background-color. color is for the text.

Anthony Cintorino
Anthony Cintorino
2,602 Points
Anthony Cintorino
Anthony Cintorino
2,602 Points

That still won't work.

The div.alert is working as intended but no matter what I do the three flash divs do not change anything...

'div.flash.success { border: 2px solid green; color: green; } div.flash.error { border: 2px solid red; color: red; } div.flash.notice { border: 2px solid blue; color: blue; }

I went back and I can't find any errors in the HTML files either.

Andrew Schrenk
Andrew Schrenk
11,557 Points
Andrew Schrenk
Andrew Schrenk
11,557 Points

Anthony, I solved this problem by going to the application.css file. On my line 12, which looks like this:

    <div class="alert flash <%= type %>">

I forgot the "=" before the word "type". It should look like the line above. Hope this works for you.

Brian Patterson
Brian Patterson
19,588 Points
Brian Patterson
Brian Patterson
19,588 Points

Where is that? Can't find that anywhere.

jjwongjan
jjwongjan
13,998 Points

This piece of code is in the application.html.erb file under views>layouts, not the application.css file.

Brian Patterson
Brian Patterson
19,588 Points
Brian Patterson
Brian Patterson
19,588 Points

This does not work for me. What is the answer. This is my code.

/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */


 div.alert {
border: 2px solid #aaa;
padding: 10px;

 }

div.flash.success { border: 2px solid green; color: green; } 
div.flash.error { border: 2px solid red; color: red; } 
div.flash.notice { border: 2px solid blue; color: blue; }