CSS Resources

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

Style Structure

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

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

The filter has two states:

1. 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.
2. 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

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

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.

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:
  • jcsdl-and
  • jcsdl-or
     

When the ADVANCED mode is active the whole Query Editor gets a class .jcsdl-advanced-on (specifically, the element with .jcsdl-mainview class).

Retina CSS

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.

Notes

1. 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.
2. In the Minified version these statements are included in jcsdl.scss (jcsdl.css).
3. 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.