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:

File Description

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.

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

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 defines 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:
    • 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.


  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.