Adding Class to CC5

Add conditional CSS classes to table cells in ChronoConnectivity 5.

Overview

The issue is needing to style table cells dynamically based on their content, such as coloring text green for "YES" and red for "NO".
Use the HTML box in the CC5 settings to wrap the field value in a span with a class that includes the field's content, enabling custom CSS styling.

Answered
bo bon-ja-mon 19 Mar, 2016
Hi

I have a CC5 table that I want to style and I think I need to find a way to dynamically add Classes.

For example if a field could contact the word YES or NO, I would like to be able to make the text Green or Red to draw attention to them.

I can see all the fields in the table have Classes but I cant see how I could use them to achieve the above.

Thanks
Gr GreyHead 20 Mar, 2016
Answer
Hi bon-ja-mon,

I haven't tested this but there are two ways you could do it.

In ChronoConnectivity you could use the HTML box to add an entry where the class depends on the value something like this
content.yes_no:<span class='aa_{content.yes_no}'>{content.yes_no}</span>

Or, you could use JavaScript to add the classes or styles after the page loads.

Bob
bo bon-ja-mon 21 Mar, 2016
Thanks (again) Bob !

I used the code:

content.yes_no:<span class='aa_{content.yes_no}'>{content.yes_no}</span>


in the HTML box on the CC5 settings tab and it works a treat.

Cheers
This topic is locked and no more replies can be posted.