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.

Form and Details templates

Apr 1, 2016
Form and Details templates

  • Template locations(top)

    Form templates can be found in components/com_fabrik/views/form/tmpl/
    List templates can be found in components/com_fabrik/views/list/tmpl/

    Fabrik 3.0 and earlier uses the same templates for both forms and details.

    Fabrik 3.1 uses specific details template which are very similar to form templates, but are located in:
    components/com_fabrik/views/details/tmpl

    Each template has its own folder.

    Template structure (top)

    This section needs writing to explain what files make up a template and what each one of them does.

    Changing a Fabrik template (top)

    If you want to make changes to the style of your Fabrik Lists or Forms you have a number of options depending upon the degree of changes you want to make:
    • Use the Custom CSS file (recommended)
    • Use a Joomla template override
    • Clone a standard template and replace the existing CSS file

    The Custom CSS file(top)

    If you just need to make a few simple tweaks or additions to how an existing template looks, you can use a custom CSS file, which is included after (rather than used instead of) the standard CSS for the template.

    This is recommended because this way you will automatically use the template version matching the running Fabrik version.
    If you are using Joomla template override or a custom template it may be necessary to adapt them if Fabrik's template structure is changing.

    In Fabrik 2.x, if a "custom.css" file was provided in the template directory, this was included. In Fabrik 3.x we now use a "custom_css.php" file to achieve the same goal but with greater capabilities, though for backward compatibility with Fabrik 2.x, a "custom.css" file will still be included if it exists.

    An example custom CSS file ("custom_css_example.php") is provided in each of the standard List/Form/Details templates which you can use as a starting point for your own "custom_css.php" file. Read the comments in this file for details of how to use it.

    Your custom_css.php will not be affected by updating Fabrik (either by ZIP or github), as we never include these files in the Git repo.

    Create your custom_css.php in standard Fabrik view folder. We provide an example of this file, which you can copy from e.g.
    components/com_fabrik/views/form/tmpl/bootstrap/custom_css_example.php
    to:
    components/com_fabrik/views/form/tmpl/bootstrap/custom_css.php

    Replace 'bootstrap' with whatever template you are using.

    Template Overrides (top)

    If you need to make major changes to a Fabrik template, you can use Joomla's standard override functionality.

    This involves copying the files you want to change over to your Joomla template folders, and editing these with your changes. This means that you are completely replacing our default files with your own - you will no longer automatically inherit changes we may make in our templates, and may need to manually copy and paste these into your override files when you upgrade Fabrik to a new version.

    As an example, suppose that you are using the Joomla template Protostar and you want to slightly alter Fabrik's 'bootstrap' form template's markup
    1. Copy components/com_fabrik/views/form/tmpl/bootstrap/default.php to templates/protostar/html/com_fabrik/form/bootstrap/default.php
    2. Make a change to the copied file, save it and view your form. It will now be using the markup from the default.php in the template override folder
    All files in the form template folder can be overridden in this manner.

    Creating a New template(top)

    If your changes are going to be extensive, we suggest that you create an entirely new template by copying an existing template folder and altering it to suit your needs.

    Copy:
    components/com_fabrik/views/form/tmpl/bootstrap/
    to:
    components/com_fabrik/views/form/tmpl/mytemplate/

    If you selected a template from within the menu item that links to the form, then you will need to edit the menu item and select 'mytemplate' from the template dropdown.

    Otherwise you can simply edit your form and select 'mytemplate' as the template you wish to use.

    Creating a template with single elements(top)

    Use a copy of the "contacts_custom" template to display single elements in positions and styles as you need.

    Elements in this template are called by name, so it's only to be used by the form containing this elements.

    Fabrik 3.1:
    Please note that element's should always be wrapped inside this html:
    PHP:

    <div class="control-group <?php echo $element->containerClass; ?>" >
    ......
    </div>
     

    Commented Default Form Template (top)

    Fabrik3.0 only:
    The 'default' form template now includes comments that describe what each section of code does (in default.php) and how it is styled (in template_css.php)

    There is also a 'contacts_custom' form template, designed to work with the sample Contacts form, which shows some of the techniques you can use to build a totally custom template

    Below are several links to resources referenced in these files that describe form and other html and css elements used in the form template:

    CSS Styling Examples(top)

    Some CSS examples for Fabrik3.3+
    Some examples of CSS styling for Fabrik3.0

    Javascript Interactivity (top)

    Some examples of Javascript Interactivity can be found here.

    Other template examples (top)

    Other examples of template changes can be found here.