Look and Feel of Appointment Form's 2 Buttons

Hello Team
For the page here http://picturechesttinytoes.com/make-an-appointment, can you help me change the look and feel of the 2 buttons at the bottom of the form so that they look like the pagination buttons' look and feel? Thanks!

  • Vaughan
    • Support/SLS MockingJay

    Hi William,

    Hope you're well?

    Can you try the following CSS.

    .appointments-confirmation-button,
    .appointments-confirmation-cancel-button {
      background: linear-gradient(to top, #aad75b, #d1e990) repeat scroll 0 0 #d1e990 !important;
      border-color: #636363;
      border-radius: 2px;
      color: #333333 !important;
      font-size: 12px !important;
      line-height: 14px !important;
      padding: 9px 20px !important;
    
    }

    Hope this helps

        • Vinod Dalvi
          • WP Unicorn

          Hi William,

          Thank you for activating the plugin again.

          FYI: It was deactivated because it was inteferring with the dashboard, submenus, etc highlighted in another thread...

          Let's resolve those issues on the other thread created for it.

          Also, can you provide me the CSS for the CANCEL button as well?

          The provided code should work for CANCEL button also but i saw on your site it's not working because you didn't copy the CSS selector from the above code correctly. It should be .appointments-confirmation-cancel-button but you copied it without dot like this appointments-confirmation-cancel-button so please add the dot prefixing the CSS selector so that it will work.

          Can you make the button look like the "Next Month" button?

          Try using the following code replacing the code previously added.

          .appointments-confirmation-button,
          .appointments-confirmation-cancel-button {
            background: linear-gradient(to top, #aad75b, #d1e990) repeat scroll 0 0 #d1e990 !important;
            border-radius: 2px;
            color: #333333 !important;
            font-size: 12px !important;
            line-height: 14px !important;
            padding: 9px 20px !important;
            box-shadow: 0 1px 1px #b2b2b2, inset 0 -1px 2px #f9f9f9, 0 0 0 1px #9b9b9b;
            border-width: 1px;
            text-shadow: 0 1px 0 #fff;
            margin-right: 15px;
          }

          Best Regards,
          Vinod Dalvi

          • William
            • Site Builder, Child of Zeus

            Hi Vinod
            Thank you! I'm very greatful!
            I added the code without replacing any prior code, and it looks like the CANCEL button is looking just like the Request Appointment button (although the Request Appointment button appears to have a black border).
            Did I do it correctly?
            If not, can you elaborate specifically what I need to do with the prior code affecting the Request Appointment button?
            I apologize as I am not savvy at all with anything CSS related.

          • Vinod Dalvi
            • WP Unicorn

            Hi William,

            I added the code without replacing any prior code, and it looks like the CANCEL button is looking just like the Request Appointment button (although the Request Appointment button appears to have a black border).
            Did I do it correctly?

            No you didn't do it correctly.

            You should do it as i have told you in my previous reply that you should add my provided code replacing the code provided in the following reply posted previously so that both code will not conflict.

            https://premium.wpmudev.org/forums/topic/look-and-feel-of-appointment-forms-2-buttons#post-767712

            If you still can't do it then please grant us support staff access so that i can do it myself.

            Regards,
            Vinod Dalvi

  • William
    • Site Builder, Child of Zeus

    Hi Vaughan
    Can you also provide me the CSS for:
    1. Reducing the white space between Make An Appointment title and service drop down
    2. Making the legend title bigger
    3. Aligning the entire legend to the right of the table
    4. Increasing the white space between the "Next Month" button and the Request Form
    5. Increasing the white space between the "Google Calendar" button and the "Request Appointment" button
    6. Controlling the white space between the "Request Appointment" button and the "Cancel" button
    7. Making the text Request Form use the same font and size as the Make An Appointment title

    • William
      • Site Builder, Child of Zeus

      Hi Vaughan
      Can you also provide me the CSS for:
      1. Reducing the white space between Make An Appointment title and service drop down
      2. Making the legend title bigger
      3. Aligning the entire legend to the right of the table
      4. Increasing the white space between the "Next Month" button and the Request Form
      5. Increasing the white space between the "Google Calendar" button and the "Request Appointment" button
      6. Controlling the white space between the "Request Appointment" button and the "Cancel" button
      7. Making the text Request Form use the same font and size as the Make An Appointment title

  • William
    • Site Builder, Child of Zeus

    Hi Vinod
    I replaced your prior code:

    .appointments-confirmation-button,
    .appointments-confirmation-cancel-button {
    background: linear-gradient(to top, #aad75b, #d1e990) repeat scroll 0 0 #d1e990 !important;
    border-color: #636363;
    border-radius: 2px;
    color: #333333 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    padding: 9px 20px !important;

    }

    using ...

    .appointments-confirmation-button,
    .appointments-confirmation-cancel-button {
    background: linear-gradient(to top, #aad75b, #d1e990) repeat scroll 0 0 #d1e990 !important;
    border-radius: 2px;
    color: #333333 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    padding: 9px 20px !important;
    box-shadow: 0 1px 1px #b2b2b2, inset 0 -1px 2px #f9f9f9, 0 0 0 1px #9b9b9b;
    border-width: 1px;
    text-shadow: 0 1px 0 #fff;
    margin-right: 15px;
    }

    My observation now is:

    1. The Request Appointment button is now consistent with the rest of the site's buttons (green color), and so that's great! The pagination buttons, however, are inconsistent

    2. The Cancel button has gone back to the way it was originally. Can it be made consistent, as requested previously?

    Thank you so much!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.