Title: Styling Last modified: September 1, 2016 --- # Styling * Resolved [albinuta](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/) * 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](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/](https://wordpress.org/plugins/appointments/) Viewing 14 replies - 1 through 14 (of 14 total) * Plugin Contributor [Amin – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support2/) * (@wpmudev-support2) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599106) * 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/](https://wordpress.org/plugins/simple-custom-css/) * kind regards, Kasia * Thread Starter [albinuta](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599202) * 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](http://localhost/ESCAPE/index.php/rezervari/?wcalendar=1470005392#app_schedule) * Thank you again for your help! * Plugin Contributor [Predrag – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support1/) * (@wpmudev-support1) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599212) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599231) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599263) * Yeeeey is up and running! [http://escaperoomadventure.ro/index.php/rezervari/](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](https://wordpress.org/support/users/wpmudev-support1/) * (@wpmudev-support1) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599265) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599266) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599269) * 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](https://wordpress.org/support/users/wpmudev-support1/) * (@wpmudev-support1) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599296) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599302) * 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](http://escaperoomadventure.ro/index.php/rezervari/?wcalendar=1470262626#app_schedule) * Plugin Contributor [Predrag – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support1/) * (@wpmudev-support1) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599310) * 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](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599311) * yeeey! Thank you so very much Predrag!!! You’ve helped me so much I can’t thank you enough! * <3 Alina * Thread Starter [albinuta](https://wordpress.org/support/users/albinuta/) * (@albinuta) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599312) * RESOLVED * Plugin Contributor [Predrag – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support1/) * (@wpmudev-support1) * [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599313) * 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. * ![](https://s.w.org/plugins/geopattern-icon/appointments_eaf36c.svg) * [Appointments](https://wordpress.org/plugins/appointments/) * [Frequently Asked Questions](https://wordpress.org/plugins/appointments/#faq) * [Support Threads](https://wordpress.org/support/plugin/appointments/) * [Active Topics](https://wordpress.org/support/plugin/appointments/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/appointments/unresolved/) * [Reviews](https://wordpress.org/support/plugin/appointments/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [styling](https://wordpress.org/support/topic-tag/styling/) * 14 replies * 3 participants * Last reply from: [Predrag – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support1/) * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/appointments-styling/#post-7599313) * Status: resolved