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:
