Text color of specific text in pricing table

[COK]

I’m using the pricing table as you can see here:

Become a VegWeek Partner or Sponsor!

I’m trying to change some of the text to red, and some to green. normally this can be accomplished with a basic span tag:

<span style="color: #79a93f">Text here</span>

However, when I use this it removes the other styling of my text - for example, in custom css I removed the default “uppercase” setting - this changes disappears when I add this span tag.

can you assist? thank you

[nico]

Hi @COK,

Thanks for writing in.

I have tried the code that you share in your setup and it is working great. Would you mind testing if it is okay already or add a sample of the issue so we verify the problem.

Let us know how it goes.

Thanks.

[COK]

Hi, your screenshot illustrates the issue (all caps, removing my previous formatting).

[jade]

Hi there,

That happens because of this default CSS that is loaded by the renew stack:

.x-pricing-column-info span {
    display: block;
    margin-top: -1px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5a708d;
}

What you can do is to add a class to the span text like this:

<span class="colored" style="color: #79a93f">Text here</span>

Then add this custom CSS:

.x-pricing-column-info span.colored {
    display: inline-block;
    margin-top: 0;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}

to reset the styling.

Hope this helps.

[COK]

I’ve done this and also added the standard x theme shortcode icons:

<span class="colored" style="color: #79a93f">[x_icon type="check-circle"] content here</span>

… in place of these:

[cs_icon_list_item type="check"]content here [/cs_icon_list_item]

and it seems to be working now. Thanks

[friech]

Cool, glad you sorted things out.

Cheers!