What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do I change the colors of the calendar?

    Asked by benjijtucker on October 30, 2013 at 10:44 AM

    Hi the blue and orange of the current calander dosent go well with my site - is there any way i can change this?

    site
  • Profile Image

    Answered by EliezerN on October 30, 2013 at 12:41 PM

    Thanks for contacting us.

    If you want to change the colors blue and orange from the clendar of this form, just insert the next CSS code:

    /*--MONTH, YEAR, TODAY AND BUTTONS--*/

    .title, .button
    {
    color:#454042 !important;
    }

    /*--WHEN HOVERING THE BUTTONS--*/

    .title:hover, .button:hover, div.calendar tr.days td:hover
    {
    background-color:#AC38C9 !important;
    color:#FFFFFF !important;
    }

    /*--WEEKEND DAYS BACKGROUND--*/

    .weekend
    {
    background-color:#454042 !important;
    color:#909693 !important;

    }

    /*--TODAY BACKGROUND--*/

    div.calendar .today
    {
    color:#FFFFFF !important;
    background-color:#1F8505 !important;

    }

    Your form will look in this way:

    I cloned your form and made the changes, here is my form and you can see in real time how the changes work: http://form.jotformpro.com/form/33025259836962

    I gave it those colors to show you that it is possible to change it, now, you can choose the colors you prefer from THIS LINK, just copy and paste the values. I have also added descriptions to the code to help you to identify each part of the calendar.

    I hope this helps, however if you need further assistance let us know.

    Thanks

  • Profile Image

    Answered by benjijtucker on October 30, 2013 at 01:14 PM
    THANKS!
    that helps a lot!