css - 使用 CSS 设计自定义

Question

我已经在我的 Rails 应用程序中实现了设计。当呈现 Flash 消息/Flash 通知时，它仅作为文本 I.E. 出现在页面上。您的 session 已过期，请重新登录以继续。

这出现在页面顶部上方的页面顶部。

我想做的是用一些 CSS 自定义它，添加边框，更改文本样式等，理想情况下，我希望通知在顶 Angular 用 x 关闭，而不是刷新页面通知消失。

有没有人做过这个或者可以指出正确的方向

感谢所有帮助

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

其他 Flash 类是:.success、.alert、.error。可能还有一些我忘记了。但这应该有希望让你朝着正确的方向前进。

不要忘记添加:

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

到您的页眉或 application.html.erb。