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) takes 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 the 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.

In 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 our new structure, 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 with the SilkUI version! Applying the Columns3RightBig style class to a div and placing the Columns3 structure widget inside of it should now give the correct result.

capture

That’s more like it!

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s