devise 5: Как мне изменить Flash-сообщения от Devise, чтобы они соответствовали моему css для flash-сообщений?

Question

Я использую последнюю версию devise 5 в своем приложении Rails 5.1. У меня есть следующий код CSS для флэш-сообщений в моей таблице стилей.

div.alert.alert-danger, .alert-danger { background-color: #ff0000; }
div.alert.alert-info, .alert-info { background-color: #99d7ea; }
div.alert.alert-success, .alert-success { background-color: #a3da2f; }
div.alert.alert-warning , .alert-warning { background-color: #e6c856; }

Оригинальный код имел только первый класс. Работает просто отлично. Прочитав несколько старых ответов по этому поводу, я добавил второй, пытаясь изменить CSS для флеш-сообщений в разработке. Сообщения от devise отображаются с размером и цветом шрифта по умолчанию, но прозрачным фоном. Я хочу, чтобы они соответствовали тому, что я определил для моих флеш-сообщений. Те, которые я выпускаю, используют мой определенный CSS.

Где / как я могу переопределить CSS для флеш-сообщений, чтобы они соответствовали моим?

Answer 1

Я понял, что отчасти моя проблема заключалась в том, что мне нужно было знать, какие были типы вспышек. По этой ссылке я нашел только два: оповещение и уведомление.

https://github.com/rails/rails/blob/4-2-stable/actionpack/lib/action_controller/metal/flash.rb#L10

Ни один из них не используется в рельсах 5. Это опасность, информация, успех и предупреждение. Я решил сопоставить css по степени готовности, как опасности, и как успех. По этой ссылке я нашел 4-летний ответ, который все еще работает с текущей версией устройства.

Rails 3.1 Придумайте, как изменить CSS флеш-сообщения От уведомления к успеху?

Я добавил следующие два утверждения в мою таблицу стилей, и теперь все сообщения от Devise отображаются так же, как и другие мои флеш-сообщения.

.alert-alert { @extend .alert-warning; }
.alert-notice { @extend .alert-success; }

Answer 2

Вы, вероятно, действительно хотите изменить разметку, чтобы она соответствовала структуре вашего флеш-сообщения.

devise_error_messages! Метод определяет разметку для сообщений об ошибках устройства. Вы можете переопределить этот метод в вашем ApplicationHelper для размещения разметки вам нужно.

Answer 3

От: https://github.com/heartcombo/devise/blob/master/app/helpers/devise_helper.rb

Devise теперь использует партиал в разделе "devise/shared/error_messages" для отображения сообщений об ошибках по умолчанию и упрощения их настройки. Обновите свои представления, изменив звонки с:

<%= devise_error_messages! %>

кому:

<%= render "devise/shared/error_messages", resource: resource %>

Чтобы начать настраивать способ отображения ошибок, вы можете скопировать партиал из devise в свой app/viewsпапка. В качестве альтернативы вы можете запуститьrails g devise:views который скопирует их все снова в ваше приложение.

Как редактировать CSS: https://github.com/heartcombo/devise/wiki/How-To:-Integrate-I18n-Flash-Messages-with-Devise-and-Bootstrap#css-for-flash-messages (Rails 4 и разработка 3)