• 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.

CSS styling examples-Fabrik3.1+

  • Views Views: 10,532
  • Last updated Last updated:
  • These examples are for Fabrik3.1+

    Custom CSS file​

    Create a custom CSS file to add your custom CSS
    https://fabrikar.com/forums/index.php?wiki/form-and-details-templates/#the-custom-css-file

    Use your browser console to get the CSS classes, HTML ids etc. you need.

    Styling a specific row in a form​


    Each element is wrapped inside a div, with a class assigned 'fb_el_tablename___elementname'. Replace tablename___elementname with your element's full name:

    CSS:

    .fb_el_tablename___elementname {
    border: 1px solid blue;
    padding: 20px;
    }

    Styling a specific row in a details view​


    CSS:

    .fb_el_tablename___elementname_ro {
    border: 1px solid blue;
    padding: 20px;
    }


    Styling a single form element​

    Elements which are single DOM objects (fields, dropdowns for example) have ids which correspond to the element full name, so we could style a field with this css:
    CSS:
    #$form #listname___elementname {
    border:1px solid red;
    }


    Element's which have multiple DOM objects (link Elements, radio Lists etc) wrap all their content inside a div whose id is the element full name, so to style all the fields in a Link element we would use:
    CSS:
    #$form #listname___elementname input {
    border: 1px solid red;
    }

    Styling an individual group​

    You can also style an individual group, for example if you wanted to change the top padding of one group but not another, you could add this to your Forms custom_css.php
    CSS:
    #$form #groupX > ul {
    margin-top: -40px
    }
    where: X is your group id


    Changing the label column width in the bootstrap template​

    By default, the width of element labels is set by the Joomla template. To set it to 200px you would add this to your override css file:
    CSS:
    #$form .fabrikLabel {
    width: 200px;
    }


    Setting the position of an element within a group​

    You can access Elements with the css n-th child propertySo if you want to absolutely postition the 4th element in group (id 6), to the top right of the group, your css might look like this:
    CSS:
    #$form #group6 div:nth-child(4) {
    position: absolute;
    right: 0;
    top: 0;
    }

    Styling form buttons​

    Example "Go back" button:
    CSS:
    .fabrikActions button[name='Goback'] {
    background: green;;
    }
    Other button names: 'Submit', 'Reset', 'delete'

    Hiding Label of Elements​

    CSS:

    .fb_el_your-full-element-name_ro .fabrikLabel {display:none;}

    If you want to keep the space
    CSS:

    .fb_el_your-full-element-name_ro .fabrikLabel {visibility:hidden;}

    Hiding empty elements in details view​

    Most Element Plugins have the CSS class fabrikDataEmpty added if they are empty.
    CSS:
    #$form .fabrikDataEmpty {display:none;}
Back
Top