ruby-on-rails - 设计 5 : How do I modify the Flash messages from Devise to match my css for flash messages?

标签 ruby-on-rails css devise ruby-on-rails-5 flash-message

我在我的 Rails 5.1 应用程序中运行最新版本的 devise 5。我的样式表中有以下 Flash 消息的 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; }

原始代码只有第一类。它工作得很好。在阅读了一些关于此的旧答案后,我添加了第二个尝试更改设计中的 flash 消息的 css。来自 devise 的消息以我的默认字体大小和颜色显示,但背景是透明的。我希望它们与我为我的即显消息定义的内容相匹配。我发布的那些使用我定义的 CSS。

我在哪里/如何覆盖 flash 消息的设计 CSS 以匹配我的?

最佳答案

我意识到我的部分问题是我需要知道什么是设计闪存类型。从这个链接我只找到两个:警报和通知。

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

rails 5 中都没有使用它们。它们是 danger、info、success 和 warning。我决定将 css 匹配为危险警报和成功通知。从这个链接中,我找到了一个 4 年前的答案,它仍然适用于当前版本的设计。

Rails 3.1 Devise How To Change Flash Message CSS From notice to success?

我在我的样式表中添加了以下两个语句,现在所有来自 Devise 的消息都像我的其他 flash 消息一样显示。

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

关于ruby-on-rails - 设计 5 : How do I modify the Flash messages from Devise to match my css for flash messages?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47724142/

相关文章:

ruby - Devise & CanCan——CanCan 2.0 API 的问题

ruby-on-rails-3 - 在设计中确认后如何重定向页面

ruby-on-rails - 为什么我的mongo rails应用程序中的Elasticsearch索引没有更新?

ruby-on-rails - 在 Heroku 上为 Rails 4.2 应用程序正确配置 Postgres 数据库

ruby-on-rails - Rake 正在中止,因为未定义的方法 `inet'

ruby-on-rails - Postgresql 表值与 Ruby on Rails Active Record 查询结果不匹配

html - 无法弄清楚为什么我的 Logo 字体不起作用

javascript - 如何找到具有最大 z-Index 的元素?

css - iPhone 4、iPhone 4s 和 iPhone 5 的媒体查询

ruby-on-rails - 用户 has_many 关联不起作用(错误 :Could not find the association :user_categories in model Category)