If you want to change the way the Query Builder looks, you will need to create a separate CSS style sheet that overrides the default CSS style sheet. While you could potentially use a modified version of the default CSS file that ships with the Query Builder, chances are that it would get overwritten when you update your installation. Using a separate CSS style sheet is the recommended method to customize the appearance of the Query Builder; altering the default style sheet should, in most cases, be unnecessary.
Here are the CSS resources used by the Query Builder:
|jcsdl.sprites.css||Defines the iocns used to represent targets.|
|jcsdl.sprites.scss||The SCSS file for the jcsdl.sprites.css.|
The Query Builder uses the SCSS meta-language to generate the jcsdl.css file from the jcsdl.scss file. If you want to modify jcsdl.css, you need to modify jcsdl.scss, otherwise whatever changes you make to to jcsdl.css will be overwritten. Modifying jcsdl.css is not necessary in practice. Any style definitions can be overridden with a separate style sheet. The easiest way to accomplish this is to copy jcsdl.css, modify and rename it, and import after jcsdl.css.
By default, the Query Builder appears in a container <div> with the "jcsdl-container" class. The styles inside that <div> are divided the following four groups:
The header contains the following elements:
- The title in an H3 tag.
- A <div> with the Create New Filter action button ("jcsdl-mainview-mode" class).
- Two icons that let you switch between the collapsed and expanded view modes ("jcsdl-mainview-actions" class).
The filter has two states:
- The filter configuration state. Filters are built in the jcsdl-filter-editor > jcsdl-steps container. The (multiple levels of) targets, operators and arguments are shown in a set of consecutively numbered containers (e.g. jcsdl-filter-step-number-0,1,2…). Tooltips appear when you hover over the icons used to build filters.
|jcsdl-mainview-mode||The <div> of the view mode selector buttons of the editor.|
|jcsdl-label||Label of the view mode selector.|
|jcsdl-mainview-mode-options||<div> of the selection options of the view mode selector.|
|jcsdl-mainview-mode-option||One option of the view mode selector.|
|jcsdl-mainview-actions||Container <div> for action buttons, like "Create new filter".|
|jcsdl-filters-logic||Container <div> for the options of the filter logic selector.|
|jcsdl-filters-logic-option (jcsdl-and)||'And' option of the filter logic selector.|
|jcsdl-filters-logic-option (jcsdl-or)||'Or' option of the filter logic selector.|
|jcsdl-footer||Main container of the footer part.|
|jcsdl-actions||<div> of the action buttons inside to footer block.|
|jcsdl-button, jcsdl-editor-save||The save and preview footer button.|
|jcsdl-mainview-actions||Container <div> for action buttons, like "Create new filter" inside the footer part.|
|jcsdl-add-filter||Add filter button in the footer.|
|jcsdl-filter-editor||The main <div> of the filter editor part.|
|jcsdl-steps||Container <div> for one level of the editor.|
|One row of the steps, is numbered by the jcsdl-filter-step-number-X class.|
|jcsdl-filters-list||The main <div> of the created filter list.|
|jcsdl-filter||One filter in the filter list.|
|jcsdl-filter-description||Description of the filter.|
|jcsdl-filter-info, target||Container <div> for the filter targets.|
|jcsdl-filter-target||One filter target.|
|jcsdl-filter-info, field||Container <div> for the filter fields.|
|jcsdl-filter-field||One filter field.|
|jcsdl-filter-info, operator||Container <div> for the filter operators.|
|jcsdl-filter-operator||One filter operator.|
|jcsdl-filter-info, value||Container <div> for the filter values.|
|jcsdl-filter-options||One filter value.|
Visual Logic Editor
The Visual Logic Editor module contains:
- The graphical logic editor (where you can drag and drop tiles).
- The manual logic editor (where you can input your logical expression manually).
- The logic options: ALL / ANY / ADVANCED.
- Additional logic options for ADVANCED editor (+  and switching between Manual and Graphical Editor).
When the Query Builder is initialized without a pre-loaded query, the filter area only shows a toggle that offers you the choice between the AND and OR logic mode for the filters. The two option classes are:
When the ADVANCED mode is active the whole Query Editor gets a class .jcsdl-advanced-on (specifically, the element with .jcsdl-mainview class).
Note that now the editor is "Retina-Ready", that is, it will load higher resolution graphics for devices with retina displays (like the iPad, iPhone, MacBook Pro). This behavior is defined at the bottom of jcsdl.scss file using CSS Media Query to target devices with pixel ratio/density higher than 1.5.
- The definitions of the CSS style that use images are stored into a separate file, jcsdl.sprites.scss (jcsdl.sprites.css). If you want to use your own custom images, you can use this file as a reference.
- In the Minified version these statements are included in jcsdl.scss (jcsdl.css).
- To change the icons displayed in the Query Builder, overwrite the JCSDL GUI sprite files. Make sure you match the exact dimensions and position of the images you replace. The Developer Resources section includes an overview of the sprite files.