Tutorial: How to highlight required fields

[rw1]

hello,

i was trying to style the error message that is displayed at the top of a form when a form does not validate. in the process i realised i could actually style the field that was not validated and didn't really need the message at the top of the form. so here is a short tutorial on how to achieve the effect of:

- no message at the top of the form
- styled field that requires validation
- adding custom 'alert.png' icon
- 'hiding' 'notempty.png' icon

please see attached before and after's to see the effect.

please make a backup before making these changes so that you can revert to it if you encounter problems.

steps required:

- create alternative image to default_rounded/images/alert.png
- upload to your_form_template/alert.png
- create alternative image to media/com_fabrik/notempty.png (i made this a transparent png in my example)
- upload to server and overwrite (will update this step when i know how to override media folder files)
- change error message css

in, for example, 'default_rounded' template's template_css.css, find:

#{$view}_$c .fabrikError,
#{$view}_$c .fabrikNotice,
#{$view}_$c .fabrikValidating,
#{$view}_$c .fabrikSuccess{
	font-weight: bold;
}

#{$view}_$c .fabrikMainError{
	height:2em;
	line-height:2em;
}

#{$view}_$c .fabrikMainError img{
	padding:0.35em 1em;
	float:left;
}

#{$view}_$c .fabrikNotice{
	color: #009FBF;
	background: #DFFDFF url(images/alert.png) no-repeat center left !important;
}

#{$view}_$c .fabrikError,
#{$view}_$c .fabrikGroup .fabrikError{
	color: #c00;
	background: #EFE7B8;
}

#{$view}_$c .fabrikErrorMessage{
	padding-right: 5px;
}

and replace with:

#{$view}_$c .fabrikError,
#{$view}_$c .fabrikNotice,
#{$view}_$c .fabrikValidating,
#{$view}_$c .fabrikSuccess{
	font-weight: bold;
}

#{$view}_$c .fabrikMainError{
	display: none;
}


#{$view}_$c .fabrikMainError img{
	display: none;
}

#{$view}_$c .fabrikNotice{
	color: #009FBF;
	background: #DFFDFF url(images/alert.png) no-repeat center left !important;
}

#{$view}_$c .fabrikError {

}

#{$view}_$c .fabrikGroup .fabrikError {
border: 0px;
border-radius: 10px;
background-color: #C7C7C7 !important;
background-image: none !important;
color: #4C4C4C;
margin-bottom: 0px;
font-weight: normal;
padding-left:10px;
margin-top: 10px;
}

#{$view}_$c .fabrikErrorMessage{
	padding-right: 5px;
        position: absolute;
	right: 0px;
}

bugs:

firefox is not adding padding-left to the text in the tooltips associated with the 'alert.png' icon - if anyone can figure out how to fix this in firefox it would be much appreciated.

the 'spinner' background is not covering the whole width of the form and therefore the background of the 'required field' is showing to the right of the 'spinner' area when navigating between pages on a multipage form.

thanks!

see this tutorial and more at:

http://fabrikar.com/wiki/index.php/Things_You_Can_Do

 

[jfquestiaux]

In your research, have you find a way to change the color of the characters that appear in he tool tips (when you hover on the validation icon and/or the error icon)?

I was able to change the background volor, but not the character's.

 

[rw1]

.floating-tip ?

and i always add an !important around there if some are being stubborn haha

edit: more specifically, in default templates template_css.css, eg:

.floating-tip {

	background-color: #fff;

	font-weight: bold;

	font-size: 11px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	border-radius: 3px;

        color: #CC0000; /* added */

}

around line 225.