v4 Styling Demos
The following examples show how the appearance of the Cab Grid price calculator can be changed using CSS styling. These examples make use of the Cab Grid Pro Shortcode’s new class attribute (v4.5.6+), meaning there is no need to enclose the shortcode in an HTML element. (For earlier versions, see CSS library for Cab Grid Pro versions 4.5.5 and earlier.)
Custom CSS code can be entered in the ‘CSS Styling‘ box under the OPTIONS tab on the Cab Grid Pro page of a site’s WordPress admin. For more information on adding custom styling to your taxi fare price calculator, see our support article: How to customise your price calculator’s appearance with CSS and check out the Custom Style Builder.
Cab Grid Pro v5 Styling
These demos are based on v1-4 styling. Cab Grid Pro v5 offers new rewritten styles which may mean CSS code below requires some modification to display properly.
Above is a full-width styling example.
To create this, the Cab Grid shortcode is given a CLASS attribute: cgp-FullWidth.
From here we can specifically target this instance of the Cab Grid Pro plugin and apply specific styles….
Custom CSS (entered in CabGrid Pro Options tab):.cabGridPro.cgp-FullWidth {background:none;max-width:100%;padding:0;box-shadow:none;color:#fff;}
.cabGridPro.cgp-FullWidth form ul li.cabGridProPassengers input, .cabGridPro.cgp-FullWidth form ul li.cabGridProLuggage input {width:25%;font-size:38px;max-width:80px;line-height: 1;height: 44px;}
.cabGridPro.cgp-FullWidth form ul li select.cabGridProDropSelect, .cabGridPro.cgp-FullWidth form ul li select.cabGridProPickSelect {font-size:38px;height:44px;line-height:44px;max-width:400px;}
.cabGridPro.cgp-FullWidth .chosen-container-single .chosen-single {height:44px;font-size:33px;line-height:44px;}
.cabGridPro.cgp-FullWidth form ul.cabGridProJourneyDetails li.cabGridProPassengers label img, .cabGridPro.cgp-FullWidth form ul.cabGridProJourneyDetails li.cabGridProLuggage label img {max-width:44px;height:44px;max-height:44px;display:none;}
.cabGridPro.cgp-FullWidth form ul.cabGridProJourneyDetails li.cabGridProPassengers {margin-right:17px;}
.cabGridPro.cgp-FullWidth form ul.cabGridProJourneyDetails li.cabGridProPassengers label {background-image: url(/wp-content/plugins/cab-grid-pro/i/passenger-icon2-light.png);width:40px;display: inline-block;background-size:contain;background-repeat:no-repeat;height:44px;line-height: 44px;font-size: 26px;vertical-align: top;background-position-x: right;margin-right: 4px;}
.cabGridPro.cgp-FullWidth form ul.cabGridProJourneyDetails li.cabGridProLuggage label {background-image: url(/wp-content/plugins/cab-grid-pro/i/luggage-icon-light.png);width:38px;display: inline-block;background-size:contain;background-repeat:no-repeat;height:40px;line-height: 44px;font-size: 26px;vertical-align: top;background-position-x: right;margin-right: 4px;}
.cabGridPro.cgp-FullWidth form ul li.cabGridProRtnSelect {height: 44px;vertical-align: top;}
.cabGridPro.cgp-FullWidth .cabGridProPrice {padding:10px;margin:10px;color:#f0edf7;text-shadow:0px 0px 1px #222;}
.cabGridPro.cgp-FullWidth form ul li.cabGridProPassengers input, .cabGridPro.cgp-FullWidth form ul li.cabGridProLuggage input {background: #fafafa;}
.cabGridPro.cgp-FullWidth form ul li.cabGridProFromSelect label, .cabGridPro.cgp-FullWidth form ul li.cabGridProToSelect label,.cabGridPro.cgp-FullWidth label#passengers-error.error {display:none !important;background-image:none !important;}
.cabGridPro.cgp-FullWidth form ul li.cabGridProPassengers input.error, .cabGridPro.cgp-FullWidth form ul li.cabGridProLuggage input.error {background-color:rgba(255,0,0,0.3);}
.cabGridPro.cgp-FullWidth .cabGridProButton, .cabGridPro.cgp-FullWidth .cabGridProBookButton {font-size:32px;padding:8px 50px;}
.cabGridPro.cgp-FullWidth .cabGridProMessage {color:#f7f7ff;}
Need a Hand?
CSS:.cabGridPro.cgp-GreenSquared {color: #f7f7f7;box-shadow: none;background: rgb(118,173,61);border-radius: 0px;border-bottom: 4px solid rgba(232,232,232,0.9);font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;}
.cabGridPro.cgp-GreenSquared form ul.cabGridProJourneyDetails {margin: 0;}
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails {border:none;border-radius: 0; border-top: 2px groove rgba(212, 209, 209, 0.3);margin-top:0 !important;}
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails li label {font-size: 12px;text-transform: uppercase;padding-bottom: 3%;}
.cabGridPro.cgp-GreenSquared form ul li input,
.cabGridPro.cgp-GreenSquared form ul li.cabGridProTickets input,
.cabGridPro.cgp-GreenSquared form ul li.cabGridProPassengers input,
.cabGridPro.cgp-GreenSquared form ul li.cabGridProLuggage input,
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails li .cabGridProDateSelect,
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails li input {border-radius: 0;background: rgb(248,248,248);color: #999;font-size: 20px;height:32px;line-height:32px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cabGridPro.cgp-GreenSquared form ul li textarea,
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails li textarea{border-radius: 0;background: rgb(248,248,248);color: #999;padding:3px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cabGridPro.cgp-GreenSquared .chosen-container .chosen-single,
.cabGridPro.cgp-GreenSquared select {border-radius: 0;background: rgb(248,248,248);color: #999;font-size: 20px;height:32px;line-height:32px;box-shadow: 0px 1px 1px rgba(0,0,0,0.1);}
.cabGridPro.cgp-GreenSquared .chosen-container-single .chosen-single div b {background-position: 3px 6px;}
.cabGridProPrice .cabGridProBookButton,
.cabGridPro.cgp-GreenSquared .chosen-container .chosen-drop {border-radius:0;color:#999;background: rgb(248,248,248);}
.cabGridPro.cgp-GreenSquared .chosen-container .chosen-results li {color:#999;}
.cabGridPro.cgp-GreenSquared .cabGridProPrice {border-top: 2px groove rgba(222, 221, 221, 0.28);transition:all 2s ease;}
.cabGridPro.cgp-GreenSquared .cabGridProPrice,.cabGridPro.cgp-GreenSquared .cabGridProMessage {color:#f7f7f7;padding-top: 2%;}
.cabGridPro.cgp-GreenSquared .cabGridProSendBookingRequest {height:auto !important;}
.cabGridPro.cgp-GreenSquared form ul li label.error {color:#69ec54;font-size:12px !important;}
.cabGridPro.cgp-GreenSquared h1 {border-radius: 0;border: none;color: #e4622d !important;text-shadow: none;background: rgb(220, 255, 184);border-bottom: 2px solid #cacaca;}
.cabGridPro.cgp-GreenSquared .cabGridProDateSelect {line-height:normal !important;font-size:13px !important;}
.cabGridPro.cgp-GreenSquared form ul.cabGridProBookDetails li .cabGridProDateSelect select {height:auto;font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;}
.cabGridPro.cgp-GreenSquared .chosen-container .chosen-results li {text-align:center;padding:5px 0 !important;font-size:18px;}
.cabGridPro.cgp-GreenSquared .chosen-container .chosen-results li.highlighted {background: rgb(190, 225, 154);}
.cabGridPro.cgp-GreenSquared .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;}
.cabGridPro.cgp-GreenSquared .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;}
.cabGridPro.cgp-GreenSquared .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}
.cabGridPro.cgp-GreenSquared .cabGridProPrice .cabGridProBookButton {display: inline-block;font-size: 26px;vertical-align: bottom; margin: 0 0 6px 0;height: 48px;min-width:190px;max-width:50%;}
.cabGridPro.cgp-GreenSquared .cabGridVariation {margin: 6px 0 0 0;}
.cabGridPro.cgp-GreenSquared .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;}
.cabGridPro.cgp-GreenSquared .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;}
Green Squared Layout
The Cab Grid shortcode is assigned a CLASS attribute: ‘cgp-GreenSquared‘. Any instance of the Cab Grid taxi price calculator with this class assigned will acquire this styling.
Vehicle Layout
This demo shows the vehicle select option with a transparent background over a full width image. The background image is specified by the parent element (part of the WordPress theme).
The Cab Grid shortcode is assigned a CLASS attribute as ‘cgp-Transparent’.cabGridPro.cgp-Transparent {background:rgba(0,0,0,0.2);}
.cabGridPro.cgp-Transparent form ul.cabGridProBookDetails {background: rgba(235, 215, 255, 0.57);color: #000;text-shadow: 0px 0px 1px #fff;}
.cabGridPro.cgp-Transparent form ul.cabGridProJourneyDetails li.cabGridProVehicles ul li.selected {box-shadow: inset 1px 1px 3px 1px rgba(80, 80, 80, 0.6), 0px 0px 7px 1px rgba(255, 255, 255, 0.46);border-color: rgba(22, 5, 38, 0.49);}
Shortcode syntax:
Ticket Layout
This is defined either globally in the Cab Grid Pro OPTIONS tab or through a shortcode attribute as
This Cab Grid shortcode is given the class attribute of ‘cgp-TicketDemo’ to acquire this styling:.cabGridPro.cgp-TicketDemo {margin: 50px 0 0 0;
padding: 20px 0 0 0;
width: auto;
height: auto;
background: rgba(44, 200, 70, 0.44);
border: 3px solid #e0acac;
border-radius: 80px;
box-shadow: inset 0px 0px 2px rgb(255, 253, 253);}
We can write your custom CSS
Background Image
You may want to add a background image to the calculator (or sidebar widget) directly. This example is a standard Cab Grid Pro instance assigned a class attribute of ‘cgp-BGImage’.
Shortcode Syntax:
The CSS (styling) to add the background image is as follows..cabGridPro.cgp-BGImage {background:url(/wp-content/uploads/2015/11/blurred-road-lights.jpg);background-size:cover;color: #eee;text-shadow: 0px 1px 0px #fff;}
.cabGridPro.cgp-BGImage .cabGridProPrice,.cabGridPro.cgp-BGImage .cabGridProMessage {color:#e8e8e8;}
.cabGridPro.cgp-BGImage form ul.cabGridProBookDetails {background: rgba(0,0,0,0.4);}
Clean/Plain Layout
The Cab Grid shortcode is assigned a class, ‘cgp-Clean’
.cabGridPro.cgp-Clean {box-shadow:none;background-color:transparent;background:none;margin: 0;padding: 0;border:1px solid #eee;border-radius:3px;}
.cabGridPro.cgp-Clean form ul li input {border:1px solid #ddd !important;background:rgba(250,250,250,0.6);}
.cabGridPro.cgp-Clean form ul li .cabGridProDropSelect,.cabGridPro.cgp-Clean form ul li .cabGridProPickSelect {margin:0;padding:0;border:none;background:transparent;}
.cabGridPro.cgp-Clean .cabGridProMessage,.cabGridPro.cgp-Clean .cabGridProPrice, .cabGridPro.cgp-Clean form ul.cabGridProJourneyDetails li label,.cabGridPro.cgp-Clean form ul.cabGridProBookDetails li label {color: #888 !important;}
.cabGridPro.cgp-Clean .cabGridVariation a.active {background-color:rgba(206,206,206,0.48);}
.cabGridPro.cgp-Clean form ul.cabGridProBookDetails {border:none;}
Hide the luggage option
You may want to hide the option to select the number of luggage items. This is relatively simple.
The CSS (styling) is as follows..cabGridProLuggage {display:none !important;}
This code will universally hide the luggage option from all instances of Cab Grid Pro on your site, but you could enclose a specific instance in an HTML element with an ID and target only that instance (as in above examples).
Customizations from $49.99
Sunset Layout
The Cab Grid shortcode is assigned a class named, ‘cgp-SunSet‘
/*SUNSET TEMPLATE*/
.cabGridPro.cgp-SunSet {font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-radius: 10px;background: #f9d241;background: -moz-linear-gradient(top, #f9d241 0%, #f5b62d 100%);background: -webkit-linear-gradient(top, #f9d241 0%,#f5b62d 100%);background: linear-gradient(to bottom, #f9d241 0%,#f5b62d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d241', endColorstr='#f5b62d',GradientType=0 );}
.cabGridPro.cgp-SunSet.cgpMobileY {margin:0;padding:0;}
.cabGridPro.cgp-SunSet form ul li .cabGridProDropSelect,.cabGridPro.cgp-SunSet form ul li .cabGridProPickSelect {width:100%;}
.cabGridPro.cgp-SunSet.cgpMobileY form ul.cabGridProJourneyDetails {}
.cabGridPro.cgp-SunSet form ul.cabGridProJourneyDetails li {background-image:none;background:transparent;text-indent:0;}
.cabGridPro.cgp-SunSet form ul.cabGridProJourneyDetails li.cabGridProPassengers,.cabGridPro.cgp-SunSet form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:inline-block;vertical-align: top; width:14.8%;margin:0;padding:0;text-align:left;}
.cabGridPro.cgp-SunSet form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cabGridPro.cgp-SunSet form ul.cabGridProJourneyDetails li.cabGridProToSelect {display:inline-block;vertical-align: top; width:29.9%;margin:0;padding:0;text-align:left;}
.cabGridPro.cgp-SunSet.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProPassengers, .cabGridPro.cgp-SunSet.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProLuggage,.cabGridPro.cgp-SunSet.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cabGridPro.cgp-SunSet.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:45%;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;text-align: left;font-size: 12px !important;line-height: 1 !important;padding: 0 0 6px 1px !important;font-weight: bold !important;text-transform: uppercase;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li label img {display:none !important;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li input:not([type="button"]) {width:100%;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li.cabGridProRtnSelect {/*cursor:url(/wp-content/plugins/cab-grid-pro/i/return-icon-light.png),auto;*/width: 45px;padding: 0 !important;margin: 0;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro.cgp-SunSet .cabGridProJourneyDetails li.cabGridProRtnSelect label {font-size: 9px !important;line-height: 1.2 !important;margin: 29px 0 0 0;text-align: center;padding: 2px !important;cursor:ew-resize;min-width:49px;}
.cabGridPro.cgp-SunSet.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect {display:block;clear:both;width:88%;margin:10px auto;}
.cabGridPro.cgp-SunSet.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect label {font-size: 16px !important;margin: 5px auto 4px;padding: 7px 0 !important;background-color: rgba(255, 239, 234, 0.49);border: 2px solid rgba(255, 255, 255, 0.44)}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails {margin-top: 0;background-color: rgba(240, 156, 16, 0.64);box-shadow: inset 0px 1px 122px 123px rgba(240, 209, 11, 0.88);padding: 20px;border: 1px solid rgba(190, 190, 190, 0.42);border-radius: 4px;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li {min-height:36px;}
.cabGridPro.cgp-SunSet form ul li.cabGridProTickets input,.cabGridPro.cgp-SunSet form ul li.cabGridProPassengers input,.cabGridPro.cgp-SunSet form ul li.cabGridProLuggage input,.cabGridPro.cgp-SunSet form ul li .cabGridProDropSelect .chosen-single,.cabGridPro.cgp-SunSet form ul li .cabGridProPickSelect .chosen-single,.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li .cabGridProDateSelect,.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li textarea,.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li input:not([type="submit"]) {background: #fff;box-shadow: inset 1px 1px 1px rgba(0,0,0,0.13);border-radius: 4px;border: 1px solid rgb(209,206,196);height: 36px;line-height: 36px;color: #999;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li .cabGridProDateSelect {padding:0;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li .cabGridProDateSelect select {color:#999 !important;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li textarea {height:auto;line-height:1.3;font-size:13px;padding:3px;min-height: 36px;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li input:not([type="submit"]) {font-size:13px;padding-left:4px;}
.cabGridPro.cgp-SunSet form ul li .cabGridProDropSelect,.cabGridPro.cgp-SunSet form ul li .cabGridProPickSelect {height:36px;}
.cabGridPro.cgp-SunSet .chosen-container-single .chosen-single div b {background-position: 4px 8px;}
.cabGridPro.cgp-SunSet form ul li .cabGridProDropSelect .chosen-drop,.cabGridPro.cgp-SunSet form ul li .cabGridProPickSelect .chosen-drop {box-shadow: inset 1px -1px 1px rgba(0,0,0,0.13);border: 1px solid rgb(209,206,196);border-radius: 0;border-top: 0;margin-top:17px;color:#999;}
.cabGridPro.cgp-SunSet form ul li .chosen-container .chosen-drop ul.chosen-results li {padding:5px 6px !important;color:#999;}
.cabGridPro.cgp-SunSet form ul li .chosen-container .chosen-drop ul.chosen-results li.highlighted,.cabGridPro.cgp-SunSet .cabGridProBookButton,.cabGridPro.cgp-SunSet .cabGridProButton {color:#fff;background: #da4a26;background: -moz-linear-gradient(top, #da4a26 0%, #bb261d 100%);background: -webkit-linear-gradient(top, #da4a26 0%,#bb261d 100%);background: linear-gradient(to bottom, #da4a26 0%,#bb261d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da4a26', endColorstr='#bb261d',GradientType=0 );}
.cabGridPro.cgp-SunSet .cabGridProBookButton,.cabGridPro.cgp-SunSet .cabGridProButton {text-shadow: 1px 1px 1px #000;color: #fff;box-shadow: 1px 1px 1px rgba(0,0,0,0.2);padding: 8px 25px !important;border:none;text-transform: uppercase;font-weight: bold;font-size: 28px;}
.cabGridPro.cgp-SunSet .cabGridProPrice,.cabGridPro.cgp-SunSet .cabGridProMessage {color: rgb(130, 25, 25) !important;text-shadow: 0px 1px 1px rgba(251, 251, 251, 0.65);}
.cabGridPro.cgp-SunSet .cabGridVariation {margin: 6px 0 0 0;}
.cabGridPro.cgp-SunSet .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;}
.cabGridPro.cgp-SunSet .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;}
.cabGridPro.cgp-SunSet form ul.cabGridProBookDetails li label {font-size: 13px;padding-bottom: 6px;text-transform: uppercase;font-weight: bold;}
.cabGridPro.cgp-SunSet form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color:rgb(203, 57, 34);}
.cabGridPro.cgp-SunSet .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;}
.cabGridPro.cgp-SunSet .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;}
.cabGridPro.cgp-SunSet .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}
This orange and red coloured theme uses the CSS ‘content’ attribute to display text labels for the taxi journey input fields.
“Transfers” Theme Layout
Another full width demo with some slightly different features, includes hiding the luggage box and replacing the return icon with a custom tick-box.
Custom CSS (entered in CabGrid Pro Options tab).cabGridPro.cgp-Transfers {background:transparent;box-shadow:none;color:#fff !important;text-transform:uppercase !important;font-size:16px;max-width: 1370px !important;width:100% !important;margin: 0 auto;padding: 5px;}
.cabGridPro.cgp-Transfers h1 {color:#fff !important;border: none; border-radius: 0;background-color: transparent;box-shadow: none;text-shadow: 0px 0px 1px #7d7d7d;margin:0;padding:0;}
/*Hide Luggage*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:none !important;}
/*Journey Details General*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails > li {display:inline-block;text-align:left;vertical-align: top;margin: 0 0.7%;padding: 0 !important;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails > li label {text-indent:0 !important;background-image:none !important;text-transform:uppercase !important;display:block !important;float:none !important;font-size:16px !important;padding: 0 1px 0 3px !important;text-align: left;margin: 0 0 10px 0;color:#fff;line-height: 1;height:auto;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails > li input {display: block;height:47px;line-height:47px;padding: 0 12px;font-size: 15px;width: 100%;border: 1px solid #DFDFD0;color: #191F26;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-image:none;background-color:#fff;}
/*Passengers Box*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProPassengers {width: 12%;min-width: 80px;max-width:125px;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProPassengers label {}
/*Return Box*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {width:12%;height:auto;color:#fff;background-image:none;min-height:70px;position:relative;min-width:80px;max-width:125px;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {border:none;min-width:80px;text-indent:-9999px !important;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {padding:0;margin:0;width:auto;height:auto;display:none;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {text-indent:0px;position: absolute;content:'Return';text-transform:uppercase;display:block;font-size:16px !important;text-align: left;margin: 0 0 10px 0;color:#fff;line-height: 1;height:auto;width:100%;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:after {text-indent:0px;position: absolute;content:'\002714';display:block;width:100%;height:45px;line-height:45px;background-color:#fff;margin:0;padding:0;text-align: center;font-size:18px;margin-top: 10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;border: 1px solid #DFDFD0;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:after {color: #000;}
/*TO/FROM boxes (general)*/
.cabGridPro.cgp-Transfers form ul li .cabGridProDropSelect,.cabGridPro.cgp-Transfers form ul li .cabGridProPickSelect {width: 100% !important;}
.cabGridPro.cgp-Transfers .chosen-container-single .chosen-single {height:47px;line-height:47px;font-size: 15px;border: 1px solid #DFDFD0;color: #191F26;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background:#fff;text-transform:uppercase;box-shadow: none;}
.cabGridPro.cgp-Transfers .chosen-container .chosen-drop {box-shadow:none;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li input.chosen-search-input {height:auto;padding:4px;line-height:1.2;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-single div b {height:20px;margin-top: 10px;}
/*FROM box*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProFromSelect {width:30%;max-width:358px;min-width:120px;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProFromSelect label {}
/*FROM box*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:30%;max-width:358px;min-width:120px;}
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProToSelect label {}
/*FLAGS*/
.cabGridPro.cgp-Transfers .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}
/*PRICE*/
.cabGridPro.cgp-Transfers .cabGridProPrice {color:#fff;}
.cabGridPro.cgp-Transfers .cabGridProMessage,.cabGridPro.cgp-Transfers .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}
.cabGridPro.cgp-Transfers form ul li input[type="submit"],.cabGridPro.cgp-Transfers .cabGridProPrice .cabGridProBookButton,.cabGridPro.cgp-Transfers .cabGridProPayButton {font-size:18px !important;font-weight:bold;box-shadow:none;border: none;text-transform: uppercase;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: #fff !important;text-align: center;background: #191F26 !important;height: 54px;line-height: 54px;padding: 0 14px !important;text-shadow: none;transition:all 0.8s ease;}
.cabGridPro.cgp-Transfers form ul li input[type="submit"]:hover,.cabGridPro.cgp-Transfers .cabGridProPrice .cabGridProBookButton:hover,.cabGridPro.cgp-Transfers .cabGridProPayButton:hover {background:#fff !important;color:#191F26 !important;}
/*PRICE VARIATION*/
.cabGridPro.cgp-Transfers .cabGridVariation a {border-radius:2px !important;background: #fff !important;color: #4e4e4e;}
.cabGridPro.cgp-Transfers .cabGridVariation a.active {color:#1d1d1d;box-shadow: inset 2px 2px 3px 1px rgba(0, 0, 0, 0.33);text-shadow: 0px 1px 1px rgba(80, 77, 77, 0.23);}
/*BOOKING FORM*/
.cabGridPro.cgp-Transfers form ul.cabGridProBookDetails {border:none;margin:2% auto;max-width:992px;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.18) 0%, rgba(3,3,3,0.18) 1%, rgba(39,39,39,0.15) 15%, rgba(166,166,166,0) 65%, rgba(255,255,255,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.18) 0%,rgba(3,3,3,0.18) 1%,rgba(39,39,39,0.15) 15%,rgba(166,166,166,0) 65%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%,rgba(3,3,3,0.18) 1%,rgba(39,39,39,0.15) 15%,rgba(166,166,166,0) 65%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e000000', endColorstr='#00ffffff',GradientType=1 );
}
.cabGridPro.cgp-Transfers form ul.cabGridProBookDetails li textarea, .cabGridPro.cgp-Transfers form ul.cabGridProBookDetails li input {background:#fff;}
.cabGridPro.cgp-Transfers form ul.cabGridProBookDetails li label {text-transform:uppercase;}
/*Off*/
.cabGridPro.cgp-Transfers form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}
Time Layout
This demo shows the Time mode. The destination drop-down is hidden with CSS (though it is preset to a fixed place name).
Shortcode syntax: (pick-up locations are restricted to the ‘Tour’ group.)
The CSS also adds a background image to indicate a tour-style….cabGridPro.cgp-Time {background:url(http://cabgrid.com/wp-content/uploads/2017/09/time-bg.jpg);background-size:cover;background-position:top right;background-repeat:no-repeat;min-height: 300px;}
.cabGridPro.cgp-Time .cabGridProDropSelect {display:none;}
.cabGridPro.cgp-Time form ul.cabGridProBookDetails {background:rgba(0,0,0,0.42);}
.cabGridPro.cgp-Metal {color:##4c4c4c;text-shadow: 1px 0px 1px rgba(0,0,0,0.5);background:url(http://demo.cabgrid.com/i/metal-bg.jpg),#c0bfc2;background-position: center center;background-repeat: repeat-y;box-shadow: 1px 11px 14px -3px rgba(0,0,0,.5);border-top: 1px solid rgba(152, 148, 148, 0.5);border-radius: 20px;max-width:900px;}
.cabGridPro.cgp-Metal.cgpMobileY {padding-bottom:36px;/*accommodates flags*/}
/*Passengers/Luggage/Tickets*/
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {display: inline-block;width:auto;}
.cabGridPro.cgp-Metal.cgpMobileY form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak),.cabGridPro.cgp-Metal.cabGridProRestrictedWidth form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {width:49%;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:32%;min-width:220px;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li.cabGridProChosenLI select {width:100%;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li label {height: 34px;min-width: 27px;}
.cabGridPro.cgp-Metal form ul li.cabGridProLuggage input,.cabGridPro.cgp-Metal form ul li.cabGridProPassengers input,.cabGridPro.cgp-Metal form ul li.cabGridProTickets input {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);font-size: 30px;text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.82);background: rgba(111, 111, 111, 0.26);color: #4a4a4a;text-align: center;}
.cabGridPro.cgp-Metal.cgpMobileY form ul li.cabGridProLuggage input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/luggage-icon-mobile.png),rgba(111, 111, 111, 0.26);background-position:right center;}
.cabGridPro.cgp-Metal.cgpMobileY form ul li.cabGridProPassengers input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/passenger-icon-mobile.png),rgba(111, 111, 111, 0.26);}
.cabGridPro.cgp-Metal.cgpMobileY form ul li.cabGridProTickets input {text-align:left;background:url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/ticket-icon.png),rgba(111, 111, 111, 0.26);}
/*Return box*/
.cabGridPro.cgp-Metal.cgpMobileN form ul li.cabGridProRtnSelect {height:37px;margin-left:12px;}
.cabGridPro.cgp-Metal.cgpMobileY form ul li.cabGridProRtnSelect,.cabGridPro.cgp-Metal.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect {width:100% !important;}
.cabGridPro.cgp-Metal.cgpMobileY form ul li.cabGridProRtnSelect label,.cabGridPro.cgp-Metal.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect label {margin-left:0;height:auto;width:100%;max-width:300px;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background: url(https://cabgrid.com/wp-content/plugins/cab-grid-pro/i/one-way-icon.png),rgba(111, 111, 111, 0.26);background-repeat:no-repeat;background-position:90% center;}
/*ORIGIN/DEST*/
.cabGridPro.cgp-Metal.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:100% !important;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background: rgba(111, 111, 111, 0.26);padding: 8px;}
.cabGridPro.cgp-Metal.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProChosenLI label {height:auto;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-single {background:rgba(111, 111, 111, 0.26);;box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);font-size: 20px;color: #444;line-height: 44px;height: 44px;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li .chosen-container .chosen-drop {background:url(http://demo.cabgrid.com/i/metal-bg.jpg),rgba(111, 111, 111, 0.26);box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background-repeat:repeat-y;background-position:center;}
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-search input[type="text"] {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);background-color: rgba(111, 111, 111, 0.26);}
.cabGridPro.cgp-Metal .cabGridProJourneyDetails .chosen-container .chosen-results li.group-result {background: rgba(107, 107, 107, 0.5);color: #ffffff;}
.cabGridPro.cgp-Metal .cabGridProJourneyDetails .chosen-container .chosen-results li.highlighted {background:rgba(0,0,0,0.5);}
/*FLAGS*/
.cabGridPro.cgp-Metal.cgpMobileY .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}
/*PRICE*/
.cabGridPro.cgp-Metal .cabGridProPrice {color:#fff;}
.cabGridPro.cgp-Metal .cabGridProMessage,.cab-grid-transfers-layout .cabGridPro .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}
.cabGridPro.cgp-Metal form ul li input[type="submit"],.cabGridPro.cgp-Metal .cabGridProPrice .cabGridProBookButton,.cabGridPro.cgp-Metal .cabGridProPayButton {min-width:250px;font-size:29px !important;font-weight:bold;box-shadow:none;border: none;text-transform: uppercase;border-radius: 8px;color: #fff !important;text-align: center;background: rgba(0,0,0,0.2) !important;height: 54px;line-height: 54px;padding: 0 14px !important;transition:all 0.8s ease;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
.cabGridPro.cgp-Metal form ul li input[type="submit"]:hover,.cabGridPro.cgp-Metal .cabGridProPrice .cabGridProBookButton:hover,.cabGridPro.cgp-Metal .cabGridProPayButton:hover,.cabGridPro.cgp-Metal .cabGridProDiscount button:hover {box-shadow:inset 2px 2px 4px rgba(0,0,0,0.4);}
/*PRICE VARIATION*/
.cabGridPro.cgp-Metal .cabGridVariation {}
.cabGridPro.cgp-Metal.cabGridProRestrictedWidth .cabGridVariation {background-color:transparent;border-radius:6px;}
.cabGridPro.cgp-Metal .cabGridVariation a {background-color: rgba(43, 43, 43, 0.2);text-decoration: none;color: #e0e0e0;text-shadow: 1px 1px 0px rgba(99, 96, 96, 0.4);}
.cabGridPro.cgp-Metal.cgpMobileN .cabGridVariation a {}
.cabGridPro.cgp-Metal .cabGridVariation a:first-child {border-top-left-radius: 8px;border-bottom-left-radius: 4px;}
.cabGridPro.cgp-Metal .cabGridVariation a:last-child { border-top-right-radius: 8px;border-bottom-right-radius: 4px;}
.cabGridPro.cgp-Metal .cabGridVariation a.active {box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2);color: #000000;}
/*BOOKING FORM*/
.cabGridPro.cgp-Metal form ul.cabGridProBookDetails {text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.48);}
.cabGridPro.cgp-Metal form ul.cabGridProBookDetails li textarea,.cabGridPro.cgp-Metal form ul.cabGridProBookDetails li input:not([type=checkbox]):not([type=radio]):not([type=submit]) {box-shadow: inset 2px 2px 6px 0px rgba(0, 0, 0, 0.55);text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.82);background: rgba(111, 111, 111, 0.26);color: #4a4a4a;padding-left:4px;}
.cabGridPro.cgp-Metal .cabGridProMessage {text-shadow: 1px 0px 1px rgba(0,0,0,0.5);}
.cabGridPro.cgp-Metal .cabGridProDiscount button {box-shadow:none;border: none;text-transform: uppercase;border-radius: 5px;color: #fff !important;text-align: center;background: rgba(0,0,0,0.2) !important;transition:all 0.8s ease;}
/*EXTRAS*/
.cabGridPro.cgp-Metal form ul li.cabGridProExtras ul li {text-shadow:none;}
.cabGridPro.cgp-Metal form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color: rgba(61, 62, 68, 0.68);}
.cabGridPro.cgp-Metal form ul li.cabGridProExtras ul li p.cabGridProExtraDesc {}
.cabGridPro.cgp-Metal form ul li.cabGridProExtras ul li p.cabGridProExtraPrice {}
/*Off*/
.cabGridPro.cgp-Metal form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}
Brushed Metal Layout
This layout makes use of a background image to give a brushed metal appearance.
Square Layout
This is a fixed width layout with a square style. It is targeted at desktop devices only using the cgpMobileN CSS class. On mobile, the standard responsive layout will load.
The shortcode would look like this:
The CSS…/*Square Style*/
.cabGridPro.cgpMobileN.cabGridProSquare {width:430px;background:#f5f5f5;border-radius:none;box-shadow:none;border-radius:0;padding:24px;font-size:16px;}
.cabGridProSquare .la-ball-fussion {color: #00005c;}
.cabGridProSquare .cabGridProPrice .cabGridProBookButton,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProChosenLI, .cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTime, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTickets, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProPassengers, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggage, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggageOn {border-radius:0;background:#fff;border:1px #d2d6de solid;width:100%;display:block;margin:0 0 15px 0 !important;padding: 8px 0 0 0 !important;height:42px;text-indent:0;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProChosenLI {height: auto !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProBreak {display:none !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li textarea:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="email"]:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="text"]:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li:hover,.cabGridProSquare .cabGridProPrice .cabGridProBookButton:hover,.cabGridProSquare .cabGridProPrice .cabGridProBookButton:focus,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation:hover,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation:focus,.cabGridPro.cgpMobileN.cabGridProSquare form>ul li:hover, .cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProJourneyDetails li:hover,.cabGridPro.cgpMobileN.cabGridProSquare form>ul li:focus, .cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProJourneyDetails li:focus {border-color:#fe9d00 !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTime input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProTickets input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProPassengers input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggage input, .cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProLuggageOn input {border-radius:0;background:#fff;border:none;width:320px;outline:none;color:#555;font-size:16px;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li input:active {outline:none;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect {background-position: 12px center !important;background-size: 32px;background-image: url(/wp-content/plugins/cab-grid-pro/i/one-way-icon2.png);background-repeat:no-repeat;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProJourneyDetails li.cabGridProRtnSelect label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;line-height: 32px !important;text-transform: uppercase;text-align: center;cursor:ew-resize;min-width:49px;margin:0 !important;border:none;padding:0 22px 0 0!important;font-size: 15px !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li .cabGridProDropSelect,.cabGridPro.cgpMobileN.cabGridProSquare form ul li .cabGridProPickSelect {width:100% !important;border:none;line-height:32px;background:transparent !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop .chosen-search,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop .chosen-results {display:none;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container.chosen-with-drop .chosen-drop .chosen-search,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container.chosen-with-drop .chosen-drop .chosen-results {display:block;}
.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-drop,.cabGridPro.cgpMobileN.cabGridProSquare .chosen-container .chosen-single,.cabGridPro.cgpMobileN.cabGridProSquare select {border:none !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;position:static !important;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation {text-align:left;margin: 0 0 2px 7px;padding: 0;width: 369px;background: #fff;border: 1px #d2d6de solid;height: 42px;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a {width: 122px;padding:6px 0;border-radius:0 !important;background:#fff;line-height: 30px;height: 40px;color:#444;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a:active,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a:focus,.cabGridPro.cgpMobileN.cabGridProSquare .cabGridVariation a.active {background:#fafafa;color:#000;font-size: 75%;}
.cabGridPro.cgpMobileN.cabGridProSquare .cabGridProPriceDigCont {margin:15px 0 0 0;padding:0;}
.cabGridProSquare .cabGridProPrice .cabGridProBookButton,.cabGridProSquare .cabGridProButton,.cabGridProSquare .cabGridProBookButton,.cabGridProSquare .cabGridProButton:hover,.cabGridProSquare .cabGridProBookButton:hover,.cabGridPro.cgpMobileN.cabGridProSquare form ul li input[type="submit"] {width: 100%;max-width: 369px;box-shadow: none;margin: 15px auto !important;font-size: 20px;line-height: 30px;padding: 0 !important;border-radius:0;background:#fff;border:1px #d2d6de solid !important;min-width: 40px;height: 42px;}
.cabGridPro.cgpMobileN.cabGridProSquare form > ul > li,.cabGridPro.cgpMobileN.cabGridProSquare form ul li fieldset {padding: 0 !important;margin-left:0 !important;margin-right:0 !important;width: 100%;max-width:100%;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails {border-radius:0;border:none !important;padding:0 !important;margin:0 !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li {width:100% !important;max-width: 369px;margin-bottom:15px;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="email"],.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li input[type="text"],.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li textarea,.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li select {border-radius:0;width:100% !important;background:#fff !important;border:1px #d2d6de solid !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li.cabGridProDiscount input[type="text"] {width:75% !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProDiscount button,.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li input {border:1px #d2d6de solid !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li {border:1px #d2d6de solid !important;box-shadow:none !important;background:#fff !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background: rgba(111,111,111,0.1);padding:6px;height:auto;line-height:1.3;color:#555;text-shadow:none;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li input {width:3em !important;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul li.cabGridProExtras ul li span.cabGridProIncrement {background: rgba(111,111,111,0.1);color:#555;}
.cabGridPro.cgpMobileN.cabGridProSquare form ul.cabGridProBookDetails li.cabGridProSubmitButton {margin:15px 0 !important;padding:0 !important;text-align:center;max-width:100%;}
We can help…
Latest CabGrid Pro Support Articles
CabGrid Pro 6 Licensing Guide
How do I find my license code? You can find and manage your CabGrid Pro licenses on your CabGrid account page. This includes your Licensed Email Address and Plan ID. My Licenses How to validate your CabGrid Pro license: Log in to your WordPress admin panel. Go to…
How to send a payment link with the booking acknowledgement message
Want to include a payment link in the booking acknowledgement email. There are number of ways you can construct a payment link and include it in the acknowledgement email. Here’s a couple of suggestions…
Reset all prices, places, vehicle or extras with one click
CabGrid Pro version 5.9.4 adds an option to reset all prices, places, vehicles and extras with one click.
Require Payment After Taxi Booking Submitted
Want to make payment mandatory when a customer submits a taxi booking request in CabGrid Pro? This is something occasionally requested by our users. Unfortunately, this is not directly possible. However, we have some suggestions…
Airport meet and greet name plate print out with your logo
The Nameplate feature is part of the CabGrid Booking Management Add-on. The NAMEPLATE button is located in the MANAGE column next to each booking. If the CabGrid Driver add-on is installed, a driver will receive a link to the nameplate page for that booking when…
Logo Image
The logo field in options allows a company logo to be specified. This is to be used in default/generic emails and other places across the system – such as the airport greeting card.
Booking Reference Seed
The Booking Reference Seed option allows you to define or adjust the booking reference assigned when a booking is requested.
Highlighting Price Variation Options
Whilst CabGrid cannot currently automatically update the price based on booking form input, we have some recommendations for drawing your customer’s attention to the price variation buttons…
Automatically Accept CabGrid Booking Requests
The Booking Management add-on cannot automatically accept or confirm bookings. However, it is possible to give this illusion to your customer by re-wording the email and messages shown during the booking process…
Add your logo to taxi booking notification emails
How to add a logo or image to notification emails sent from CabGrid Pro or the CabGrid Booking Management add-on
Invoicing, Accounting and Bookkeeping with CabGrid
CabGrid features to help with accounting, bookkeeping and invoicing customers.
Booking form unexpectedly shows mandatory information missing
Problem: when trying to summit a booking, the message “Mandatory information missing or invalid. Invalid fields have been highlighted.” always appears, even when all required fields are completed.