How can we style the calendar popup to match the rest of the site?

  • Profile Image
    multicoastmedia
    Asked on February 03, 2015 at 05:40 PM
    1 I want to style the popup calendar colors to match the site. It doesn't have to be perfect, just less orange! The theme is mostly navy blue and grey. I have tried injecting CSS for the properties that affect the calendar, even adding the !important; attribute to ensure it's applied, but nothing changes.  You should know it is being used on a Weebly site but I do CSS trickery alot and it usually works. I'd be happy to even let someone on the forum log in to see the code if necessary.   
  • Profile Image
    Welvin
    Answered on February 03, 2015 at 07:07 PM

    Hi,

    For the Month and Year, the arrows for navigating months and years colors, inject the following custom CSS codes:

    div.calendar .title, div.calendar .button {

    color: #3F454A !important;

    }

     

    For the "Todays Background" color, use the following custom CSS codes:

    div.calendar .today {

    background: #B2A6A6 !important;

    }

     

    For the "Todays" date text color, use the following custom CSS codes:

    div.calendar tr.days td.today {

    color: #E0E0E0 !important;

    }

     

    Inject the custom CSS codes to the form by following this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Here's an example form with the changes in colors: http://www.jotformpro.com/form/50337030628953.

    Thanks