Skip to main content

Debug CSS

You can customize the appearance of your application by applying your own CSS and/or configuring themes. If the the result is not what you expected, you can use the techniques below to debug your CSS.

Your CSS vs Grexx CSS​

You cannot make changes to the Grexx Platform basic CSS, but you can override it by applying your own custom CSS. You can check whether a particular style originates from your custom CSS or the Grexx Platform CSS by disabling your custom CSS.

To disable your custom CSS temporarily, open your application in the appropriate DTAP environment and launch Developer Tools. From the toolbar, toggle the Disable custom CSS icon on. Your application is displayed with your application's custom static and/or dynamic CSS.

Note:

Disabling custom CSS does not disable any themes that you have applied.

Identify the source of a CSS rule​

Once you have determined that a styling issue comes from your custom CSS, you can use browser tools to identify the CSS file that is controlling the element:

  1. From your browser, inspect the element (such as a heading, paragraph, image, or table):
    • In Chrome, press Ctrl + Shift + C and then select the element you want to inspect.
    • In Firefox, right-click on an element and select Inspect.
  2. The browser console opens showing the HTML and CSS for the element (and the rest of the page). CSS inspector in Chrome developer tools
  3. On the right you can see the CSS file that the CSS rule came from.
    • casetype-and-view.less?view=1:####:#####:1: This is dynamic CSS that is configured using templates. You can apply CSS templates to the whole platform (from Platform > Styling > Platform CSS) or to specific casetypes, views, widgets, or plugins.
    • platform.css: This is static CSS that is independent of the current case or user. You can make changes to your static CSS from your Studio under Platform > Styling > Platform CSS.
    • theme.case.1:####:1-view.1:####:###:1.css: This is CSS that comes from your platform theme. You can make changes to the theme from your Studio under Platform > Styling > Themes.
    • gx._.less: This is Grexx-specific CSS. You cannot edit this, but you can override it with static or dynamic CSS.
    • gp-client.css?v=#.#.#: This is Grexx-specific CSS. You cannot edit this, but you can override it with static or dynamic CSS.
    • gp-library.css?v=#.#.#: This is CSS from libraries used by Grexx Platform. You cannot edit this, but you can override it with static or dynamic CSS.
  4. If the CSS rule comes from dynamic CSS, click the file name to view the CSS file. The file contains all the CSS templates that you have applied to the platform and to individual cases, views, widgets, and plugins.
    There is a known issue whereby the CSS of a theme sometimes refers to casetype-and-view instead of the theme file. For more information, ask your Grexx Coach for an update on GP-7655.
  5. Scroll up until you see text in the format: /***** Source: @casetype/1:####:####:1 *****/. This is the ID of the template containing the CSS. Template case ID in Chrome CSS inspector
Tip:

If a CSS template contains nested templates, you can use the Templates tab in Developer Tools to analyze the template further.