Can I change the colors on the date reservation widget?

Can I change the colors on the date reservation widget?

Yes, you can change the colors on the date reservation widget.

To do that, click the Widget Settings button. Go to the CSS tab and paste the CSS there.

 I have written some CSS code for you that matches the page colors.

.ui-widget-header {

    background: #ff5065 !important; 

}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {

    color: #fff;

    border: 1px solid #ef4055;

    background: #ff5065 !important; 

}

.ui-state-hover,

.ui-widget-content .ui-state-hover,

.ui-widget-header .ui-state-hover,

.ui-state-focus,

.ui-widget-content .ui-state-focus,

.ui-widget-header .ui-state-focus,

.ui-button:hover, .ui-button:focus {

    color: #fff;

    border: 1px solid #00d3d3;

    background: #ff5065 !important; 

}

That's how it would look after you add the CSS:

Hi, Thanks for that, but there seem to be fields missing.... I can't control the chosen date color (I can only control today's date color...)

Can you please send me the complete css of the original date reservation colors? That way I can find what I need and change the colors myself.

Let me know thanks!

Hello,

Please add this CSS code into your form:

.selected a.ui-state-default {
    font-weight: 700;
    border: 1px solid #ff5065 !important;
    color: #ff5065 !important;
    background:  #fff;
}

This is the sample output of a calendar with a selected date:

We could not provide a direct CSS code of all available values for the widget because we do not have the code in itself, and all of it are coming from a jquery library and we are just looking for details when needed.

You can try exploring the CSS codes when pressing selecting the element and pressing right-click on your mouse and select 'inspect' for Chrome, 'Inspect Element' for Firefox, then explore the codes that ran on highlight, selected, or anything that was created at the time of process of the page

In any case, feel free to simply notify us if there is a specific thing that you need for us to look for or change.

Thanks.

Thanks a lot!
There's only 1 thing missing, how do I control the color of the
pre-selected date (the default is today) I'd like a custom css to be able
to change the color and also an option to completely remove this option,
and have no date preselected at all?
Is both possible?
Thanks!
Mike Taylor
Customer Support
Buy More Fans
buymorefans.com

Facebook Likes
Instagram Followers
Instagram Likes for photos (Automatic)

Twitter Followers
...

Please inject the following custom css code to completely remove the pre-selection option:

a.ui-state-default.ui-state-highlight.ui-state-active.ui-state-hover {

    background: none !important;

    border: 1px solid #ccc;

    font-weight: bold;

    color: #1c94c4;

}

Please inject the following custom css code in widget to change the background color:

a.ui-state-default.ui-state-highlight.ui-state-active.ui-state-hover {

    background: #f6f6f6 !important;

    border: 1px solid #ccc;

    font-weight: bold;

    color: #1c94c4;

}

The following guide should help you how to inject custom css code in widget:   https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

Hope this helps.

Do get back to us if you have any questions.