Re-styling the Columns widget with CSS in OutSystems 11
OutSystems 11 all but swapped SilkUI for OutSystemsUIWeb, which requires everyone to familiarize themselves with the new out-of-the-box CSS class structure - which is not always easy. In this example, we are using OutSystemsUIWeb in OutSystems 11 to re-style the Colums3 structure widget to have a large right column.
Re-styling the Columns widget with CSS in OutSystems 11
There's a great tutorial about styling (or 'extending') SilkUI patterns on the OutSystems website, which (very conveniently) uses styling the Columns structure widget as an example. However, since the release of OutSystems 11, this tutorial no longer works unconditionally because many OutSystems applications now use OutSystemsUIWeb instead of SilkUI.
One of the great things about OutSystems is the customizability of the platform; even though many interface elements are readily defined for you to use straight out of the box, when some cases call for a bit more styling power, you can just use the good old CSS style sheets or JavaScript to code your way to perfection.
Still, this does require a bit (or a lot) of familiarity with how OutSystems structures its' classes. It is not always clear how they relate to each other or what style class is used for which part of a widget, and it can be quite a search to find out. A big change in the OutSystems platform like moving focus from SilkUI to OutSystemsUIWeb requires everyone to familiarize themselves with the new out-of-the-box CSS class structure, which is not always easy.
In this particular example, we are re-styling the Colums3 structure widget to have a large right column (width: 50%;), and we'll reduce the width of the other two columns to 25%. We do this by creating a new style class, Columns3RightBig, and applying it to a container with the Columns3 widget in it.
With SilkUI, we would do it like this:
.Columns3RightBig .Columns3 .Column.ColLast {
width: 50%;
}
.Columns3RightBig .Columns3 > .Column {
width: 25%;
}
However, the Columns3 style class has changed in OutSystemsWebUI, so this piece of CSS doesn't work there. When we inspect the 'new' three-columned element in Chrome, the classes assigned to a div with the Columns3 structure widget nested inside it are 'columns columns3 gutter-l tablet-break-none phone-break-all', and the columns themselves have the 'columns-item' style class applied to them.
To find the classes we want to manipulate, we can simply look at the base theme's style sheet - aptly named 'BaseTheme'. The exact columns3 class is not defined in the BaseTheme style sheet, but we can find references on how to use it in the Columns Responsive section of the column definitions. One of them is the following:
.phone .columns.columns3.phone-break-middle > .columns-item:last-child
Modifying this, we get the following result in our own style sheet:
.Columns3RightBig .columns.columns3 > .columns-item:last-child {
width: 50%;
}
.Columns3RightBig .columns.columns3 > .columns-item {
width: 25%;
}
Quite a difference compared to the SilkUI version! Applying the Columns3RightBig style class to a container and placing the Columns3 structure widget inside of it should now give us the correct result.
1 Reactie
Geef jouw mening
Reactie plaatsenReactie toevoegen
The world after COVID19 is shaping up. Currently, individuals, organizations and businesses who have off-site channels are still operational. The future will be more of that as clients habits die hard. It will be social and virtual.
https://bit.ly/chitchatchannel is the new social commercial experience. It merges its own ecommerce feature with its channel-type social media where you as presenter catalogue your posts or products for your channel participants creating a virtual commercial opportunity.
It is ideal for individuals, groups, enterprises and organizations. What do you have to lose ~Sign Up, get your channel and be positioned for the future at https://bit.ly/chitchatchannel