CSS styling of flash message

ruby-on-rails css ruby stylesheet

16,942

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

16,942

Author by

Justin Meltzer

Updated on June 04, 2022

Comments

Justin Meltzer almost 2 years

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