Настройка дизайна с помощью CSS

Question

Я внедрил приложение в свое приложение для рельсов. Когда отображается сообщение флэш-сообщения/Flash, оно отображается на странице только как текст I.E. Срок действия вашей сессии истек, чтобы продолжить.

Это изображение в верхней части моей страницы в верхней части страницы.

Что бы я хотел сделать, это настроить его с помощью CSS, добавить границу, изменить стиль текста и т. Д., В идеале я хотел бы, чтобы уведомление было закрыто топором в верхнем углу, а не обновляло страницу для уведомления исчезнуть.

Кто это сделал или может возможно указать меня в правильном направлении

Все оцененная помощь

Answer 1

Добавить это, или что-то похожее на файл CSS:

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

Другие классы со вспышкой : .success, .alert, .error. Может быть, еще я забыл. Но это, надеюсь, поможет вам в правильном направлении.

Не забудьте добавить:

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

К вашему заголовку или application.html.erb.