CSS Library
Custom CSS can be entered to over ride standard booking screen styles (Custom Scripts tab when editing or creating a booking screen template).
Entry of custom CSS should not be attempted unless you have at least a fundamental knowledge of CSS.
Below are some of the more commonly requested CSS customisations that have been requested. Feel free to copy and alter.
/* REPLACE PROGRESS ICON */
.icon-steparrow:before {
content: "\279C"; /* additional CSS arrow codes at http://help.ibexres.com/arrow-codes */
font-size: 2.2em; /* amend icon size as required */
position: relative; top: -7px; /*adjust positioning as required */
color: #49a81d; /* adjust colour of progress icon as required - colour picker available at http://www.color-hex.com */
background: #ffffff!important; /*adjust background colour as required */
}
#step-widget .prog-bar {
position: relative; top: 15px; /* adjust spacing above progress icon as required */}
/* end */
/* REPLACE & STYLE SOLD TEXT */
span.pricing-cell-sold-out {
color: transparent!important; /* hides default SOLD text */
-webkit-transform: rotate(-0deg)!important; /* reduce angle for longer text */
-moz-transform: rotate(-0deg)!important; * match angle on prior rowt */
}
span.pricing-cell-sold-out:after {
content: "SOLD"; /* replace text as required */
color: #C7C7C7; /* adjust text colour as required - colour picker available at http://paletton.com/ */
font-size: 13px; /* adjust font size as required */
position: relative; left: -30%; } /* adjust left margin as required */
/* end */
/* IN CART ROOMS & EXTRAS STYLING */
.cart-entries, .extra-cart, .booking-summary {
width: 103%!important;
background: #b4cede;
padding: 0 10px;
margin-left: -15px;
}
#container-extras .extra-container-wrapper .panel-body {background-color: inherit;}
/* end */
/* PAYMENT LINK STYLING */
#__PaymentManager_ClickHereLink {background-color: #cc1919; /* red - adjust background colour as required - colour picker available at http://paletton.com/ */
color: #ffffff; /* white */
font-weight: bold;
font-size: 120%;
line-height: 2em;
border-radius: 10px;
padding: 8px 10px;
border: 0;
}
#__PaymentManager_InfoMessage {color: transparent;}
/* end PAYMENT LINK STYLING */
/* HOW TO CHANGE THE TEXT OF PAYMENT MESSAGE*/
#__PaymentManager_InfoMessage{
color: transparent!important;
}
#__PaymentManager_InfoMessage:after{
content:"Your card details will be handled by iBex Vault over a secure connection.";/*Adjust text as required*/
float:left;
margin-top:-70px;/*Adjust margin as required*/
width:450px;/*Adjust width as required*/
color:#000;/*Adjust colour as required*/
}
/* APPEND to ROOM Title */
div.expand-toggle.plus-minus.collapsed span.bookable-marketing-name:after {
content: " ...more"; /* text after Room Title */
}
div.expand-toggle.plus-minus span.bookable-marketing-name:after {
content: " ...less"; /* text after Room Title */
}
span.bookable-marketing-name:after {
content: " ...more"; /* text after Room Title */
font-weight: normal; /* amend font weight - eg. bold or normal*/
font-style: italic; /* amend font style - eg. normal or italic*/
text-decoration: underline; /* amend font style - eg. underline or none*/
color: #008bcc; /* adjust colour as required - colour picker available at http://www.color-hex.com */
}
/* end APPEND to ROOM Title */
/* style PROCEED BUTTON */
input#next-1.btn.btn-next.pull-right.tipped {
background-color: #fc7600;
border-color: #f59847;
color: #FFFFFF;
font-size: 12.5px;
}
input#next-2.btn.btn-next.pull-right.tipped {
background-color: #fc7600;
border-color: #f59847;
color: #FFFFFF;
font-size: 12.5px;
}
input#next-3.btn.btn-next.pull-right.tipped {
background-color: #fc7600;
border-color: #f59847;
color: #FFFFFF;
font-size: 12.5px;
}
input#next-1.btn.btn-next.pull-right.tipped:hover {
background-color: #f59847;
border-color: #fc7600;
}
input#next-2.btn.btn-next.pull-right.tipped:hover {
background-color: #f59847;
border-color: #fc7600;
}
input#next-3.btn.btn-next.pull-right.tipped:hover {
background-color: #f59847;
border-color: #fc7600;
}
/* end style PROCEED BUTTON */
/* hide property details section */
.property-details-header-row{display: none;}
.property-details-contents-row{display: none;}
/* hide policy section */
.property-policies-header-row{display: none;}
.property-policies-contents-row{display: none;}
/* PROCEED / BACK BAR */
.progress-controls.row {
background:#FFFFFF!important;
}
/*HIDE ROOM TITLE ON EXPANDED VIEW*/
.bookable-calendar-container .bookable-calendar .combo-info-panel h4 { visibility:hidden; height 5px; }
/*INSERT PARAGRAPH BREAKS ON EXPANDED ROOM VIEW*/
.bookable-calendar-container .bookable-calendar .room-notes p { white-space: pre; }
/* MAX PAX FONT SIZE */
.bookable-calendar .max-pax span {
font-size: 12px;
}
/* RACK RATE FONT SIZE */
.bookable-calendar .full-rate span {
font-size: 12px;
}
/* LIMITED FONT */
span.pricing-cell-is-limited {
font-size: 10px;
visibility: hidden;
}
span.pricing-cell-is-limited:after {
/* Do not change below code */
visibility: visible;
position: relative;
white-space: nowrap;
/* Do not change the above code */
/* Can change below code */
content: "Last Rooms";
left: -20px;
color: red;
text-shadow: 0px 0px 8px red ;
/* Can change above code */
}
/* ROOM/PACKAGE RATE (MIN STAY) CALENDAR HEADING */
.bookable-calendar{min-width: 200px;}
.bookable-calendar tr.calendar-title-row th.combo-info {
text-indent: -900000px;
}
.bookable-calendar tr.calendar-title-row th.combo-info:after {
content: "Room Rate";
font-size: 14px;
color: black!important;
text-indent: 0!important;
background: white!important;
display: block;
}
/*EXTRAS HEADING FONT COLOUR*/
#container-extras .extra-container-wrapper .panel-heading .expand-title {
color: black!important;
}
/*EXTRAS HEADING BACKGROUND COLOUR*/
#container-extras .extra-container-wrapper .panel-heading {
background:#bfab62!important;
}
/* MANDATORY EXTRAS BAR */
.mandatory-extras {
background:#FFFFFF!important;
}