I am trying to follow the October backend user interface style guide at: https://octobercms.com/docs/ui/list - specifically the Status column section.

I need to highlight row cells in green or red. The guide mention the CSS classes .negative and .positive and also the text-danger and text-success. However, I can't get them to work.

I am adding the CSS classes in my columns.yaml file:

        status:
        label: Status
        type: text
        cssClass: 'oc-icon-circle text-danger negative'

Here is the generated HTML code when inspected on Chrome browser:

    <td data-title="Status" class="list-cell-index-4 list-cell-name-status list-cell-type-text oc-icon-circle text-danger negative">
      Blocked
    </td>

Is there any other classes I can use with OctoberCMS to highlight texts in a table row to look like the STATUS example in the UI guide?

Use listInjectRowClass method override.

Hi @daftspunk, thanks for pointing me to listInjectRowClass method.

It works for adding CSS classes for rows on the main model (on the list page), whereas the Status column example in the UI style would apply to a table column and not for the whole row.

Questions:

1) Is the cssClass property deprecated then? Is there any other way to programmatically add CSS classes to table columns?

2) Using the listInjectRowClass method how could I add classes to a relation table displayed on a preview form? Since the listInjectRowClass is defined in the controller level and my plugin has only one controller with a list and a preview form, I couldn't figure out how to apply a row style to the relation table.

Last updated 9 years ago