What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change colours of Visual MultiSelect?

    Asked by Benflips on July 10, 2016 at 08:42 PM

    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

    Page URL:
    https://www.jotform.com//?formID=43420990799871#

    visual Properly current use Them
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 11, 2016 at 01:15 AM

    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.

  • Profile Image

    Answered by Benflips on July 11, 2016 at 02:46 AM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 11, 2016 at 04:34 AM

    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.

  • Profile Image

    Answered by Benflips on July 11, 2016 at 11:45 PM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 12, 2016 at 12:09 AM

    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; 

    }   

  • Profile Image

    Answered by Benflips on July 13, 2016 at 10:42 PM

    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?

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 14, 2016 at 01:24 AM

    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.

  • Profile Image

    Answered by Benflips on July 14, 2016 at 02:07 AM

    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!

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 14, 2016 at 03:46 AM

    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. :)

  • Profile Image

    Answered by Benflips on July 17, 2016 at 03:45 AM
    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)
    ...
  • Profile Image

    Answered by Benflips on July 17, 2016 at 03:45 AM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 17, 2016 at 10:28 AM

    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;

    }

     

  • Profile Image

    Answered by Benflips on July 17, 2016 at 06:45 PM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 17, 2016 at 09:44 PM

    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;

    }

  • Profile Image

    Answered by Benflips on July 17, 2016 at 10:45 PM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 18, 2016 at 01:54 AM

    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;

    }

  • Profile Image

    Answered by Benflips on July 18, 2016 at 03:45 AM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 18, 2016 at 05:06 AM

    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.

  • Profile Image

    Answered by Benflips on July 18, 2016 at 06:45 AM
    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)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 18, 2016 at 08:07 AM

    Hi Benflips,

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

    Cheers!