Styling

Resolved albinuta
(@albinuta)

9 years, 9 months ago

Hello there,

My name is Alina, I am using Quest theme (I have a child theme), and I would like to style the Appointments plugin to fit my needs.

I would like to change the text color and font size (maybe type too) of the days of the week and hours (from the calendar). I would like the text bigger and white. I managed to change some of the text of the plugin by personalizing my theme, but the days of the week, hours, and “Please complete all the fields and confirm reservation:” text, are still gray.

Also, I would like to change the colors of the buttons (“Confirm reservation” and “cancel”), as they are currently a very very light gray and the text white so you can’t read the text, and there is no hover button color change. I saw that newedgemarketing adressed a similar issue here https://wordpress.org/support/topic/styling-of-buttons-fonts-etc. I made this change:
“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’]);”
And also installed the custom css styling plugin. But the changes that worked for newedgemarketing did not work on my site 🙁 except for the spacing between the confirmation and cancel button. So maybe I missed something…

One more thing, when I made the text white with my wordpress quest theme, it also made the text from the field (where people should write their name, adress etc) white, so now is white on white 🙁 How can I change the text to black, but all the other text remain white? I’m not sure this question is for the plugin or theme…

I have to say that I am a beginner with wordpress and I no nothing about programming css, html, php etc. I saw that you mentioned at one point to somebody who was having styling issues that there may be something wrong with the cache, but I didn’t know where to look or what to do about cache.

Any help would be highly appreciated!
Thanks,
Alina

P.S.: My site is not up and running yet, because I have to fix these issues first, so I can’t give you a link, and I am not sure how to post a photo here, sorry.

https://wordpress.org/plugins/appointments/

Viewing 14 replies - 1 through 14 (of 14 total)

Plugin Contributor Amin – WPMU DEV Support
(@wpmudev-support2)

9 years, 9 months ago
Hello albinuta,

I would very like to help you with styling and I can give you CSS but if it will not work then I would really see your site (checking why styling does not work cannot be done basing on screenshot I’m afraid).
```
#app_schedule table th,
.app_timetable_wrapper .app_timetable_cell,
.appointments-confirmation-wrapper legend h3 {
font-size: 14px;
color: white;
font-family: "Name of your font";
}

.appointments-confirmation-button,
.appointments-confirmation-cancel-button {color: black; background-color: blue;}

.appointments-confirmation-button:hover,
.appointments-confirmation-cancel-button:hover {background-color: red;}
.appointments-confirmation-wrapper input[type="text"] {color: #000;}
```
You can
a) add it to the child theme style.css file
b) use this small plugin https://wordpress.org/plugins/simple-custom-css/

kind regards,
Kasia
Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Hello Kasia,

Thank you for the very quick response!
I added the changes to the simple custom css plugin as instructed. The font and the color of the buttons changed, also the text in the fields is now black, but the days of the week and hours are still the same. Also the text from “choose service” is still white on white (is a drop down field type, I don’t know how to describe it better). I didn’t mention before that I translated the plugin, I don’t know if that counts.
Please tell me what more information can I give you so you can help me.
Is this a valid link to my site? http://localhost/ESCAPE/index.php/rezervari/?wcalendar=1470005392#app_schedule

Thank you again for your help!

Plugin Contributor Predrag – WPMU DEV Support
(@wpmudev-support1)

9 years, 9 months ago

Hi albinuta,

Unfortunately we can’t access sites from local installation, this is only accessible from your site.

Is there possibility for you to get your site on live site so we can access it?
This way we can use Chrome inspector tool on your site and find what exactly code is needed to make the changes.

Cheers,
Predrag

Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Hello Predrag,

I will try to make my website available for public and get back to you. Unfortunately I am a beginner, and this may take a while.

Thank you,
Alina.

Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Yeeeey is up and running!
http://escaperoomadventure.ro/index.php/rezervari/

Now all I have to do is fix it hahaha.
Please help me!
Plugin Contributor Predrag – WPMU DEV Support
(@wpmudev-support1)

9 years, 9 months ago
Hi albinuta,

Thanks for the URL, didn’t take that much time afterall 🙂

Can you try using this CSS code for the time and day names:
```
.entry-content .appointments-list td.appointments-weekly-calendar-hours-mins,
.appointments-list table th {
    color: #fff;
    font-size: 15px;
    font-family: "Arial";
}
```
And for buttons try out this one:
```
.appointments-confirmation-buttons input {
    border: 2px solid white;
    background-color: transparent;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
}
```
Let us know how it goes 🙂

Cheers,
Predrag
Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Oh thank you thank you, I have such pretty buttons now!
It worked perfectly!

I still have this text gray ”Vă rugăm completați toate câmpurile și confirmați rezervarea:” (it’s the text asking people to complete all the fields below and confirm appoinment) is right above the name, adress, telephone field, and is not visible in gray so it should be white. Is there a way to change that?

Also, if I’m not pushing it, the text from the field where you select the service is still white (on white) and I really need to change that…can you help me with that too?

Thank you for the very quick responses!
Alina

Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Hi,
Can I also make the “next week” button pretty like the other buttons?
I’m guessing is something like this, but this does’t work 🙁
`.appointments-next_week-button input {
border: 2px solid white;
background-color: transparent;
padding: 5px;
border-radius: 5px;
color: #fff;
}
.appointments-next_week-button:hover {background-color: #D82D5B;}`
I’m missing something…
Plugin Contributor Predrag – WPMU DEV Support
(@wpmudev-support1)

9 years, 9 months ago
Hi Alina,

Can you please try out this CSS code, it should take care of all of the above 🙂
```
.app_select_services {
    color: #000000;
}

.appointments-confirmation-wrapper fieldset > legend {
    color: #fff;
}

.appointments-pagination .next,
.appointments-pagination .previous {
    border: 2px solid white;
    background-color: transparent;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
}

.appointments-pagination .next:hover,
.appointments-pagination .previous:hover {
    background: #D82D5B;
}
```
Let me know how it goes 🙂

Cheers,
Predrag
Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

Hi,
Thank you!
It works very good, except for the next week button, which still has a white background on top of the transparent and pink hover…this is what I mean: http://escaperoomadventure.ro/index.php/rezervari/?wcalendar=1470262626#app_schedule
Plugin Contributor Predrag – WPMU DEV Support
(@wpmudev-support1)

9 years, 9 months ago
Oh, sorry, I missed that part 🙂

Try adding this code, that should do it:
```
.appointments-pagination a {
    background: none;
    box-shadow: none;
    color: #fff;
    text-shadow: none;
}

.appointments-pagination a:hover {
    background: none;
}
```
Cheers,
Predrag
Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

yeeey! Thank you so very much Predrag!!! You’ve helped me so much I can’t thank you enough!

<3 Alina

Thread Starter albinuta
(@albinuta)

9 years, 9 months ago

RESOLVED

Plugin Contributor Predrag – WPMU DEV Support
(@wpmudev-support1)

9 years, 9 months ago

Awesome! Glad I could help 🙂

Wish you many booked appointments 🙂

Cheers,
Predrag

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Styling’ is closed to new replies.

Tags