Dynamic Field - dynamic color - Forum | JoomShaper
Staff replied SP Page Builder

Dynamic Field - dynamic color

Asked by Hansis 10 months ago Last activity 9 months ago

Hello

I have a dynamic page. In a text-field "category" I have values of "OK", "WARNING", "ERROR".
Now I want to change the color of the field:

  • OK -> green
  • WARNING -> yellow
  • ERROR -> red

how can I do this in CSS with option {field:category}

rg
Hansi

5 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
10 months ago

Hi

Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?

-Regards.

Hansis Asked this
10 months ago

Style> Miscellaneous:
CSS Class:
testcss {field:category}
Custom CSS:
testcss.OK { color:green; }
testcss.WARNING { color:yellow; }
testcss.ERROR { color:red; }

I hope these information help you.

Mehtaz Afsana Borsha Staff
9 months ago

Please make sure you have a full site backup before making any changes.

In the Text content, wrap your dynamic field

Replace {field:category} with this:

<span class="status-label" data-status="{field:category}">{field:category}</span>

And then add your CSS in your custom.css file

#sppb-addon-54be558b-2a26-4186-8fec-4e64c1bdaf4b .status-label[data-status="OK"]{
  color: green !important;
}

#sppb-addon-54be558b-2a26-4186-8fec-4e64c1bdaf4b .status-label[data-status="WARNING"]{
  color: yellow !important;
}

#sppb-addon-54be558b-2a26-4186-8fec-4e64c1bdaf4b .status-label[data-status="ERROR"]{
  color: red !important;
}
Atick Eashrak Shuvo Staff
9 months ago

Hello Hansis,

Sorry for the inconvenience. Unfortunately, achieving this by default isn't possible. However, it might be achievable using custom CSS and JavaScript. If you'd like assistance with that, please create your collection and listing first, then let me know, and I'll be happy to help.

We appreciate your patience and understanding.

Best regards

Log in to reply.