/* Change the padding and background colour of Bókun's widget (iFrame) below */
Body {
padding: 50px;
background: white; /* edit to change background color for the Bókun iFrame. NOTE you can use Transparent as well as colours. */
}
/* Change main body text below */
body, label {
color: #333 !important;
}
/* Change the color of the text for current month in the widget, and the arrows to the left / right */
a {
color: #88bbc8 !important;
}
/* Change the color of the "Book" button's background and text */
.btn-success {
background: #88bbc8 !important; /* changes color of the background of the "Book" button */
border-color:#729ca7 !important; /* changes color of the border around the "Book" button */
color: white; /* changes color of the text inside the "Book" button */
font-weight: normal; /* changes the font weight of the text inside the "Book" button. This is useful if you plan on using a dark background and light text */
}
/* Change colors in the Activity Time Selector's Calendar below. Remember to change the legends as well as your date's background */
/* Change the available dates below */
.availability-calendar td.daycell.available .date {
background: #88bbc8; /* changes the background color of each date cell */
border: 2px solid #88bbc8; /* set to the same setting colour the abowe line */
color: #ffffff; /* changes the color of numbers for each day in the calendar */
}
.availability-calendar .legend .available {
background-color:#88bbc8; /* for the calendar's legend, this colour must be the same as the background for available dates (above) */
}
.availability-calendar td.daycell.available.selected .date {
border: 2px solid #000000; /*changes the color to change the highlight of the selected day */
}
/* Change sold out dates below */
.availability-calendar td.daycell.sold-out .date {
background: #efaeb1; /* changes the background color of each date cell */
border: 2px solid #efaeb1; /* set to the same setting colour the abowe line */
color: #ffffff; /* changes the color of numbers for each day in the calendar */
}
.availability-calendar .legend .sold-out {
background-color: #efaeb1; /* for the calendar's legend, this colour must be the same as the background for sold-out dates (above) */
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.