Change colours of Visual MultiSelect?

I know this widget has four provided themes.

Is there manual CSS I can use to alter these colours? None of them properly fit my current theme design

It is indeed possible to inject custom css to your visual multi select field. Do you have certain colors for the widget in mind? Do let us know and we will be glad to help you inject css to the widget. I will wait for your response.

Just something that will more or less match the whites and blues I am
currently using.
Or, a partially transparent version of the purple or green I have used -
hex is in the designer...
Ideally the third multi select would have a different colour scheme to
differentiate it from the other 2.
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

You can inject the custom css below into the Custom CSS tab of the Visual Multi Select widget to change its colors. You can also change the values of the yellow highlighted text to change it to your preferred colors. In the css below, I have set the header a transparent purple value and the list with a light green color.

/*header*/

.custom-header {

    background: rgba(84, 33, 197, 0.39)!important;

    border: 1px solid rgba(84, 33, 197, 0.39)!important; 

}

/*list*/

.OliveGreen .ms-container .ms-selectable li.ms-elem-selectable, .OliveGreen .ms-container .ms-selection li.ms-elem-selection {

    background: #aaeb0f!important;

}

/*scroll bar*/

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {

    width: 6px;

    background: #aaeb0f!important;

}

 

If you need further assistance, please let us know.

Thank you. That looks pretty cool.
For some reason the header text is smaller on my viewing that in your
example.
Is that because of some other CSS I've input somewhere else?
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

You are most welcome. I checked the header font-size and it seems to be the same as before. If you like, you can set a fixed font size to make sure the size stays the same. Simply add the font-size: 12px below into the .custom-header section of the css we injected previously.

.custom-header {

    font-size: 12px;

    background: rgba(84, 33, 197, 0.39)!important;

    border: 1px solid rgba(84, 33, 197, 0.39)!important; 

}   

Hi. I've stuffed up the first one, trying to alter the colour slightly.

Can you please keep that solid lime green for the slider, but provide the correct hex or rgb to have the more transparent green for the back of the list?

And can we make that revolting khaki colour on the slider background maybe the same as the slightly transparent purple of the headings?

Finally, is it possible to increase the width of both slider lists so that we can then have the text in both the headings and the list options maybe a point (or two) larger?

Please inject the code below to the custom css of the widget.

/*rgb green for list*/

.OliveGreen .ms-container .ms-selectable li.ms-elem-selectable, .OliveGreen .ms-container .ms-selection li.ms-elem-selection {

    background: rgba(170, 235, 15, 0.46)!important;

}

/*slider dragger */

.mCSB_scrollTools .mCSB_dragger {

    background: none!important;

 

}

/* purple slider background */

.mCSB_scrollTools .mCSB_draggerContainer {

    background: rgba(84, 33, 197, 0.60)!important;

 

}

To increase the width of the sliders, simply edit the value of the width in the properties.

Thank you. I've applied those changes and I'm mostly happy with the result.

How can I increase the text size of both the options and the headings? Probably only by one more point, at max, 2.

And the bright green slider looks great, but the top and bottom arrows and the khaki background of the slider looks crappy - can I have the top/bottom arrows the same bright green as the slider, and the background of the slider to be maybe white, or even tranparent (if that looks any good)?

Thanks in advance.

I truly love how responsive you guys are. It is a phenomenal service you provide!

You can inject the custom css to increase the font size of both the options and the headings. 

.ms-container {

    font-size: 13px!important;

}

Then to change the color of the slider, use the custom css below:

.OliveGreen .mCSB_draggerRail {

    background: transparent!important;

 

}

.OliveGreen .mCSB_buttonDown, .OliveGreen .mCSB_buttonUp {

    background: #aaeb0f!important;

 

}

.OliveGreen .mCSB_scrollTools {

    background: transparent!important;

 

}

On behalf of my colleagues, we thank you for your feedback. Cheers. :)

I just tried to experiment with the above in input 415 changing the colours.
It didn't work so well...can you please help?
I still want the arrows to appear (and maybe even have them the bright
green on the dark purple with no transparency - #411a99).
Not sure what I've done!
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

I also still want the different colour slider 'rail' I just don't want it
the poxy khaki colour! It seems that code has made that 'rail' transparent
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Hi,

Please try replacing this CSS

.OliveGreen .mCSB_buttonDown, .OliveGreen .mCSB_buttonUp {

    background: #aaeb0f!important;

}

with this

/* bright green arrows */

.OliveGreen .mCSB_buttonDown, .OliveGreen .mCSB_buttonUp {

    background: #aaeb0f !important;

}

 

To remove the khaki color in the rail, please inject the following code.

.OliveGreen .mCSB_dragger, .OliveGreen .mCSB_draggerContainer, .OliveGreen .mCSB_draggerRail, .OliveGreen .mCSB_scrollTools {

background: none !important;

}

 

I've applied the first piece of code - I now have the bright green squares,
but still not the white arrow symbols.
You will note that I already have removed the khaki rail from an earlier
piece of code, it appears to have gone transparent because now all we see
(as per your screenshot) is the purple background.
What I wanted to know was, how can I make that rail a different colour -
ie, some other colour than khaki.
Do I change below: background: none !important; to background: #colorcode
!important; ??
*.OliveGreen .mCSB_dragger, .OliveGreen .mCSB_draggerContainer, .OliveGreen
.mCSB_draggerRail, .OliveGreen .mCSB_scrollTools {*
*background: none !important;*
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

To change the color of the up and down button and the arrows within, please inject this code:

/* change color up and down button */

.OliveGreen .mCSB_buttonDown, .OliveGreen .mCSB_buttonUp{

     background: #aaeb0f;

}

/*make white arrow more visible*/

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp{

opacity: 1;

}

As for the color of the rail, simply inject the code below. The current color is white, but you can simply replace it with your preferred color.

/*change color of rail*/

.OliveGreen .mCSB_draggerRail {

    background: #fff!important;

}

I've done most of your code but the white arrows are still not
showing...could you please check that I have done the last suggested bit of
code correctly?
input 415 is the one I've been experiementing with...
Thanks
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Please inject this custom css to your widget.

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp{

background-image: url(../img/mCSB_buttons.png)!important;

}

And remove this css from the code:

.OliveGreen .mCSB_buttonDown, .OliveGreen .mCSB_buttonUp{

     background: #aaeb0f;

}

That didn't work - now they are black, and still no arrows!
I think the code I deleted was right for the purple background I wanted (or
to be able to change later) but I want to know how I get teh white (or
another colour) ^ and down arrow image
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Can you please remove the previous code we inserted as seen here:

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp{

background-image: url(../img/mCSB_buttons.png)!important;

}

and then replace it with the code below:

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {

    background-image: none;

    background: #aaeb0f; /*color of button*/

}

The arrow is an image, so we will not be able to change it's color. Here's how it should look after. Please let me know if the issue still persists.

Wow, thank you. What a process. This finally appears resolved!
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Hi Benflips,

Glad to hear it is resolved. You are welcome. Don't hesitate to contact us again if you need further assistance.

Cheers!