How can I create a numbered configurable list widget?

  • Profile Image
    laurahonjas
    Asked on February 28, 2018 at 03:03 PM

    hello- Also can I automatically number each row in the first column of the widget?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    Jim_R
    Answered on February 28, 2018 at 04:12 PM

    I'm afraid there's no real way to achieve this with an infinite number of entries. But if you will limit the number of MAXIMUM ROWS NUMBER, then you can use CSS to emulate a numbered Configurable List Widget.

    The idea is to use a static text field that will serve as the number. Going with the example screenshot above, if you will limit the rows to just 3, then you can use the following setup:

    1. Make sure you add : static : as the very first line of the widget on the GENERAL tab.

    2. Then on the CUSTOM CSS tab, paste these codes:

    #list > tbody > tr:nth-child(2) > .col1 { font-size: 0; }

    #list > tbody > tr:nth-child(2) > .col1:after {

        content: '1. ';

        font-size: 14px;

    }

    #list > tbody > tr:nth-child(3) > .col1 { font-size: 0; }

    #list > tbody > tr:nth-child(3) > .col1:after {

        content: '2. ';

        font-size: 14px;

    }

    #list > tbody > tr:nth-child(4) > .col1 { font-size: 0; }

    #list > tbody > tr:nth-child(4) > .col1:after {

        content: '3. ';

        font-size: 14px;

    }

    Complete guide: How-to-Inject-CSS-Codes-to-Widgets