Question

I have implemented devise into my rails app. When a flash message/Flash notice is rendered it appears on the page as just text I.E. Your session expired, please sign in again to continue.

This appears at the top of my page over the top of the page.

What i would like to do is customise this with some CSS, add border, change the style of text etc, ideally i would like the notice to be closed with a x in the top corner rather than refreshing the page for the notice to disappear.

Has anyone done this or can possibly point me in the right direction

All help appreciated

Answer 1

Add this, or something similar to your CSS file:

.flash {
  text-align: center;
  width: 100%;
  padding: 10px 0 10px 0;
  margin-top: 1em;
  color: #333333;
  border: 1px solid black; 
}

/*
 Flash message styles
*/
.notice {
  background: #fefad9; 
}

Other flash classes are: .success, .alert, .error. Might be some more that I forgotten. But that should hopefully get you in the right direction.

Don’t forget to add:

<% flash.each do |key, value| %>
  <%= content_tag(:div, value, :class => "flash #{key}") %>
<% end %> 

To your header or application.html.erb.