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

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

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

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.

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

Where is that? Can't find that anywhere.

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

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; }