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:
The style sheet for all the interface elements of the GUI.
The SCSS file for the jcsdl.css.
The style sheet of the jQuery GUI plugins.
|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
- The filter
- The footer
- The tooltip
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.
- The filter presentation state. After you have saved a filter, the Query Builder shows the previously made filters one filter per line. The container <div>'s class is jcsdl-filter, it contains the descriptions of the layers of the filter, like Target (target), Field(s) (field), Operator(s) (operator), or Value(s) (value).
The footer contains a <div> for the current filter related actions (jcsdl-actions) like save (jcsdl-editor-save) and cancel (jcsdl-editor-cancel).
The tooltip part (<div>) is only visible, when the cursor is over an element that has a tooltip. The tooltip function uses the Tipsy jQuery plugin.
- The tooltip itself is in a container div with the tipsy class. It also gets a tipsy-(gravity code) class, "n", "e", "s", "w" -- the cardinal directions on a compass, that determines the place and position of the little arrow (tail) of the tooltip.
- The <div> with tipsy-arrow class can be used to style the arrow itself.
- The inner part of the tooltip has the tipsy-inner class.
The main<div> of the editor.
The main container<div> of the editor.
The ADVANCED logic editor.
The container for graphical editor of advanced logic.
The graphical editor of advanced logic.
Arrow for scrolling the graphical editor of advanced logic.
The manual editor of advanced logic.
The "+ " and "Manual Edit" buttons in the list of logic options, next to ALL/ANY.
A token (or tile) representing one item in the graphical editor of advanced logic.
The help icon inside the ADVANCED logic button.
General class that deﬁnes how buttons inside the editor look (excluding the big "Save and Preview", "Save" and "Cancel" buttons.
The container<div> of the three (four) parts of the editor.
The main<div> of the header part.
|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.