Styling of buttons fonts etc

Hey there newedgemarketing,

Glad to hear that you like our plugin ??

These changes should be possible to do with some custom CSS. You can add custom CSS to Appointments custom CSS tab which is located in Appointments -> Settings -> General -> Display Settings -> Additional css rules, see screenshot https://screencast.com/t/fuDC8AJPly or you can add it in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

To change the size of the appointments h3 please try adding the following:

.appointments-wrapper h3, .appointments-confirmation-wrapper h3 {
    font-size: 22px;
}

I increased the size of it to 22px, you can change the numeric value to what ever suits your needs.

Changing text “Please click here to confirm this appointment” should be possible by using plugin translation files, even tho you’re not actually translating anything you can change the English version.

If this is the only thing you want to change as an alternative you could use plugin such as this one https://www.ads-software.com/plugins/real-time-find-and-replace/. Simply add text in the backend that you want to change https://screencast.com/t/3It2ijgSd and it will be changed on the front end: https://screencast.com/t/tN2QTWUtlV.

As for making some space between those two buttons please try adding the following CSS:

.appointments-confirmation-buttons input {
    width: 49%;
}

input.appointments-confirmation-button:nth-child(2) {
    margin-right: 2%;
}

This should be the result https://screencast.com/t/JXhKNZFk7.

Hope this helps ??

Cheers,
Bojan

Wow perfect what a great response and works perfectly thank you so much!

I don’t suppose you know how to style the confirmation button to black only do you? I still want hover to be light blue (as is) for both button but the confirm button black and the cancal button the same light grey it is now

Hey again newedgemarketing,

Glad the above worked ??

As for having only confirmation button black with blue hover background color please try adding the following:

.page .content input.appointments-confirmation-button {
    background: #000;
}

.page .content input.appointments-confirmation-button:hover {
    background-color: #71AFDF;
}

Please let me know if this works ??

Cheers,
Bojan

Thanks Bojan just two more things ??

I’d like the styling of the paypal button to be the same as the two buttons above ir and again be black with light blue hover. The fonts for some reason on this button aren’t the same as my others and its not the same size i.e. doesn’t seem to have the same padding etc

Additionally the PLEASE CHECK THE APPOINTMENT DETAILS BELOW AND CONFIRM
section doesn’t appear to work well responsively and is there any way i can get the confirm appointment and cancel button to move onto to different lines when i mobile as they don’t work well on mobile either

In addition also the paypal doesn’t respond well on mobile its seem really same on mobile like 50% width instead of 100%

Hi Bojan i just though I’d add this image to illustrate the problem

Hey again newedgemarketing,

I couldn’t see any image there ??

Please try adding the following CSS. This will center the paypal button on bigger resolutions and also add the same styling as for above buttons and also fix how it is displayed on smaller resolutions and make all buttons looks the same:

input.app_submit_btn.app_not_loggedin {
    background: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-shadow: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.app_submit_btn:hover {
    border: none;
}

@media (max-width: 600px) {
.appointments-confirmation-buttons input {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
    width: 100%;
    max-width: 280px;
}

input.app_submit_btn.app_not_loggedin {
    width: 100%;
    max-width: 280px;
}
}

Not really sure what you mean with Additionally the PLEASE CHECK THE APPOINTMENT DETAILS BELOW AND CONFIRM. Can you please add that screenshot so I can understand what you’re trying to do.

Best regards,
Bojan

Thanks again Bojan

This partly works the app confirm and cancel button now move to two lines on smaller screen sizes.

But the pay pal changes don’t work except for the change you made to the hover that works. I’ve also noticed that when i add the font-family change for the paypal button it adds two backwards slashes to the css (see below) I haven’t added these it keeps putting them there no matter what i do. But the width for this button hasn’t changed neither has the font family or size. ;( I am going to give you a million stars after this though ??

.entry-content td{border:none;width:50%}

.appointments-wrapper h3, .appointments-confirmation-wrapper h3 {
    font-size: 22px;
}

.appointments-confirmation-buttons input {
    width: 49%;
}

input.appointments-confirmation-button:nth-child(2) {
    margin-right: 2%;
}

.page .content input.appointments-confirmation-button {
    background: #000;
}

.page .content input.appointments-confirmation-button:hover {
    background-color: #71AFDF;
}

input.app_submit_btn.app_not_loggedin {
    background: #000;
    font-family: \'Open Sans\', sans-serif;
    font-size: 16px;
    text-shadow: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.app_submit_btn:hover {
    border: none;
}

@media (max-width: 600px) {
.appointments-confirmation-buttons input {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
    width: 100%;
    max-width: 280px;
}

input.app_submit_btn.app_not_loggedin {
    width: 100%;
    max-width: 280px;
}
}

[Please wrap code in the tick brackets. It makes it much easier on the eyes! – Justin]

Hey again,

For some reason the code is not being applied properly. Please try replacing this part of code:

input.app_submit_btn.app_not_loggedin {
    background: #000;
    font-family: \'Open Sans\', sans-serif;
    font-size: 16px;
    text-shadow: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

with this one:

.page .entry-content input.app_submit_btn {
    background: #000;
    font-size: 16px;
    text-shadow: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-family: "Open Sans", sans-serif;
}

.page .entry-content input.app_submit_btn:hover {
    background: #71AFDF;
}

And also replace this part of code:

@media (max-width: 600px) {
.appointments-confirmation-buttons input {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
    width: 100%;
    max-width: 280px;
}

input.app_submit_btn.app_not_loggedin {
    width: 100%;
    max-width: 280px;
}
}

with this one:

@media (max-width: 600px) {
.appointments-confirmation-buttons input {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
    width: 100%;
    max-width: 280px;
}

.page .entry-content input.app_submit_btn {
    width: 100%;
    max-width: 280px;
}
}

I’ve added more specificity for the paypal button so the code should work now. Please let me know how that goes and sorry for the long post.

Cheers,
Bojan

Hi Bojan

Thats pretty much perfect it still seems to be having a little trouble with the font for some reason, putting those brackets in but its barely noticeable probably only by me.

I can’t believe the level of support you’ve provided for this plugin not only super quick turn around but actually giving me copy-paste code to drop into the plugin.

So so helpful I can’t thank you enough.

I’ve left a good review on the plugin page. And have will not hesitate in recommending this plugin.

Great jobs, great plugin and if this is not your company, you deserve a pay rise ??

Thanks, Bojan!

Hey again,

Thank you for the kind words and for being willing to write a review for our plugin ??

After some testing this appears to be an issue with the plugin custom CSS tab, the fix is quite simple and it will require changing only one line of code, I’ve already notified our plugin developer so he can include this in the following version of the plugin.

As a temporary solution until this is fixed what you can do is install https://www.ads-software.com/plugins/simple-custom-css plugin, once the plugin is activated please add the following to Appearance -> Custom CSS.

.page .entry-content input.app_submit_btn {
    font-family: "Open Sans", sans-serif;
}

This should fix the issue with the font.

If you want to make a change in the plugin to fix this you can do it by changing the line 4160 in appointments.php which is located in the root folder of the plugin.

The line you need to replace looks like this:

echo $this->options['additional_css'];

Replace that line with this one:

echo stripslashes($this->options['additional_css']);

Hope this helps ??

Cheers,
Bojan

PERFECT I already had custom CSS installed so very quick fix, Thanks again Bojan!!!

Glad I could help ??

Cheers,
Bojan

How can I make the calendar appear larger on the page?

Hey there hlipscomb022,

We should be able to do so with custom CSS. Can you please open your own thread and post link to your site and also add more information on how big you’d want the calendar to be and I’ll be happy to help ??

Cheers,
Bojan