List Class for Sf-List

[eknopf]

Hi There
I am wanting to style my shortcode list uniquely apart from the my standard override.

Here is the custom css class i have added in my child theme.

.sf-list.black li {
padding: 0;
line-height: 175%;
color: #000;
font-size: 16px;
}

Except, I cant find how to add that additional subclass “black” on the shortcode.

In Chrome Inspector, if I add the additional class “black” on the sf-list class, it works — ex: <ul class=”sf-list black”>

I just dont know how to apply this class to the list shortcode properties. Its not in the window options like some other shortcodes. Here is my shortcode I am using.

[list]
[list_item icon=”fa-ban”]Contracts[/list_item]
[list_item icon=”fa-ban”]Setup Fees[/list_item]
[list_item icon=”fa-ban”]Termination Fees[/list_item]
[list_item icon=”fa-ban”]Long Term Commitments[/list_item]
[list_item icon=”fa-ban”]Outsourced Customer Support[/list_item]
[/list]

I have tried the other convention with othershort codes, like:

[list_item icon=”fa-ban” extraclass=”black”]Contracts[/list_item]

But that doesnt work. :-/

Any help would be great.

[Rui Guerreiro – SUPPORT]

Hi,

Give it a try using this format.

[list_item icon="fa-ban black"]Contracts[/list_item]

Let us know the result.

-Rui

[eknopf]

No, unfortunately that did not work.

Any other suggestions?

[eknopf]

I was able to figure it out with a buddy’s help.

I used your extra class suggestion: [list_item icon=”fa-ban black”]Contracts[/list_item]

then my css was

.sf-list .fa-ban.black,
.sf-list .fa-ban.black + span {
color: #000;
}

[Mohammad – SUPPORT]

Hi,
I am glad that you managed to resolve the issue.
Thanks
Mohammad