• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Highlight required elements

  • Views Views: 8,790
  • Last updated Last updated:

Navigation

      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • 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:

    Required fields before 2.PNG


    Required field before 1.PNG


    after:

    Ff required fields after.PNG


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

    Implementation steps​

    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​

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

    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:
    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.
Back
Top