Rails - Error CSS styles - css

Question

New to rails, and am experimenting with changing default layouts.
It seems that the .field_with_errors class is always being added to my forms, when a field causes a validation error. The default scaffold CSS defined field_with_errors as:
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
My question is: Why even use this .field_with_errors? Where is it even coming from? Same with a div with ID of notice to print success messages. Where is this coming from?... From my research both of these coming somewhere from ActionView::Helpers.
But what if I wanted to use my own custom styles for these? Do I have to write my own .fields_with_errors and notice classes in my application.css.scss file? I tried this and it works... But why do I have to jail myself to those class names? What if I wanted to call them something else? Can I do this?
Secondly, let's say I have my own custom CSS classes now (assuming it's possible -- which I hope it is)... What if I wanted to apply a bootstrap style to them? For example, bootstrap would use <div class="alert alert-success"> where Rails' scaffold would default to using <div id="#notice">... How can I make such changes in the most elegant way without simply making my own style with the same CSS code as Twitter's alert alert-success.... Isn't there a way in SASS (or through Rails somehow) to say, Success messages are printed with XYZ style and error fields are printed with ABC style... Like maybe in some config file?
Thanks!

Answer 1

Can I do this? yes.
The extra code is being added by ActionView::Base.field_error_proc. If you want to call something else and you're not using field_with_errors to style your form, You should override it in config/application.rb
config.action_view.field_error_proc = Proc.new { |html_tag, instance|
"<div class='your class'>#{html_tag}</div>".html_safe
}
Restart your server
Secondly, If you want to apply a bootstrap style to them, You can save your selection style on application_helper.rb
module ApplicationHelper
def flash_class(level)
case level
when :notice then "alert alert-info"
when :success then "alert alert-success"
when :error then "alert alert-error"
when :alert then "alert alert-error"
end
end
end
create file layouts/_flash_message.html.erb and paste this :
<div>
<% flash.each do |key, value| %>
<div class="<%= flash_class(key) %> fade in">
×
<%= value %>
</div>
<% end %>
</div>
and to call the flash you just render in view
<%= render 'layouts/flash_messages' %>
Example
On accounts_controller.rb create action
def create
#account = Account.new(params[:account])
if #account.save
# using :success if #account.save
flash[:success] = "Success."
redirect_to accounts_url
else
flash[:alert] = "Failed."
render :new
end
end
Put on top of accounts/index.html.erb and on top of form in accounts/_form.html.erb
<%= render 'layouts/flash_messages' %>
Result on index :
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
Success.
</div>
Result on form :
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
Failed.
</div>

Answer 2

#anonymousxxx answer seems to be correct in my opinion.
I would recommend you to use the twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails) for your css. check out the readme on github, this gem is really convenient.