How to change color of error message in stripes

Question

I am trying to change the color of an error message. I use Stripes check. If the verification fails, I send an error message. I wanted it in red. But it appears in black. How can I change the color of the error message in the Stripes structure.

Here is what I have tried.

<div class="item"> <stripes:errors /> <stripes:form name="home"action="/home.action"> //contents </stripes:form> </div> 

Answer 1

As Vinoth says, you can use CSS classes to change the appearance of error messages. In addition to this, Stripes posts can be fully customized by editing StripesResources.properties .

Here you can determine exactly what your posts will look like using markup and CSS classes, or even inline styles.

 # Resource strings used by the <stripes:errors> tag when there are no nested tags stripes.errors.header=<div class="my-error-wrapper"><h4>Ooops... some things went awfully awry:/h4><ol> stripes.errors.beforeError=<li><i class="fa fa-warning"></i>&nbsp; stripes.errors.afterError=</li> stripes.errors.footer=</ol></div> # Resource strings used by the <stripes:errors> tag when displaying errors for a # specific field (eg <stripes:errors field="password"/>). If not supplied the # values above will be used instead. stripes.fieldErrors.header= stripes.fieldErrors.beforeError=<span class="my-error-inline"><i class="fa fa-warning"></i>&nbsp; stripes.fieldErrors.afterError=</span> stripes.fieldErrors.footer= # Resource strings used by the stripes:messages tag stripes.messages.header=<div class="my-message-wrapper"><ul> stripes.messages.beforeMessage=<li> stripes.messages.afterMessage=</li> stripes.messages.footer=</ul></div> 

As you can see, you can add extra fancy stuff like FontAwesome badges (admittedly this goes a little further than the OP asks for).

Answer 2

Using selectors to indicate error classes. This will apply the global error style for entering fields,

 input.error, textarea.error { color: red; background-color: yellow; } input.error[type="radio"], input.error[type="checkbox"], select.error { background-color: white; border: 2px solid red; } 

Read the Layout Guide for more information.