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

Custom Styling a List

  • Views Views: 21,735
  • Last updated Last updated:

Navigation

  • Major CSS styling​

    If you need to make major changes to the CSS, we recommend you use the #Template_Overrides method outlined in the main Advanced Lists wiki entry. But that means you are completely replacing Fabrik's standard CSS, and you will no longer automatically inherit any CSS improvements that are made in these templates.

    Minor CSS Styling​

    So if you just need to make a few simple tweaks or additions to a given template, you can use a custom_css.php file, which is included after (rather than used instead of) the default template_css.php for the template.

    To create your custom_css.php in standard Fabrik view folder, copy the example file provided with Fabrik from:
    components/com_fabrik/views/list/tmpl/default/custom_css_example.php
    to:
    components/com_fabrik/views/list/tmpl/default/custom_css.php

    Replace 'default' with whatever template you are using. There is also an example custom CSS in the default list template folder. 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.

    Note: We will also include a custom.css file if one is present, for backward compatibility with Fabrik 2.x, however we recommend that you convert your custom.css to custom_css.php, see the example file for details.

    The best method of tweaking CSS styling is to use a developer tool like firebug (firefox addon) to examine the CSS classes you want to modify.

    If the modifications should be applied to one list only use:
    #listform_X_com_fabrik_X (X is your list ID)​
    instead of:
    #listform_$c​

    Examples​

    Change header background to green,transparent​
    CSS:
    #listform_$c th {
    background: green;
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
    }

    Change header text color to black, without shadow​
    CSS:
    #listform_$c .fabrik___heading {
    color: #000000;
    text-shadow: none;
    }

    Change one column (header + entries)​
    Replace FULL_ELEMENTNAME with your element name (tablename___elementname):
    CSS:
    #listform_$c .FULL_ELEMENTNAME {
    max-width: 20px;
    overflow: hidden;
    background:yellow
    }

    Change group heading​
    CSS:
    .listform_$c .fabrik_groupheading td {background:green;color:yellow}
    .listform_$c .fabrik_groupheading a {color:yellow}

    Hide "CheckAll" checkbox​
    To hide the header checkbox (X= list ID)
    CSS:
    .list_X_checkAll {
    display: none;
    }

    Hide "View" button​
    To hide the View button (if Render Buttons as = Inline)
    CSS:

    #listform_$c .fabrik_actions .btn.fabrik_view {display:none}

    Styling a Row based on element selection​
    CSS:

    td.fabrik_element.fabrik_list_1_group_1{background-color:rgba(255, 0, 0, 0)!important;}
    tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.pending.statuspending{
    background-color: #f2d3d5;
    }
    tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.sent.statussent{
    background-color: #FFCC66;
    }
    tr[id^="list_1_com_fabrik_1_row_"].fabrik_row.complete.statuscomplete{
    background-color: #CCFFCC;
    }
Back
Top