5

To be clear, I know how to edit the error messages in config/locales/devise.en.yml but I'm referring to styling these type of error messages:

2 errors prohibited this user from being saved:
  • Email can't be blank
  • Password can't be blank

--

All i see is <%= devise_error_messages! %> on the sign-up page, but I don't know how to actually edit the error messages themselves.

In my case the messages appear on the left, and my sign up is centred (which looks odd), I also don't like the red color of the messages and would prefer a different color.

So my question is, how can I style the error message? centre it, and change the color.

Not sure which other controllers or contents to include so as soon as you ask, i'll update the OP with them if need be.

1 Answers1

8

See the sources for the devise_error_messages! method at https://github.com/plataformatec/devise/blob/master/app/helpers/devise_helper.rb.

All the errors are inside 

<div id="error_explanation">

so you can use that fact in your CSS. Inside it uses only basic styling: h2 for the header message, ul for the individual errors. See this SO example for #errorExplanation styling, for example: how to beautify validations in rails. Just don't forget to replace #errorExplanation with #error_explanation in the example.

But your best approach would probably still be to rewrite this method or write and use your own, and there apply all the styling you like.

I'd personally recommend displaying errors next to the fields they belong to. See this SO thread, for example, on how to do that: Rails: Errors close to particular fields in forms.

Another improvement would be switching to simple_form for your forms (and getting errors-next-to-fields for free). See, for example, an excellent Railscast on that: http://railscasts.com/episodes/234-simple-form. There's a more recent revised Railscast, but not sure if you're a Pro subscriber there.

Community
  • 1
  • 1
moonfly
  • 1,810
  • 11
  • 14
  • thanks for your response @moonfly, just gave it a go and it seems like that post may be referring to an older version of Devise. I've duplicated the above method with little success. My devise error messages are in <%= devise_error_messages! %> but we can't find the contents of that file. –  Feb 28 '13 at 01:27
  • I updated my answer above: #errorExplanation should be replaced with #error_explanation in the example. – moonfly Feb 28 '13 at 01:37
  • Thanks! that helped, here's a screen shot: http://i.imgur.com/1r4hQMM.png - Its almost there just need to move the password boxes over, and make them gray as well. Is there a separate code for that? –  Feb 28 '13 at 02:24
  • just saw your updated post, those seem like very use-ful sources! In this particular case, with your help we are now 95% there. The last thing would be to move the password field into the centre and change the color from red to white. Any ideas? i've attached a screenshot in the comment above this! –  Feb 28 '13 at 02:43
  • oh, I see. I believe you having problems with the fields styled with "field_with_errors" class. Check this answer in another thread: http://stackoverflow.com/questions/5267998/rails-3-field-with-errors-wrapper-changes-the-page-appearance-how-to-avoid-t/10921200#10921200. You'll need to drop the styles for that class in your CSS. But, first, may be it's easier to edit your views. How does your view look like? Is is a devise view? If so you can explicitly generate and then edit it with 'rails g devise:views ' – moonfly Feb 28 '13 at 02:58