Injection on Text Color and Header With Visual Multi Select Widget

  • Hangchanleakna
    Asked on September 17, 2018 at 5:16 AM

    Injection on Text Color and Header With Visual Multi Select Widget Image 10

    hi , 

    how to change the colour of the text to be in light red and the header " Options " , seleted" to be in White  Colour with light red background ? 

    I need your help on the injection. 


    thanks  

  • Utku JotForm Developer
    Replied on September 17, 2018 at 6:58 AM

    Hi,

    I cloned your form and made some changes on Visual Multi Select widget.

    Select "Visual Multi Select" widget then open widget settings. You can modify CSS from "Custom CSS" tab.

    If you don't know CSS, change $1 with desired text color and $2 with desired background color in following CSS code then paste it to textfield in "Custom CSS" tab.


    .custom-header{
       color: $1;
       background-color: $2 !important;
    }

    1537180747Screen Shot 2018 09 17 at 13 Screenshot 10

    With CSS, colors can be specified in different ways:

       By color names
       As RGB values
       As hexadecimal values
       As HSL values

    You can get detailed information about CSS colors from: https://www.w3schools.com/colors/default.asp

     

    First code will change both headers but if you want to change headers' appearance separately you can use following CSS codes.

    Left Column's Header
    .ms-selectable .custom-header{
       color: $1;
       background-color: $2 !important;
    }
     
    Right Column's Header
    .ms-selection .custom-header{
       color: $1;
       background-color: $2 !important;
    }

    Inform us if you need further help

    Thanks.

  • Hangchanleakna
    Replied on September 18, 2018 at 12:33 AM

    hi , 

    it works now , 

     

    thanks you so much :)