CB privacy - frontend options part two

CB version 2.1.3
CB privacy version 5.0.0+build.2017.06.20.00.05.14.22261cce9

I have 2 things to resolve, will start a separate topic for each thing.
this is the second 'thing'

Frontend configuration:
Users have control over some fields.
Users have just 2 privacy options 'members' or 'leaders'
Users can select either one or the other or both.
The box heading either says 'members' if members only is selected by the user
The box heading says 'leaders' if leaders only is selected by the user
The box heading says 'custom' if both 'members' and 'leaders' are selected.

The problem:
It is unclear to users what privacy options they have selected.

This could either be solved by changing the word 'custom' to read 'both'
Or by dealing with a problem with the background colours that indicate 'hover' and 'selected'
The previous build of CB privacy that had a 'tick' to show an option is selected would work well.

My efforts so far:
Originally the background colour to indicate an option was 'selected' was so pale grey it was indistinguishable from the unselected option with a white background. I have changed the colour in line 767 of select2.css to make this 'selected' background colour orange, a strong colour to signal to the user that this option is now activated.

Further details about the problem:
The background colours that indicate whether text is selected or being 'hovered' over are confusing.
When the cursor moves away, the background colour does not indicate whether the option was selected or not, the background colour remains as the blue 'hover' colour.
If there were many privacy options this would not be confusing, users would realise the blue colour is just left over by the cursor, it doesn't signify anything.
With only 2 options, it results in a very confusing combination of orange, white, blue backgrounds that will confuse users. They are easily confused.

Please see attached images that show how the dropdown box looks when the cursor moves away.
For each of 3 possible privacy selections (members, leaders, both) I give 2 images, showing what happens when the cursor moves aside, one image the cursor was over 'leaders' before it moves, the other image the cursor was over 'members/registered' before it moved aside
Although each pair of boxes look very different, they actually mean the same thing in terms of privacy option selected!

Desired result A clear indication to the users telling them what privacy options they have selected.
I am happy to alter the file select2.css if you wish to give instructions so that the 'blue' hover colour becomes pale grey.
I tried editing line 771, but this alone does not solve the problem.

thank you

It's styled to match Bootstrap. As it's styled entirely with CSS you can of course override its styling to whatever you want using CSS. You can add your custom CSS to CBs override usage shown below. Do not modify core files as you will lose your changes every time you update CB.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

The selector for the selected state is as follows.

.select2-container--bootstrap .select2-dropdown .select2-results .select2-results__option[aria-selected="true"]

Can be used as follows for example to change the background color.

Thank you for pointing me to write an override instead of editing the select2.css file.

I'm sorry I still have questions:

First question is about creating the override:

I have saved this

.select2-container--bootstrap .select2-dropdown .select2-results .select2-results__option[aria-selected="true"] {
background: orange;
}
.select2-container--bootstrap .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted {
background: white;
color: #333333;
}

in CB > plugin management > default (template type, not language!) > overrides

I would hope this gave an orange background when select=true
And would give grey text over a white background when the cursor hovers over to highlight

Instead I'm getting no changes, the highlight background is still blue, select=true background pale grey.
Like this



Have I missed something silly? I checked the semicolons etc
I would grateful for pointers to get this right before I move on....

Selector is probably too weak. Try the below giving it more weight with .cbPrivacySelectOptions.

Thank you.
That override functions as intended.

I have one (last?) question/suggestion.

In previous builds, the privacy options selected by a user were indicated with a tick mark.
Please would you consider going back to this in future builds, or having it available as an option?

In this particular implementation, where I only present two privacy options to the users, the current highlighting method of indicating a selection is very confusing to the user.....

The confusion arises when the cursor moves away from the dropdown box.
This is what would be good vs what actually happens (as foo-bar examples):

scenario 1
Foo(1): User selects 'members' but not 'leaders' then move cursor away on the page
desired result would be....
Bar(1): Dropdown box shows 'members' highlighted in orange (selected) and 'leaders' in grey (not selected)

What actually happens
User does Foo(1)
Website goes like this
Bar (1a) if the mouse cursor was over the 'leaders' option when it moved away you get this as required

Bar (1b) if the mouse was over the 'members' option when it moved away you get this confusing result


scenario 2
Foo(2): User selects both 'members' and also 'leaders' then move cursor away on the page
desired result would be....
Bar(2): Dropdown box shows 'members' highlighted in orange (selected) and 'leaders' in orange (selected)

What actually happens
Bar(2a) User does foo(2) with mouse last positioned over the word 'members' then moves mouse away.
Dropdown box shows 'leaders' in orange (selected) but members in grey (highlighted)

Bar (2b) User does foo(2) with mouse last positioned over the word 'leaders' then moves mouse away.
Dropdown box shows 'members' in orange (selected) but 'leaders' in grey (highlighted)


I hope I have explained the issue clearly.
It is confusing that the background colours do not communicate 'selection / non-selection' to the user like a tick mark would do, because the behaviour depends on where the mouse was last hovering when it moved away from the dropdown box.

I could make all the backgrounds white and the text gray, for both selection and highlight.
The user would then have to figure out how to toggle on and off each option.
But this isn't very satisfactory, especially if the user toggles both options off, because the title for the box (currently members/leaders/both) is then an empty field.

Please do you have some help with a better way of indicating to the user which privacy combination they have selected, from the two variables they can control.

Please say I haven't explained clearly

Have added a feature ticket to review implementing the checkmark again. The idea was to be consistent with existing dropdown usages, but I agree it should be more clear what privacy rules are selected.

forge.joomlapolis.com/issues/7095