# CSS for flash messages

**URL:** <https://www.ruby-forum.com/t/css-for-flash-messages/59271>\
**Category:** Rails\
**Created:** [May 3, 2006, 1:05am UTC](https://www.ruby-forum.com/t/css-for-flash-messages/59271 "2006-05-03T01:05:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mfeadler](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f6c823/32.png) [@mfeadler](https://www.ruby-forum.com/u/mfeadler)\
**Post date:** [May 3, 2006, 1:05am UTC](https://www.ruby-forum.com/t/css-for-flash-messages/59271/1 "2006-05-03T01:05:53Z")

</div>

Hello all,

I’m perplexed by the following:

I’ve implemented flash messages in my application.rhtml with:

\<% for name in [:notice, :warning, :message] %\>  
\<% if flash[name] %\>  
\<%= “\<p id=”#{name}" class=“flash”\>#{flash[name]}

" %\>  
\<% end %\>  
\<% end %\>

I’ve implemented CSS in application.rhtml with:

\<%= stylesheet\_link\_tag “avcnotes” %\>

Now, each of these things works–my flash messages appear when they  
should, and my styles are applied to all the pertinent elements…EXCEPT  
flash messages. In avcnotes.css I have (among other things):

.notice {  
color:yellow  
}  
.warning {  
color:red  
}  
.message {  
color:yellow  
}  
#flash {  
border:1px solid black;  
width:100%;  
text-align:center  
}

No matter what I’ve tried, these styles are not applied to my flash  
messages. Is there a step/trick/hack I’m missing here?

Thanks in advance,

-ELf

---

<div class="post-metadata">

**Author:** ![mfeadler](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f6c823/32.png) [@mfeadler](https://www.ruby-forum.com/u/mfeadler)\
**Post date:** [May 3, 2006, 12:08pm UTC](https://www.ruby-forum.com/t/css-for-flash-messages/59271/2 "2006-05-03T12:08:00Z")

</div>

Matthew F. wrote:

> Hello all,

> Now, each of these things works–my flash messages appear when they  
> should, and my styles are applied to all the pertinent elements…EXCEPT  
> flash messages. In avcnotes.css I have (among other things):
> 
> .notice {  
> color:yellow  
> }  
> .warning {  
> color:red  
> }  
> .message {  
> color:yellow  
> }  
> #flash {  
> border:1px solid black;  
> width:100%;  
> text-align:center  
> }
> 
> No matter what I’ve tried, these styles are not applied to my flash  
> messages. Is there a step/trick/hack I’m missing here?

You’ve got your signifiers switched. # is the code for “id” and . is  
the code for “class”.

#notice

#warning

#message

and

.flash

Jeff C.man

---

<div class="post-metadata">

**Author:** ![mfeadler](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f6c823/32.png) [@mfeadler](https://www.ruby-forum.com/u/mfeadler)\
**Post date:** [May 3, 2006, 7:05pm UTC](https://www.ruby-forum.com/t/css-for-flash-messages/59271/3 "2006-05-03T19:05:22Z")

</div>

you’ve got your id’s and classes backwards…

---

<div class="post-metadata">

**Author:** ![mfeadler](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/f6c823/32.png) [@mfeadler](https://www.ruby-forum.com/u/mfeadler)\
**Post date:** [May 3, 2006, 9:43pm UTC](https://www.ruby-forum.com/t/css-for-flash-messages/59271/4 "2006-05-03T21:43:53Z")

</div>

Jeff C.man wrote:

> You’ve got your signifiers switched. # is the code for “id” and . is  
> the code for “class”.

Well, don’t I feel silly.

Many thanks, gentlemen!

-ELf