How can i change the color of an error message in stripes framework

Question

I am trying to change the color of error message. I am using a Stripes validation.If the validation failed, I am sending a error message. I wanted it in red color.But it shows in black color. How can i change the color of error message in Stripes framework.

Following is what i have tried.

        <div class="item">

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

Go through this [PDF](http://media.pragprog.com/titles/fdstr/errormessages.pdf). Might be useful. — Vinoth Krishnan, Mar 02 '16 at 08:00
it's the ui that decides how an error message is shown, not the validation — Stultuske, Mar 02 '16 at 08:02

score 1 · Answer 1 · answered Mar 02 '16 at 10:08

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

Here you can define exactly what your messages 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 (e.g. <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 icons (admitted, this goes a little further than OP asks for).

score 0 · Answer 2 · answered Mar 02 '16 at 09:40

Using selectors to specify error classes. This apply a global error style to input 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 Stripes Manual for more information.

How can i change the color of an error message in stripes framework

2 Answers2