Hello.
You can make this customization in this CSS file:
http://nidaigle.apps-1and1.net/wp-content/plugins/booking/css/skins/traditional.css
You need to make customization relative to these elements:
/* A P P R O V E D - BACKGROUND */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved {
background-color: #C60B0B;
}
/* A P P R O V E D - T E X T /including partially booked - timeslots/ */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved,
.block_hints .block_booked a,
.datepick-inline .date_approved a{
color: #5F0000;
font-weight: bold;
text-shadow: 0 1px 0 #DD0000;
}
/* CHECK IN and CHECK OUT Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date_approved.block_check_in_out div.check-in-div, /* Item for the LEGEND */
.datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
border-right: 1px dotted #C60B0B;
}
.block_hints .date_approved.block_check_in_out div.check-out-div, /* Item for the LEGEND */
.datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
border-left: 1px dotted #C60B0B;
}
/*******************************************************************************/
/* P E N D I N G - BACKGROUND */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve {
background-color: #DF9A00;
}
/* P E N D I N G - T E X T /including partially booked - timeslots/ */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve,
.block_hints .block_pending a,
.datepick-inline .date2approve a {
color: #885500;
font-weight: bold;
text-shadow: 0 1px 0 #FFAA00;
}
Thanks for your help again and this css code.
However, I tried (without success) to :
– change the width of the calendar and form
– delete the grey line above the month title
– change the size of the month title and center it vertically
Here my code :
/* Full Calendar Frame */
.datepick-inline {
background: none;
border: none;
box-shadow: none;
border-radius: 0px;
}
/* Background of one calendar month */
.datepick-inline .datepick{
background: #f5f5f5;
}
/* Month Titles */
.datepick-inline .datepick-header {
background: #5b5b5b;
text-shadow: none;
line-height: 45px;
height: 50px;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
}
/* Week Titles */
div.datepick-inline .datepick-title-row th{
border: 1px solid #ffffff;
color: #555;
font-weight: bold;
text-transform: uppercase;
background: #d6d6d6;
}
/* Cell border*/
.block_hints .block_free, .block_hints .block_time, .block_hints .block_booked, .block_hints .block_pending, .block_hints .block_check_in_out,
.datepick-inline .datepick-days-cell{
border: 1px solid #ffffff;
}
/********************* Dates Cells *********************/
/* A V A I L A B L E - BACKGROUND */
.block_hints .block_free,
.block_hints .block_time,
.block_hints .block_check_in_out div.check-in-div, /* Item for the LEGEND */
.block_hints .block_check_in_out div.check-out-div, /* Item for the LEGEND */
.datepick-inline .date_available,
.datepick-inline .timespartly.check_in_time div.check-in-div, /* Define the COLOR for the check in / out times the same as available */
.datepick-inline .timespartly.check_out_time div.check-out-div {
background: none repeat scroll 0 0 #ebebeb;
}
/* A V A I L A B L E and UNSELECTABLE - Text - when we are select the dates */
.block_hints .block_free,
.datepick-inline .date_available,
.datepick-inline .date_available.datepick-unselectable{
color: #000000;
text-shadow: none;
}
/* A V A I L A B L E - Text A */
.block_hints .block_free a,
.block_hints .block_time,
.datepick-inline .date_available a{
color:#000000;
font-weight: bold;
text-shadow: none;
}
/************************************************************************/
/* A P P R O V E D - BACKGROUND */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved {
background-color: #dc4047;
}
/* A P P R O V E D - T E X T /including partially booked - timeslots/ */
.block_hints .date_approved.block_check_in_out,
.block_hints .block_booked,
.datepick-inline .date_approved,
.block_hints .block_booked a,
.datepick-inline .date_approved a{
color: #ffffff;
font-weight: bold;
text-shadow: none;
}
/*CHECK IN-OUT - Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date_approved.block_check_in_out div.check-in-div, /* LEGEND item */
.datepick-inline .date_approved.timespartly.check_in_time div.check-in-div{
border-right: 1px dotted #dc4047;
}
.block_hints .date_approved.block_check_in_out div.check-out-div, /* LEGEND item */
.datepick-inline .date_approved.timespartly.check_out_time div.check-out-div{
border-left: 1px dotted #dc4047;
}
/*************************************************************************/
/* P E N D I N G - BACKGROUND */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve {
background-color: #000000;
}
/* P E N D I N G - T E X T /including partially booked - timeslots/ */
.block_hints .date2approve.block_check_in_out,
.block_hints .block_pending,
.datepick-inline .date2approve,
.block_hints .block_pending a,
.datepick-inline .date2approve a {
color: #ffffff;
font-weight: bold;
text-shadow: none;
}
/*CHECK IN-OUT - Borders for the approved cells - the COLOR have to be the SAME as BACKGROUND of this cell*/
.block_hints .date2approve.block_check_in_out div.check-in-div, /* LEGEND item */
.datepick-inline .date2approve.timespartly.check_in_time div.check-in-div{
border-right: 1px dotted #000000;
}
.block_hints .date2approve.block_check_in_out div.check-out-div, /* LEGEND item */
.datepick-inline .date2approve.timespartly.check_out_time div.check-out-div{
border-left: 1px dotted #000000;
}
/*************************************************************************/
/* S E L E C T E D Dates - Background */
.datepick-inline .datepick-one-month .datepick .datepick-current-day {
background-color: #555;
}
/* S E L E C T E D Dates - Text color */
.datepick-inline .datepick-one-month .datepick .datepick-current-day a{
color: #EEEEEE;
text-shadow: none;
}
/*************************************************************************/
/* C e l l O V E R Dates - Background */
.datepick-inline .datepick .datepick-days-cell-over{
background:#aaa;
}
/* C e l l O V E R Dates - Text color */
.datepick-inline .datepick .datepick-days-cell-over a:hover,
.datepick-inline .datepick .datepick-days-cell-over a{
color: #eee;
text-shadow: none;
}
Hello.
1) The calendar width you can change in the booking calendar shortcode in the “option” parameter, during inserting Booking Calendar shortcode into the post or page. Please read more about it here: Please read how manually to configure Booking Calendar shortcodes here http://wpbookingcalendar.com/help/booking-calendar-shortcodes/#booking-options
2) Please open this file: http://nidaigle.apps-1and1.net/wp-content/plugins/booking/css/skins/traditional.css?ver=1.0
Find this code:
/* Previous & Next links and TITLE BACKGROUND */
.datepick-inline .calendar-links {
background-color: #ccc;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#ddd)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(top, #ddd, #ccc); /* Safari 5.1, Chrome 10+ */
background: -moz-linear-gradient(top, #ddd, #ccc); /* Firefox 3.6+ */
background: -ms-linear-gradient(top, #ddd, #ccc); /* IE 10 */
background: -o-linear-gradient(top, #ddd, #ccc); /* Opera 11.10+ */
border-bottom: 1px solid #aaa;
}
and replace it to this code:
/* Previous & Next links and TITLE BACKGROUND */
.datepick-inline .calendar-links {
background:none;
border-bottom: 1px solid #aaa;
}
3) According month title. I can see it that its centered.
If you want to make any chnages to the CSS of the month title please use this:
.datepick-inline .datepick-header {
}
Kind Regards.
Found. Thanks very much for your help again.
Last thing about CSS, I would like to have the same arrow to change the month such as here : http://bydanimarti.com/themes/wordpress/rentyourhouse/the-house/
Is it possible ?
In that theme inside of the calendar.css file was used special customization of using theme font:
.datepick-inline .calendar-links .datepick-next a::after {
content: ???;
}
If your theme support that font, you can use the same declaration. Please recheck it here: http://bydanimarti.com/themes/wordpress/rentyourhouse/wp-content/themes/RYH-Theme/css/calendar.css
it does not work :/ Thanks for your help again !
No, you do not need to use my code,
I was said to check about it in that CSS code.
Its look like this:
.datepick-inline .calendar-links .datepick-prev a:after,.datepick-inline .calendar-links .datepick-next a:after{display:block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:24px;margin-top:47px;line-height:1}
.datepick-inline .calendar-links .datepick-next a:after{content:"\f054";}.datepick-inline .calendar-links .datepick-prev a:after{content:"\f053"}
Please recheck if your theme support it and check the CSS code in that CSS file.
Kind Regards.
I m sorry. I am a real beginner. I do not know where I can check it.
But I do not want to waste your time, so I will keep the initial arrow.
Thanks
Just try to add that code from my previous comment to some of your CSS file. Clear the browser cache and test it.
If its will not work, so then its means that your theme does not support that font.
Kind Regards.
I have tried and it does not work but I can upload font in my theme. What is the name of the font ?
Its seems “FontAwesome”.
Kind Regards.
Sorry to open this subject again.
I did not success to put a new arrow. So is it possible to :
– change the color of the current arrow
– delete the shadow effect ?
Here : http://nidaigle.apps-1and1.net/reserver
Thanks very much
Hello.
Try to add this code:
.datepick-inline .calendar-links .datepick-next a,
.datepick-inline .calendar-links .datepick-prev a{
color: #ddd;
text-shadow:none;
}
to the end of the calendar skin file: http://nidaigle.apps-1and1.net/wp-content/plugins/booking/css/skins/traditional.css
or to some other your CSS file.
Kind Regards.
Perfect ! Thanks very much for your help and four your plugin
