CSS styling examples-Fabrik3.1+

Jan 16, 2016
CSS styling examples-Fabrik3.1+
  • These examples are for Fabrik3.1+


    Styling a specific row in a form(top)


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

    Code (CSS):

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

    Styling a specific row in a details view(top)


    Code (CSS):

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

     

    Styling a single form element(top)

    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:
    Code (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:
    Code (CSS):
    #$form #listname___elementname input {
        border: 1px solid red;
    }

    Styling an individual group (top)

    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
    Code (CSS):
    #$form #groupX > ul {
        margin-top: -40px
    }
    where: X is your group id


    Changing the label column width in the bootstrap template (top)

    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:
    Code (CSS):
    #form .fabrikLabel {
        width: 200px;
    }

    Setting the position of an element within a group (top)

    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:
    Code (CSS):
    #$form #group6 div:nth-child(4) {
        position: absolute;
        right: 0;
        top: 0;
    }

    Styling form buttons (top)

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