Custom Classes

Updated October 31, 2020

With Custom Classes, you can define Style Classes that are available for multiple widgets and if needed in different projects.

In order to create and manage your classes, you must use the Menu Project=>Project Custom Classes


Custom Classes Dialog Box

You can create / remove classes and new classes properties by using the +- buttons 

In the example above, we have created a class named redbackgound with 2 properties, one for the background color (red), the other for the test color (white).

Adding a custom class to a Widget

When a widget is selected in the editor, just go to the Classes tab of the widget properties to add or remove classes:


all Widgets to which you apply a class will inherit the properties of the class. And changing a property value in the class will change it for all widgets with that class.


Example of Widgets with the class redbackground


If you change the background-color from the class, all the widgets inherit from this new color.

CSS Combinators

If you want a certain type of element to inherit from the containing class but with a different property value, you can use css combinators.

For example, if you want all paragraph elements placed in a container with the redbackground  class to have a font size of 18px and a color white, create a class with the following syntax: redbackground p


Extending existing Classes 

You can also override existing CSS classes by creating a custom class.
For example, if you want all buttons to be blue by default, create a class button as follows::


CSS Hierarchy

When using custom classes, they will override existing properties because the classes.css file is loaded after the page css files. However, if you use the custom.css files to add properties, it is loaded after the classes and will override the custom classes.

Copyright©  Nymphide Lab 2020 - All Rights Reserved