Change the style (CSS)

In MX Kollection 3, error messages that result from validations and processing, for both development and production debugging mode, as well as client-side and server-side display differently, based on the skin you have selected for the site. Error messages viewed on a site with the Aqua skin will differ from those on a site with the Kollection skin, or even from those with a custom skin.

Error messages' components use the skin CSS files to define the colors, fonts and other attributes. In order to make the error messages for your particular application match the entire site appearance, you can simply edit the CSS file containing the error message definition classes. These classes can be found in the CSS files of the current skin's, in the tng.css file (e.g. in the includes/skins/aqua/ folder). The following examples are taken from the aqua skin.

There are two portions of CSS code that relate to error messages styles:

1. The client-side related error display properties. These take effect when client-side validation, or evaluation fails, and an error message must be displayed. The various classes control colors, borders and fonts, and each of them is commented:
   
   /* The client-side error displaying */
   /* How the label should change on error */
   .form_validation_field_error_label {
   /* color:#cc0000; */
   }
   /* How the input's container (TD) should change on error */
   .form_validation_field_error_container {
   /* border: 2px solid black; */
   }
   /* How the input textfield should change on error */
   .form_validation_field_error_text {
   /* border:2px solid #cc0000; */
   }
   /* The actial error message style */
   .form_validation_field_error_error_message {
   color:#cc0000;
   font-weight: bold;
   clear:left;
   }
   form.form_validation_form_error table {
   border: 2px solid red;
   }
    

2.  The server-side error display properties. Whenever an error occurs in the code that is executed on the server, these classes control the appearance:
   
   /* The server-side error displaying */
   /* topmost error div */
   #KT_tngerror {
   padding: 10px 10px10px 80px;
   margin:5px;
   font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
   font-weight:bold;
   font-size: 12px;
   color: #555555;
   background-color:#f2f2f2;
   background-image:url(images/error.gif);
   background-repeat:no-repeat;
   background-position:1% 50%;
   border: solid 1px #4F72B4;
   }
   /* trace container ( iniitally collapsed), and "Submit this to InterAKT... " area */
   #KT_tngdeverror, #KT_tngtrace {
   padding: 5px 10px 5px 5px;
   margin:5px;
   border: solid 1px #4F72B4;
   color: #555555;
   background-color:#f2f2f2;
   font-family:Courier, monospace;
   font-size: 12px;
   }
   #KT_tngdeverror a, #KT_tngdeverror a:visited, #KT_tngdeverror a:active, #KT_tngdeverror a:hover,
   #KT_tngtrace a, #KT_tngtrace a:visited, #KT_tngtrace a:active, #KT_tngtrace a:hover {
   font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
      font-weight: bold;
   font-size: 14px;
      text-decoration: none;
      color: #555555;
   padding: 0px 5px 0px 12px;
   margin-right: 0px;
   }
   #KT_tngdeverror a:hover, #KT_tngtrace a:hover {
   text-decoration: underline;
   }
   /* alignment and borders for the form submit buttons */
   #KT_tngdeverror #KT_needhelp {
   text-align: right;
   }
   #KT_tngdeverror label, #KT_tngtrace label {
   display: block;
   font-family: 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
   font-weight:bold;
   }
   #KT_tngtrace ul {
   padding-left:10px;
   margin-left:10px;
   }
   #KT_tngtrace_details {
   display: none;
   }
   #KT_tngwarning {
   padding: 10px 10px 10px 50px;
   margin:5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-weight:bold;
   color: #0000CC;
   font-size: 12px;
   border:1px solid blue;
   background-color:#E4FFFF;
   background-image:url(images/warning.gif) ;
   background-repeat:no-repeat;
   background-position:left;
   }
    

For the above settings, if a client-side validation fails, the error message that is displayed inline with the field looks like:

Let's change the color for the error message to green. To do so, you must first look in the client-side classes, and find the one controlling the error message's properties.

The only class defining how the text will look (bold, and with the red color) is the following:

/* The actial error message style */
.form_validation_field_error_error_message {
color:#cc0000;
font-weight: bold;
clear:left;
}

In order to display the message in green, simply replace the color value from #cc0000 to green: color:green;

In the same manner you can customize all other error elements that appear on client or server -side errors. One thing to mention is that when you change the site's skin in the InterAKT Control Panel, the changes made for one skin's CSS will not be visible for another.