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 http://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:

http://wordpress.org/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://wordpress.org/plugins/real-time-find-and-replace/. Simply add text in the backend that you want to change http://screencast.com/t/3It2ijgSd and it will be changed on the front end: http://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 http://screencast.com/t/JXhKNZFk7.

Hope this helps 🙂

Cheers,
Bojan

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

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

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 http://wordpress.org/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

Glad I could help 🙂

Cheers,
Bojan

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