WordPress.org

Forums

Booking Calendar
[resolved] Customising with CSS (17 posts)

  1. NiallASD
    Member
    Posted 1 year ago #

    Hi all,

    I'm using the Booking Calendar plugin and find it excellent, but I'd like to customise the appearance more to fit in with the site I'm developing.

    I've managed to make some changes to the theme via CSS, but it's ended up looking a mess.

    Here's the CSS code I'm using.

    And here's a PNG showing how I'd like it to look (or close to).

    Really hope you can help!

    Niall

    http://wordpress.org/plugins/booking/

  2. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }
  4. NiallASD
    Member
    Posted 1 year ago #

    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?

  5. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    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 http://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.

  6. NiallASD
    Member
    Posted 1 year ago #

    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?

  7. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    Hello.
    1) The spaces between text fields you can modify by editing this file: http://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.

  8. NiallASD
    Member
    Posted 1 year ago #

    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?

  9. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    Hello.
    1) You can add to the bottom of this file
    http://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.

  10. NiallASD
    Member
    Posted 1 year ago #

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

  11. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  12. NiallASD
    Member
    Posted 1 year ago #

    Thank you!

  13. NiallASD
    Member
    Posted 1 year ago #

    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?
  14. wpdevelop
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  15. inkhaus
    Member
    Posted 7 months ago #

    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

  16. wpdevelop
    Member
    Plugin Author

    Posted 7 months ago #

  17. inkhaus
    Member
    Posted 7 months ago #

    Hi I need the css code and where to change the colour of my heaing text, eg name, email address, etc. on the wor press contact form 7

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Booking Calendar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic