Custom CSS

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

/* REPLACE PROGRESS ICON */ 
.icon-steparrow:before { 
content: "\279C"; /* additional CSS arrow codes at http://seekom.freshdesk.com/solution/articles/231447-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 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

/* 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 */

Add Colour to the Booking Cart

/* 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

/* PAYMENT LINK STYLING */ 
#__PaymentManager_ClickHereLink {
background-color: #cc1919; /* red - adjust background colour as required - colour picker available at palaton.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 */

Payment Link Message 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*/
}

Add ..more to Room Title

/* 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 www.color-hex.com */ 
} 
/* end APPEND to ROOM Title */

Style Proceed Button

/* 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 and Policy sections

/* 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;
}

Rate Calendar

/* 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

/*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; 
}