Can I change the colors on the date reservation widget?

  • Profile Image
    buymorefans
    Asked on December 28, 2017 at 08:11 AM

    Can I change the colors on the date reservation widget?

  • Profile Image
    Adrian
    Answered on December 28, 2017 at 08: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; 

    }


    1514466855wcss.png


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

    1514466934222222.png

  • Profile Image
    buymorefans
    Answered 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!

  • Profile Image
    liyam
    Answered on December 29, 2017 at 05: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:

    15145409042017-12-29_1747.png

    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

    15145415842017-12-29_1757.png

    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.

  • Profile Image
    buymorefans
    Answered on December 29, 2017 at 09:43 PM
    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
    ...
  • Profile Image
    ashwin_d
    Answered on December 30, 2017 at 03: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.