Adding Colors (CSS) to results per selected item on form [#2626020]

Hi,

I'm trying to add color to the Results of one of my fields. My field is a select list of items and I'd like to display the results in different colors depending on what item is chosen from the select list.

Use case: I have a Webform with 4 options. I'd like to display "Option 1" in green, "Option 2" in red, etc. (on the Webform Results page (I'm using a Grid view instead of the stock table view to make this form's results a bit more custom-looking).

I've tried creating a CSS class for the field, but that adds the class to the field, and I don't know how to customize the field's CSS at the per item level.

This may be more of a Views question, but since it pertains to a Webform Select List and can (probably) be solved with CSS, I didn't want to post on the Views Issues page.

Any help is appreciated.

Thanks

Comments

Comment #1

30 November 2015 at 20:22

kyleheney created an issue. See original summary.

Comment #2

DanChadwick CreditAttribution: DanChadwick commented 1 December 2015 at 00:16

Status:

Active

» Fixed

Since CSS doesn't have selectors to match content, it appears you'll need some custom javascript for this. Good luck.

Comment #3

kyleheney CreditAttribution: kyleheney commented 1 December 2015 at 00:18

Thanks for the tip. I'll do some research about using JS for this.

Comment #4

kyleheney CreditAttribution: kyleheney commented 1 December 2015 at 13:13

Posting a quick solution for people with questions with simple select options (good for Yes/No questions). This works if you simply have a checkbox that someone checks off if the answer is Yes, and leaves blank if the answer is no. For my form, I'm using this to track if an item is completed (checked off) or not (left blank).

1. Add two CSS classes to your style.css file (or similar css file for your theme).

eg: for Yes answers (checkbox checked off), result will be displayed in Green
.c1 { color: #1CD200; }

and for No answers (blank), result will be displayed in Red
.c2 {color: #FF0000; }

2. For each yes/no field in the Webform Results view:

- Style Settings ---> Add default classes = YES
- No Results Behaviour ----> No ; Hide Rewriting if Empty = YES
- Rewrite Results ----> Rewrite the output of this field ---> Yes

I realize this is a Views tip, but hopefully someone else using Webform can benefit from this simple solution.