-
New Commercial Services Section
We have now opened a commercial services section here on the forum for registered users. If you have a Fabrik project that you wish to have someone work on for you, post it under Help Wanted. If you are an application developer and wish to earn some money helping others, post your details under Fabrik Application Developers.
Both of these are unmoderated. It will be up to both parties to work out the details and come to an agreement.
-
Joomla 5.1
For running J!5.1 you must https://fabrikar.com/forums/index.php?wiki/update-from-github/ or include the new file manually https://fabrikar.com/forums/index.php?threads/joomla-5-1-and-fabrik-cannot-find-files-error.54473/post-285151 See also Announcements
Highlight required elements
- Views Views: 8,802
- Last updated Last updated:
-
Following this tutorial will achieve the effect of:
- no error message at the top of the form
- styled field that requires Validation
- adding custom 'alert.png' icon
- 'hiding' 'notempty.png' icon
after:
Please make a backup before making these changes so that you can revert to it if you encounter problems.
Implementation steps
- 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
How to change error message css
In, e.g. 'default_rounded' template's template_css.php, find:
and replace with:CSS:.{$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;
}
CSS:.{$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.