Isimio supports many declarative customisation options, but oftentimes creating something truly original means there aren’t pre-made tools to do what you’re looking for. In these scenarios, we offer the ability for developers to create custom styles using CSS Plugins.
CSS Plugins enable the creation of custom styling rules for different kinds of objects, or records with different field values. Virtually any visual aspect of a record can be modified: colors; font and text size; borders; and even special effects like blurring. A great source for learning about CSS is W3Schools.
To learn about creating uploading a CSS file as a plugin, visit Client-Side Plugins.
Styles By Object Type
Creating a style for various object types is simple, just use a selector with the following pattern:
.kruviScheduler .isimio-table .UIElement.your_object_name
For example:
.kruviScheduler .isimio-table .UIElement.kruvi_staff__shift__cThe object name must be:
- Written in lower-case
- Be the fully-qualified name, including any package namespaces, and including __c for custom objects
With the selector in place, you may add any style attributes you like:
.kruviScheduler .isimio-table .UIElement.kruvi_staff__shift__c {
border-left-color: #f3526e;
background-color: #ffede2;
}Styles By Field Values
It is common to need to set visual properties according to field values. For example, if a meeting is cancelled, you may wish to display it with a dark background.
A simple way to create these rules is by using Attribute Fields. Fields marked with the Attribute property will have their value set as an attribute on the record’s DOM element. They will always be in the format:
attr-fieldname=”value”
As with objects, the field names will always appear in lower-case, and will have the fully qualified name of the field, including namespaces and underscores. For example:
attr-kruvi_staff__active__c=”true”
This allows us to create CSS selectors for various field values, for example:
.kruviScheduler .isimio-table .UIElement.kruvi_staff__shift__c[attr-kruvi_staff__active__c="false"] {
border-left-color: black;
background-color: #AAAAAA;
}Other Factors
Although the examples above are the most common, they are by no means everything you can do with our plugin mechanism. We’d always welcome feedback regarding what kind of styling you’re creating, so we can build mechanisms to achieve the same results declaratively.
