This article describes an example of how you can quickly and easily change the css-styles bpm'online. For example, we need to change the color of the left panel which contains Sections list.
Most css-styles in bpm'online 7.3 and higher versions are kept in a separate module - CommonCSSV2. This module doesn’t keep anything except styles, so it is easy to be replaced, for the goal of changing any of the basic styles.
In order to understand which styles are applied to the different components , you can use the browser console and immediately try to apply other styles:
Try changing the color:
Not bad, but it would also be helpful to change the color of the list items. Here they are:
So we have determined which css-classes need to be changed:
.ts-sidebar-list {
background-color: #357C29;
}
.left-panel {
background-color: #357C29;
}
Despite the fact, that certain classes are defined not in CommonCSSV2:
we still can override them in the same place.
Styles are defined on the LESS tab of the module. Here is the class .left-panel, which needs to be overridden:
So, we add the replacement module for CommonCSSV2 in Configuration into the user package:
Save and reopen the module. Now LESS tab appears there. The first thing we do is copy all the code from the base module:
Add this to the end:
.ts-sidebar-list {
background-color: #357C29;
}
.left-panel {
background-color: #357C29;
}
Save (publish). Go back to the user interface, clear the cache and reload the page:
Like
Hi,
Please note that we do not recommend to change the CSS as the action may influence the pages display in future.
Here is the example of the style implementation in the application that you can use as the base for your own development:
- create your module ( use CommonCSSV2 as an example)
- in Modification package tab add your custom CSS ( you can turn to the Elements tab in the browser console for the understanding of what style parameters to use). Please note that you need to change the settings of the control and not the label
- Open the replacing edit page schema os the section and add the custom module in 'define'. For example:
define("DashboardDesignerV2", ["css!DashboardDesignerV2CSS", "CommonCSSV2"]
- add the custom CSS class to the diff of the button.
Lisa