date picker color / colour

  • Profile Image
    letwithease
    Asked on February 05, 2012 at 09:56 AM
  • Profile Image
    abajan
    Answered on February 05, 2012 at 11:38 AM

    If you're referring to this element, the form's source would have to be embedded into a web page and the image's URL changed from https://www.jotform.com/images/calendar.png to that of the image to be substituted.

  • Profile Image
    letwithease
    Answered on February 05, 2012 at 11:53 AM

    Thank you for your response Abajan

    Its more the use of this colour for the month/year - can it be changed?

  • Profile Image
    abajan
    Answered on February 05, 2012 at 12:18 PM

    Firebug suggests that it's possible. I'll see if I can provide the CSS that would need to be injected a little later.

  • Profile Image
    letwithease
    Answered on February 05, 2012 at 12:36 PM

    cool thanks Abajan

  • Profile Image
    abajan
    Answered on February 05, 2012 at 01:51 PM

    Okay, to change the orange color of those elements (plus the grey mentioned in your opening post) inject the following CSS:

    .calendar.popup
    table thead tr td {
    color: #090;
    }

    .calendar.popup
    table thead tr + tr + tr th {
    background: #000;
    color: #FFF;
    }

    The above rules would make the calendar pop-ups in your form look like that in the screenshot below:

    (Click screenshot to view live form)


    The first rule changes the orange heading elements and the second the headings for the days of the week. Substitute the colors of your choice for #090 (green), #000 (black) and #FFF (white). Firebug also shows that the colors of highlighted days (those that fall within weekends and those that don't) can also be changed. It appears that the selector to change the highlight color for Saturdays and Sundays is .selected.today.weekend and for the other days it's .selected.today but I would need to run tests to confirm that those are the correct classes to target.

  • Profile Image
    abajan
    Answered on February 05, 2012 at 02:06 PM

    After studying the CSS a bit more, I think that the all of the current days are classed as simply today and the light blue background of the weekends can be changed by targeting the weekend class. But, like I said, tests would have to be done to confirm my assumptions.

  • Profile Image
    letwithease
    Answered on February 05, 2012 at 04:05 PM

    This is Awesome thanks Abajan.

    I can't get the .today classes to work - tried a few different things but not a biggy for me now the orange text is sorted

    again thanks, you guys offer such good support!

  • Profile Image
    abajan
    Answered on February 05, 2012 at 04:10 PM

    Glad to help, letwithease.

    I'll see if I can figure out the rules required to change the remaining elements and get back to you if/when I do.

  • Profile Image
    abajan
    Answered on February 05, 2012 at 06:09 PM

    Here's what I've been able to find out so far: At the very bottom of the main JotForm forms stylesheet are all of the rules that control every aspect of the appearance of the pop-up calendar. Here they are (slightly edited for clarity) :

    div.calendar {
    color: #000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    }

    div.calendar.popup {
    margin-left: -40px;
    margin-top: -100px;
    z-index: 100000;
    }

    div.calendar
    td.weekend {
    background: #B5CFE9;
    }

    div.calendar .today {
    background: #F9621A !important;
    }

    div.calendar .title,
    div.calendar .button {
    color: #F9621A;
    }

    div.calendar table {
    background-color: #EEE;
    border: 1px solid #AAA;
    border-collapse: collapse;
    }

    div.calendar thead {
    background-color: #FFF;
    }

    div.calendar td,
    div.calendar th {
    font-size: 11px;
    padding: 3px;
    text-align: center;
    }

    div.calendar
    td.title {
    font-weight: bold;
    }

    div.calendar th {
    background: #DDD;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    font-weight: bold;
    color: #555;
    }

    div.calendar tr.days td {
    width: 2em;
    color: #555;
    text-align: center;
    cursor: pointer;
    }

    div.calendar tr.days td:hover,
    div.calendar td.button:hover {
    background-color: #34ABFA;
    cursor: pointer;
    }

    div.calendar tr.days td:active
    div.calendar td.button:active {
    background-color: #CDE;
    }

    div.calendar tr.days td.selected {
    font-weight: bold;
    background-color: #FFF;
    color: #000;
    }

    div.calendar tr.days td.today {
    font-weight: bold;
    color: #D50000;
    }

    div.calendar tr.days
    td.otherDay {
    color: #BBB;
    }


    The 4th rule styles the background of the today class. You'll notice that its declaration ends with the !important keyword. My guess is that that's at least one of the reasons for your being unable to style the class (assuming it's its background to which you were referring). In order to override the effect of !important, it must also be included in the injected CSS. If the source of any JotForm form containing injected CSS is viewed, you'll see that the injected CSS always follows the default CSS. This brings us to one of the characteristics of Cascading Style Sheets: The Cascade. (See also !important Declarations)

    The following rules added to the injected CSS I gave in my previous post should do the trick:

    div.calendar .today {
    background: #090 !important;
    color: #FFF;
    } 

    div.calendar tr.days td.today {
    color: #FFF;
    }

    (Change #090 and #FFF to suit your tastes.)

  • Profile Image
    letwithease
    Answered on February 06, 2012 at 04:33 AM

    Wow, again thanks abajan - I have now managed to change everything required. you have been very helpful!!

  • Profile Image
    abajan
    Answered on February 06, 2012 at 04:38 AM

    You're quite welcome :)

    I actually learned quite a bit in the process myself. I didn't know that so many rules controlled the appearance of the calendar.


    Cheers