CODEWITHSUNDEEP
cssruby-on-railsruby
newtoCS
newtoCS

Reputation: 113

Ruby on rails: Change flash message colour without Twitter Bootstrap

I would like to ask if there is any way to change the appearance of flash messages without using Twitter Bootstrap?

Here's my views: .index.html.erb

<form class="login-form" action="/login" id="login-form" method="post" >
  <h2 class="login-title">Sign In</h2>
  <% flash.each do |name, msg| -%>
    <%= content_tag :div, msg, class: name %>
  <% end -%>

And my controller as follows:

  def create
    @user = User.find_by_email(params[:email])
    # If the user exists AND the password entered is correct.
    if @user && @user.authenticate(params[:password])
    # login code comes here
    else
      flash.now[:error] = 'Invalid email/password combination'
      render 'new'
    end
  end

How do I style my error flash message without using Twitter Bootstrap?

Thank you in advance!

Upvotes: 1

Views: 1590

Answers (1)

Zoran
Zoran

Reputation: 4226

You can simply assign a css class to the flash message, and style it appropriately:

<% flash.each do |name, msg| %>
  <div class="custom-alert">
    <%= msg %>
  </div>
<% end %>

And in your appropriate stylesheet:

.custom-alert {
  background-color: #d96459;
}

If you want to assign various custom alert classes based off of the flash name, you can define a helper to conditionally output a class name and embed that into the class name in the markup:

module ApplicationHelper
  def alert_class(flash_name)
    if flash_name == "success"
      return "success-class"
    elsif flash_name == "error"
      return "error-class"
    else
      return nil
    end
  end
end

# And then in your markup:

<% flash.each do |name, msg| %>
  <div class=<%= name %>>
    <%= msg %>
  </div>
<% end %>

Hope this helps!

Upvotes: 1

Related Questions