JavaScript CookBook/Theme CSS Customisations/Debugging Stylesheets

From GeoMedia Smart Client
Jump to: navigation, search

Debugging Stylesheets

Problem: Your custom theme and/or stylesheet doesn't style your workflow as expected, there are visual errors such as wrong fonts, missing icons or styles that seem to have no effect.

Solution: Debug your Stylesheet(s) and themes using the following hints:

CSS Debugging in Google Chrome

  1. Before debugging, we recommend to activate the debug mode in your workflow.config and that you open the affected workflow page either in Google Chrome or Firefox.
  2. Open the Developer Tools of your Browser (Chrome Developer Tools or Firebug extension for Mozilla Firefox)
  3. In the developer tools, switch to the Network panel and check for any Stylesheet entries marked in red. Red entries mean that the browser couldn't locate the css file (HTTP Error 404) or that a severe error happened while processing or accessing the file (HTTP Error 500). Solution: Check the hyperlink path to your css files and/or for syntax errors in your less file (these are usually shown in the response tab of the file).
  4. If your styling errors persist, check the response bodies of the CSS files for anomalies. Some less compilation errors are transmitted as comments in the generated css file (/* LESS ERROR */).
  5. Also check if the CSS output matches the current state of your CSS files. If the browser seems to render an outdated stylesheet, try a non-cached reloading the of the webpage by hitting Ctrl-F5. In some cases it might be necessary to perform an iisreset if the server still delivers the outdated CSS.
  6. If the styling errors only affect certain elements such as buttons or form fields, use the element selection tool of the Developer Tools to check the CSS rules that are applied to this element. Watch out for styles that are overruled by others due to selector precedence or that are ignored because of CSS errors.

Other Recipes in this category: