icon-arrow icon-check icon-mail icon-phone icon-facebook icon-linkedin icon-youtube icon-twitter icon-cheveron icon-download icon-instagram play close icon-arrow-uturn icon-calendar icon-clock
Werken bij Whitehorses
Blog 07/01/2019

Re-styling the Columns widget with CSS in OutSystems 11

Columns

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.

Integratiespecialist
Monique de Vos /
Integratiespecialist

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.

The right column now takes up half of the content width.

That's more like it!

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

Overzicht blogs

Geen reacties

Geef jouw mening

Reactie plaatsen

Reactie toevoegen

Jouw e-mailadres wordt niet openbaar gemaakt.

Geen HTML

  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.
Integratiespecialist
Monique de Vos /
Integratiespecialist

Wil je deel uitmaken van een groep gedreven en ambitieuze integratiespecialisten? Stuur ons jouw CV!