CSS styling examples-Fabrik3.1+

  • Views Views: 10,594
  • Last updated Last updated:
Page

  • Contents

    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