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
Note
The scope of custom classes includes the entire project and can even be reused in other projects by selecting the value "global" for the Scope property of the class.
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).
Note
Don’t write the dot at the beginning of the class name, Thorium will add it automatically when generating the css file. But if you use a css combinator, then add the dot to the sub-element (eg redbackground .button )
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.
TIP
All class properties must be written with lowercase
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
TIP
Class Combinators can refer to an HTML element (redbackground p), to another class (redbackground .classname) or event to an individual object with its id (redbackground #objectid)
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.
TIP
In some special situations, you may need to use the !important attribute with the value assigned to a property, for example, color: white should be changed to color: white !important
