1. Fabrik 3.7 is now available. This version contains critical security updates, please update as soon as possible. Please remember to backup your site before updating, we also recommend testing your updates on development sites if possible.
  2. We had to restore the site around midday (CST) on Wed 7/26 from a backup approximately 8 hours old. So a few posts in the forums were lost. You may want to check to see if you need to re-post anything.
  3. The release of Fabrik for J! 3.8 is not yet ready. Do not update your sites to J! 3.8 until this notice is removed.

Highlight required elements

Jul 1, 2013
Highlight required elements
  • 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
    before:

    [​IMG]

    [​IMG]

    after:

    [​IMG]

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


    Implementation steps (top)

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

    How to change error message css (top)

    In, e.g. 'default_rounded' template's template_css.php, find:

    Code (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;
    }
    and replace with:
    Code (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 (top)

    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.