[Plugin: Booking Calendar] Customising with CSS

Hello.
Please note, we do not make such type of personal customization (I mean do not make the full customization of the calendar skins). If you have more special (small) questions about fixing or improvement of some elements, so then we will help you of course.

Here is several items, which you can fix in your skin. Its seems that you have issues with font sizes and line height.

Please make this changes.

1) Find this code:

/* Month Titles */

    .datepick-inline .datepick-header {

            font-size: 21px;

      color: #e0cd81;

      font-weight: bold;

    }

and replace it to this code:

/* Month Titles */

    .datepick-inline .datepick-header {

      color: #e0cd81;

      font-weight: bold;

    }
    .datepick-inline .datepick-header span {
		font-size:21px;
		line-height:12px;
	}

2) Find this code:

.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 {
    color: #A9964C;
    font-size: 28px;
    font-weight: bold;
}

and replace it to this code:

.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 {
    color: #A9964C;
    font-size: 18px;
    font-weight: bold;
}

Etc…

If you will have any other more specific question, please send these questions to the support email: support @ wpbookingcalendar.com

Edit: Oops cross-posted with the plugin author.

Try adding this:

.datepick-inline .datepick-header {
 padding: 0;
 font-size: 1em;
}

.datepick-inline .datepick-header span {
 font-size: 20px;
}

Thanks very much to you both.

I can’t seem to get the padding proper between the dates or change the arrow types etc., I’ll continue to work on matching the appearance in the PNG I linked to or is that possible?

Hello.
1) Each date cell have the width: 14.2857%; And better do not chnage it.
The height of the specific cell you can change by using this CSS in calendar skin:

.datepick-inline .datepick-title-row th,
.datepick-inline .datepick-days-cell {
  height: 40px;
}

Or you can define the height of the dates cells in the options parameter in the booking shortcode. Please read how manually to configure Booking Calendar shortcodes here https://wpbookingcalendar.com/help/booking-calendar-shortcodes/

The height of the Week Days row, you can change by using this CSS:

div.datepick-inline .datepick-title-row th {
    height: auto !important;
    line-height: 2.182;
}

2) If you want to change the “arrows tabs” of the month scrolling, you need to make this fix. Please open this file ../booking/js/wpdev.bk.js

then find this code:

prevText: '«',
                        nextText: '»',

and replace scroll arrow to your symbols.

Kind regards.

Sorry about the late reply, thanks very much!

It’s beginning to suit the theme of the web site more now, but how can I adjust the spacing between text fields and change the appearance and alignment of the ‘Submit’ button?

Hello.
1) The spaces between text fields you can modify by editing this file: https://www.thefoxesden.ie/wp-content/plugins/booking/css/client.css
in this code:

.booking_form .control-group {
  margin: 15px 0;
}

2) The style of submit button you can modify by adding this code to the bottom of same file:

.booking_form_div button.btn-primary {
  background: #ccc;
}

The ability to change the “text” on submit button possible only in the paid versions of Booking Calendar.
Kind Regards.

Thanks once again.

Just a few more questions, how can I

• Change the font-family, font-weight etc. of the label titles such as ‘First Name*:’?
• Make changes to the ‘Thank You’ section that appear after clicking send?
• Move the ‘Powered by’ text to below the ‘Send’ button?

I also notice that the first selectable date is automatically ‘hovered over’ without the text changing colour, is there any way to fix that so it isn’t?

Hello.
1) You can add to the bottom of this file
https://www.thefoxesden.ie/wp-content/plugins/booking/css/client.css
the code like this:

.wpdevbk .booking_form label {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

2) You can change the “Thank you” message on the General Booking Settings page in admin panel at “Form section”.
3) You can deactivate the ‘Powered by’ text on the General Booking Settings page at “Main section”.
Kind regards.

Is there a way to change the CSS of the “Thank You” message, such as the background-color?

Hello.
Yes, its possible. You need to open this file: ../wp-content/plugins/booking/css/client.css
then find this code (on line: 12):

.submiting_content.wpdev-help-message.alert {
  color: #009933;
}

and make your CSS customization inside of that block.
For example:

.submiting_content.wpdev-help-message.alert {
  background-color: #AAEE33;
  color: #009933;
}

Kind Regards.

Thank you!

Just a few more questions:

• The “Thank You” is not aligned in the centre of the box, although the text is centre aligned there’s too much space to the bottom and right – a possible margin / padding issue?
• How can I remove the shadow from the “Thank You” text?
• Is it possible to select more than one date at a time on the calendar?

Hello.
1-2) Please send the link to the page with that booking form (please contact the support email: support @ wpbookingcalendar.com ).
3) Its possible to activate instead of the Single days selections the Multiple days selections on the General Booking Settings page in Calendar section.
Kind Regards.

Hello

I need to change the colour of the booking form font – where it actualy says name, email, comment, etc – it needs to be white. Where do I find or what will the code be.

Many Thanks

Hello.
Please check here: https://wpbookingcalendar.com/support/comment-page-258/#comment-9474