Appointments+ plugin

Unable to get css to apply.

Hi,
I was hoping to follow another users query on the main wordpress support site as described here... https://wordpress.org/support/topic/styling-of-buttons-fonts-etc?replies=16
However none of the CSS mentioned is applying, it just does nothing.
I was hoping to get the plugin to blend in with the current theme, as at the moment it looks shabby.

http://polished-pinkies.co.uk/booking/

Thanks in advance.

  • Predrag Dubajic

    Hey Darrin,

    Hope you're doing well today :slight_smile:

    Can you give us some more info about the changes you want to make to your appointments page?

    Here's some CSS that should change the input and button to fit in with your theme:

    .appointments-confirmation-wrapper input[type="text"] {
        width: 60%;
        width: 40%;
        border: 1px solid #eee;
        padding: 15px;
        margin: 0 8px 8px 0;
        -moz-box-shadow: inset 0 0 5px #f1f1f1;
        -webkit-box-shadow: inset 0 0 5px #f1f1f1;
        box-shadow: inset 0 0 5px #f1f1f1;
    }
    
    input.appointments-confirmation-button {
        width: 76%;
    }
    
    .appointments-confirmation-buttons input {
        width: 49%;
        font: 400 20px/24px 'Roboto', sans-serif;
        text-transform: uppercase;
        background-color: #f00a77;
        border: none;
        color: #ffffff;
        padding: 8px 15px;
        cursor: pointer;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        width: 22%;
        float: left;
    }
    
    .appointments-confirmation-buttons input:hover {
        background: #343434;
    }

    Best regards,
    Predrag

  • Darrin

    Hi Predrag,

    I'm doing okay thank-you.

    Thanks for the quick response and supplied code, really appreciated. I've applied the css and appears to be working, and the buttons are exactly what I am looking for in terms of colour and design.
    One question, is there anyway to change the spacing between confirm and cancel buttons, or edit the text within as "Please click here to confirm this appointment" is quite lengthy and appear to be overlapping each other.

    I think the changes I would like to make are similar to this page...
    http://www.newedgemarketing.co.uk/one-on-one/?wcalendar=1467331200#app_schedule
    It just looks a little more spaced out if that makes sense, more roomy :slight_smile: Maybe that is down to the font I am using (Arimo) that came with theme? It looks a little small to me generally for reading purposes. And the days of the week appear to be styled too, to match the theme which I would like.

    Thanks

  • Predrag Dubajic

    Hi Darrin,

    Oh, my mistake about the buttons, I missed the code a bit, please replace this part:

    input.appointments-confirmation-button {
        width: 76%;
    }

    With this one:

    .appointments-confirmation-buttons input.appointments-confirmation-button {
        width: 76%;
        margin-right: 2%;
    }

    This will resize the button and create a space between them, if you still wish to change the text you can edit your appointments page and change the app_confirmation shortcode to look like this:
    [app_confirmation button_text="ENTER_BUTTON_TEXT_HERE"]

    As for the page being more roomy, this is something that depends on your theme, the current page width is set to 760 pixels, I'm guessing this is due to theme page template, if there's an option to select different page width appointments form will fill it in on its own by making it wider.

    Current day font is also coming from the theme, it's the font defined for tables, you should be able to override it with this CSS:

    .entry-content .app_monthly_schedule_wrapper table th {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.