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.

That's more like it!

Hope you enjoyed this, and see you in the next post!