Dual List Widget: How can I change the colors of option?

  • coseminary
    Asked on November 18, 2016 at 9:17 PM

    I want to have some items (courses) in one color and other items in other colors. I want students to pick their own courses but have a minimum number, let's say in New Testament, Old Testament, etc. If I color code them then it will make it easy for them to select. 

    I tried copying in colored items, but just turned them into black. Would this be a CSS thing?

    Thank you for your assistance.  Gary

  • Helen
    Replied on November 19, 2016 at 2:25 AM

    Hi Gary,

    You can change color of options in Dual List Widget. You must inject these CSS codes into your Widget Custom CSS.

    option[value="1. GBTH 520 The Holy Spirit"]{

         color:red;

     }

    option[value="1. GBTH 553 Spiritual Warfare III"]{

         color:blue;

     }

    Follow these steps:

    1. Click wizard button on your widget.

    Dual List Widget: How can I change the colors of option? Image 1 Screenshot 40

    2. Inject your CSS code to "Custom CSS" part.

    Dual List Widget: How can I change the colors of option? Image 2 Screenshot 51

    Everything works properly , as you can see below:

    Dual List Widget: How can I change the colors of option? Image 3 Screenshot 62

    You can add values that you want and change their colors.

    If you have any questions or issue, feel free contact us.