How do I customize the background color on the Driving Distance widget?

  • Profile Image
    writeitright
    Asked on April 19, 2016 at 12:01 AM

    Because my forms use a black background and the font color used by the driving distance widget is also black, the text is not visible on my website.

    Could you please help me with a work around?

  • Profile Image
    Nik_C
    Answered on April 19, 2016 at 04:40 AM

    You can do that by going to your Driving Distance widget wizard:

    And then to Custom CSS:

    You can paste this code there:

    #ddForm {

    background-color: red;

    }

    To change the background of the widget.

    I put red, but feel free to change to any color that suits you.

    Please let me know if you have further questions.

    Thank you!

  • Profile Image
    writeitright
    Answered on April 19, 2016 at 04:16 PM

    Thank you! Your solution works to change the background of the entry field, but it does not change the background of the field that populates to display the calculation. 

    Here's what it looks like when the user provides the departure city/destination for calculation:

    Here's what it looks like when the user clicks the Calculate button:

  • Profile Image
    Boris
    Answered on April 19, 2016 at 05:35 PM

    In order to change the background of the results as well, you should use #ddResult selector in your CSS. Your custom CSS would end up looking like this:

    #ddForm, #ddResult {
    background-color: grey;
    }

    This will force the results/calculation to look the same as the initial page of the Driving Distance widget. If you want to have different color background for each of these two pages, then you can use custom CSS such as this:

    #ddForm {
    background-color: grey;
    }
    #ddResult {
    background-color: lightgray;
    }

    Please let us know if you need any further assistance.