How can I style Configurable list widget with CSS?

I have tried putting 6 fields (day,month,year,hour,minutes,am/pm) into one "Configurable List Widget", and it works. But.........

using "static" to put some text between the 3rd & 4th fields puts the text there, but I can't see how I can control the appearance of that text (font, size, color, etc) and put some space before and after the text.

Also, I would ideally like to put some 'blank' space instead of some text, to act as a horizontal field-divider.

Is there any way I can achieve these two desires???

Hi,

The configurable list widget is divided into table with columns and rows.

You can add these custom CSS code on the widget to adjust the padding of each column.

.col1 { padding-left: 0px; padding-right: 0px;}

.col2 { padding-left: 10px; padding-right: 10px;}

.col3 { padding-left: 0px; padding-right: 10px;}

.col4 { padding-left: 0px; padding-right: 10px;}

.col5 { padding-left: 0px; padding-right: 10px;}

.col6 { padding-left: 0px; padding-right: 10px;}

.col7 { padding-left: 0px; padding-right: 10px;}

.col8 { padding-left: 0px; padding-right: 10px;}

.col9 { padding-left: 0px; padding-right: 0px;}

Here's a guide on how to add custom CSS on this widget.

1. Select the Configurable List Widget. Once selected, click the "Wizard" button.

2. The Configurable List Widget wizard will appear, scroll down and you'll see an area where you can add custom css. Click "Finish" when you're done.

In regards to the blank space divider, you can use static and then the value should be " ". The value   is equal to 1 blank space.

This is the result on .col4 :

Hope this works. Let us know if you need any help.

Thank you.

There is no option in the toolbar that changes the font text, font size and font colors. You need to use custom CSS code that will target specific elements within the widget. If you need help with that, just tell us how would you like it to be. Thank you!