-
buymorefansAsked on December 28, 2017 at 8:11 AM
Can I change the colors on the date reservation widget?
-
AdrianReplied on December 28, 2017 at 8:15 AM
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:
-
buymorefansReplied on December 28, 2017 at 11:29 PM
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!
-
liyamReplied on December 29, 2017 at 5:01 AM
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.
-
buymorefansReplied on December 29, 2017 at 9:43 PMThanks 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
... -
Ashwin JotForm SupportReplied on December 30, 2017 at 3:23 AM
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.