CSS styling of flash message

问题

What should I use to style my flash messages in my CSS? I can't seem to change it's styling. Here's the relevant code within the <body> of my application layout:

    <div class="container">
      <%= render 'layouts/header' %>
      <section class="round">
        <div id= "notice">
          <% flash.each do |key, value| %>
            <div class="flash <%= key %>">
              <%= value %>
            </div>
          <% end %>
        </div>
        <%= yield %>
      </section>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>

The relevant original CSS was something like this but it doesn't currently work.

.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}

回答1:

Either add a rule for parent div with id notice:

#notice {
  css_formatting_here
}

Or add a rule for child divs:

.flash {
  css_formatting_here
}

The child div of errors container has multiple classes separated by whitespace. flash is one of them. Thus you can add a CSS rule for that class, and it will work.

Look here for more such examples: Hidden features of CSS

回答2:

Looks like the CSS calls for a class .notice, but the div has an ID instead.

EDIT

The CSS is not responding to the flash or <%= key %> classes, but it is responding to the notice id. Unfortunately, if I style with the notice id, some styling appears that should be dependent on whether there is a flash message or not. How can I fix this

You could add a conditional test around the div:

<% unless flash.empty? %>
  <div id="notice">
    <% flash.each do |key, value| %>
      <div class="flash <%= key %>">
        <%= value %>
      </div>
    <% end %>
  </div>
<% end %>

回答3:

In your css file type:

.alert-success {
    dosomestyling;
}

.alert-danger {
    dosomestyling;
}

来源：https://stackoverflow.com/questions/5190090/css-styling-of-flash-message

标签

ruby-on-rails

css

ruby

stylesheet