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

  • Profile Image
    coseminary
    Asked on November 18, 2016 at 09: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

  • Profile Image
    Helen
    Answered on November 19, 2016 at 02: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.

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


    Everything works properly , as you can see below:

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

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