-
A new version of Full Calendar is now available.
See the details here
Custom Styling a List
- Views Views: 22,576
- Last updated Last updated:
-
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 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/Bootstrap/custom_css_example.phpto:
components/com_fabrik/views/list/tmpl/Bootstrap/custom_css.php
(Replace 'Bootstrap' with whatever template you are using).
Read the comments in the custom_css_example.php 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 the developer console of your browser 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;
}
Filter styling: Hide "list filter"
To hide a filter (label & value) which is coming from a URL parameter:
CSS:
div[data-filter-row="FULL_ELEMENT_NAME"]
{
display: none;
}