New to the community? Start here

How do I change the look of th ebuttons for the service and service provider

Hello,

To let you know I am just a beginner to WordPress and plugins.

The text for the services and service provider doesn't fit the dropdown. It breaks up the text and I need the text to be displayed fully without it being truncated. How do I change the font and the color of the dropdown text and show available see images

Also I need to change the font and color of the confirmation and the pay button (paypal).

One other thing, I set my working hours from 8:00 am to 12:00pm on a Saturday, however when I click on the day to choose a time it shows the 8 to 11 a free (great) but the issue is it displays not possible times until 3:00pm which is where the issue is. Why do my patients see the other working hours that aren't available. see image.

Thanks,

Peter

[attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

Sat, 10 May 2014 7:03:21
  • PC
    • WPMU DEV Initiate

    Hello there Peter,

    Thanks for posting on the forums.

    Welcome to the World of WordPress :slight_smile: We are here to help you out !

    The text for the services and service provider doesn’t fit the dropdown. It breaks up the text and I need the text to be displayed fully without it being truncated. How do I change the font and the color of the dropdown text and show available see images

    We need some custom CSS to do those changes.

    If you look at Appointments+ >> Settings >> Display Settings >> You will see Additional css Rules

    That is where you will enter the code I will be suggesting you.

    .app_services_dropdown_select select, .app_workers_dropdown_select select, .app_service_locations_dropdown select, .app_provider_locations_dropdown select {width:200px !important}

    That will make it look like the below screenshot :

    [attachments are only viewable by logged-in members]

    I do not see the Show available times button. Perhaps you are using an autorefresh=1 in the shortcode ?

    Also I need to change the font and color of the confirmation and the pay button (paypal).

    input.appointments-confirmation-cancel-button {background:red ; color:white}
    
input.appointments-confirmation-button {background:red ; color:white}

    The above code can be added to the CSS and you can choose to change red or white as per your choice.

    One other thing, I set my working hours from 8:00 am to 12:00pm on a Saturday, however when I click on the day to choose a time it shows the 8 to 11 a free (great) but the issue is it displays not possible times until 3:00pm which is where the issue is. Why do my patients see the other working hours that aren’t available. see image.

    That is by design. It shows your unavailable hours as well and shows you busy at that time and they are not clickable.

    td.notpossible, div.notpossible {background: transparent !important;
    
color: transparent !important}

    The above code can help you hide those busy days and columns from your calendar by making them transparent. Not the best solution but it works :slight_smile:

    I hope that helps. Please feel free to ask if you have more questions on the same.

    Cheers, PC

  • Peter
    • Site Builder, Child of Zeus

    Hi PC,

    That worked! What CSS code do I need to change the payment button? Is there a way to change the look of the button and the font style as well? I would like to have my dropdown boxes look like the example I showed you above. Is there a way I can find out more on CSS coding so that I can customize it more? I see examples of others that have made changes like to the of shape buttons and boxes.

    So PC, even if I have my working hours set to 8am to 1pm it will show the times until 4pm as unavailable? I missing something, the doctors hours are from 8 to 1 which is ok and I set that up in the working hours so why would it show hours till 4pm as unavailable when it is not set to 4pm. Shouldn’t it only show the working hours I setup?

    Yes I do have autorefresh=1.

    Cheers,

    Peter

  • Peter
    • Site Builder, Child of Zeus

    PC,

    I need to show time available as a block set of hours for different services is there a way to do this. I want a patient to pick a start time at 8am have it represent 3 hours block from 8am to 11am.

    Cheers,

    Peter

  • Peter
    • Site Builder, Child of Zeus

    PC,

    I need to show time available as a block set of hours for different services is there a way to do this. I want a patient to pick a start time at 8am have it represent 3 hours block from 8am to 11am. Can this be done?

    Can I also rename the free, busy and unavailable color text to something else?

    Cheers,

    Peter

  • PC
    • WPMU DEV Initiate

    Hello there Peter,

    Thanks for posting back.

    I need to show time available as a block set of hours for different services is there a way to do this. I want a patient to pick a start time at 8am have it represent 3 hours block from 8am to 11am. Can this be done?

    I am not sure if I completely understood that. Do you want to show the time starting at 8 AM and not 9 AM and 10 AM Slot ? If the service duration is 3 hours then it will anyways blog the time from 8 AM to 11 AM

    If you can kindly elaborate, that will be a great help in understanding what you want to achieve.

    Can I also rename the free, busy and unavailable color text to something else?

    You can change that color in Appointments+ >> Settings >> General >> Display Settings and choose whatever color you want.

    What CSS code do I need to change the payment button?

    What do you want to change there ? the text ?

    If yes, then you can change the shortcode [app_paypal] to

    [app_paypal button_text="Please confirm PRICE CURRENCY payment for SERVICE"]

    Please advise.

    Cheers, PC

  • Peter
    • Site Builder, Child of Zeus

    Hello PC,

    Let me try and clarify my questions a little more…

    I need to show time available as a block set of hours for different services is there a way to do this. I want a patient to pick a start time at 8am have it represent 3 hours block from 8am to 11am. Can this be done?

    -I want the times to be shown to the patients by start time and end time. If it is a 9:00pm service but lasts for 3 hours I want it it to display it as 9:00 am to 12:00pm as a block time if not can it be displayed in the appointment details this way?

    Can I also rename the free, busy and unavailable color text to something else?

    -I have changed the colors to what I want now but I want to change the label/text of the colors from free, busy or unavailable to something else. Something like Open, Reserved, Closed?

    Cheers,

    Peter

    [attachments are only viewable by logged-in members]

  • PC
    • WPMU DEV Initiate

    Hey there Peter,

    Thanks for posting back.

    I need to show time available as a block set of hours for different services is there a way to do this. I want a patient to pick a start time at 8am have it represent 3 hours block from 8am to 11am. Can this be done?

    -I want the times to be shown to the patients by start time and end time. If it is a 9:00pm service but lasts for 3 hours I want it it to display it as 9:00 am to 12:00pm as a block time if not can it be displayed in the appointment details this way?

    You should be able to do that if you set the service duration to 3 hours i.e. 180 minutes.

    It will show the block start at the service provider start time and the next block will start 3 hours after the first block.

    It does not however show 8-11 11-2 etc on the time blocks I am afraid.

    Can I also rename the free, busy and unavailable color text to something else?

    You can do that. Kindly follow the post here https://wpmudev.com/forums/topic/change-appointments-legend-text and let us know if there are any issues.

    Cheers, PC