Reference: CSS Classes
When dynamically generated or manually created interactive filters are present,
enabled and their filtering user controls are rendered into the FilterZen
Filter Web Part, it wraps them in HTML span elements decorated with the CSS class
names detailed below, allowing for full customizability of their visual appearance.
Unless otherwise noted, these elements are pre-styled in
/_layouts/roxority_FilterZen/roxority_FilterZen.css.
- span.rox-ifilter-all — the entire surrounding area of the Web Part
output (except in Web Part Page edit mode, where further contextual information
is prepended to this element).
- span.rox-ifilter-webpartid — the entire surrounding area of
all interactive filter user controls, but excluding custom
HTML for manual re-filtering (if any), where webpartid is the Web
Part ID. Not pre-styled.
- span.rox-ifilter — the surrounding area of an interactive filter user
control and its preceding caption label (if any).
- span.rox-ifilter-label — the caption label preceding an interactive
filter user control. Pre-styled only with toolbar stylings applied.
- span.rox-ifilter-control — the area immediately surrounding an interactive
filter user control. Pre-styled only with toolbar stylings applied.
- span.rox-ifilter-datetime — the area immediately surrounding an interactive
Date filter user control (inside a span.rox-ifilter-control).
- span.rox-ifilter-button — the area surrounding custom HTML for manual
re-filtering, if any.
- a.rox-ifilter-button — the Filter or Clear Filter links
from the predefined Filter link and Filter and Clear All links HTML
templates.
- input.rox-ifilter-button — the Filter or Clear Filter
buttons from the predefined Filter button and Filter and Clear All buttons
HTML templates.
- a.rox-ifilter-button-clear — the Clear Filter link from the
predefined Filter and Clear All links HTML template.
- input.rox-ifilter-button-clear — the Clear Filter button from
the predefined Filter and Clear All buttons HTML template.