Styling Demos CSS library for Cab Grid Pro versions 4.5.5 and earlier

The following examples show how the appearance of the Cab Grid price calculator can be changed using CSS styling.

Custom CSS code can be entered in the ‘CSS Styling‘ box under the OPTIONS tab on the Cab Grid Pro page in your 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 checkout the Custom Style Builder.

Note: Make sure the latest version of Cab Grid Pro is installed to insure CSS classes and HTML are up to date.

NOTE: This article applies to versions of Cab Grid Pro prior to v4.5.6 where the Cab Grid price calculator shortcode needed to be enclosed in an HTML element with a given ID or class. For later versions, a class attribute can be added to the shortcode. See CSS styling examples for Cab Grid Pro version 4.5.6 and later for details.

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Above is a full-width styling example.

To create this, the Cab Grid shortcode is enclosed in an HTML element and given a custom id: cabGridProFullWidthDemo.

From here we can specifically target this instance of the Cab Grid Pro plugin and apply specific styles….

HTML (entered in page editor text/source mode):
<div id="cabGridProFullWidthDemo">[cabGridPro icons="light"]</div>

Custom CSS (entered in CabGrid Pro Options tab):

#cabGridProFullWidthDemo .cabGridPro {background:none;max-width:100%;padding:0;box-shadow:none;color:#fff;}

#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input {width:25%;font-size:38px;max-width:80px;line-height: 1;height: 44px;}

#cabGridProFullWidthDemo .cabGridPro form ul li select.cabGridProDropSelect, #cabGridProFullWidthDemo .cabGridPro form ul li select.cabGridProPickSelect {font-size:38px;height:44px;line-height:44px;max-width:400px;}

#cabGridProFullWidthDemo .chosen-container-single .chosen-single {height:44px;font-size:33px;line-height:44px;}

#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers label img, #cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage label img {max-width:44px;height:44px;max-height:44px;display:none;}

#cabGridProFullWidthDemo .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers {margin-right:17px;}

#cabGridProFullWidthDemo .cabGridPro 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;}

#cabGridProFullWidthDemo .cabGridPro 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;}

#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProRtnSelect {height: 44px;vertical-align: top;}

#cabGridProFullWidthDemo .cabGridProPrice {padding:10px;margin:10px;color:#f0edf7;text-shadow:0px 0px 1px #222;}

#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input {background: #fafafa;}

#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProFromSelect label, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProToSelect label,#cabGridProFullWidthDemo label#passengers-error.error {display:none !important;background-image:none !important;}

#cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProPassengers input.error, #cabGridProFullWidthDemo .cabGridPro form ul li.cabGridProLuggage input.error {background-color:rgba(255,0,0,0.3);}

#cabGridProFullWidthDemo .cabGridProButton, #cabGridProFullWidthDemo .cabGridProBookButton {font-size:32px;padding:8px 50px;}

#cabGridProFullWidthDemo .cabGridProMessage {color:#f7f7ff;}

Need a Hand?

Hire Us!

HTML:
<div class="cab-grid-green-squared">[cabGridPro icons="light"]</div>

CSS:

.cab-grid-green-squared .cabGridPro {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;}

.cab-grid-green-squared .cabGridPro form ul.cabGridProJourneyDetails {margin: 0;}

.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails {border:none;border-radius: 0; border-top: 2px groove rgba(212, 209, 209, 0.3);margin-top:0 !important;}

.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li label {font-size: 12px;text-transform: uppercase;padding-bottom: 3%;}

.cab-grid-green-squared .cabGridPro form ul li input,

.cab-grid-green-squared .cabGridPro form ul li.cabGridProTickets input,

.cab-grid-green-squared .cabGridPro form ul li.cabGridProPassengers input,

.cab-grid-green-squared .cabGridPro form ul li.cabGridProLuggage input,

.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect,

.cab-grid-green-squared .cabGridPro 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);}

.cab-grid-green-squared .cabGridPro form ul li textarea,

.cab-grid-green-squared .cabGridPro 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);}

.cab-grid-green-squared .cabGridPro .chosen-container .chosen-single,

.cab-grid-green-squared .cabGridPro 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);}

.cab-grid-green-squared .cabGridPro .chosen-container-single .chosen-single div b {background-position: 3px 6px;}

.cabGridProPrice .cabGridProBookButton,

.cab-grid-green-squared .cabGridPro .chosen-container .chosen-drop {border-radius:0;color:#999;background: rgb(248,248,248);}

.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li {color:#999;}

.cab-grid-green-squared .cabGridPro .cabGridProPrice {border-top: 2px groove rgba(222, 221, 221, 0.28);transition:all 2s ease;}

.cab-grid-green-squared .cabGridPro .cabGridProPrice,.cab-grid-green-squared .cabGridPro .cabGridProMessage {color:#f7f7f7;padding-top: 2%;}

.cab-grid-green-squared .cabGridPro .cabGridProSendBookingRequest {height:auto !important;}

.cab-grid-green-squared .cabGridPro form ul li label.error {color:#69ec54;font-size:12px !important;}

.cab-grid-green-squared .cabGridPro h1 {border-radius: 0;border: none;color: #e4622d !important;text-shadow: none;background: rgb(220, 255, 184);border-bottom: 2px solid #cacaca;}

.cab-grid-green-squared .cabGridPro .cabGridProDateSelect {line-height:normal !important;font-size:13px !important;}

.cab-grid-green-squared .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect select {height:auto;font-family:Calabri,Verdana,"Helvetica Neue",Trebuchet,"Trebuchet MS",Helvetica,Arial,sans-serif;}

.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li {text-align:center;padding:5px 0 !important;font-size:18px;}

.cab-grid-green-squared .cabGridPro .chosen-container .chosen-results li.highlighted {background: rgb(190, 225, 154);}

.cab-grid-green-squared .cabGridPro .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;}

.cab-grid-green-squared .cabGridPro .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;}

.cab-grid-green-squared .cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}

.cab-grid-green-squared .cabGridPro .cabGridProPrice .cabGridProBookButton {display: inline-block;font-size: 26px;vertical-align: bottom; margin: 0 0 6px 0;height: 48px;min-width:190px;max-width:50%;}

.cab-grid-green-squared .cabGridPro .cabGridVariation {margin: 6px 0 0 0;}

.cab-grid-green-squared .cabGridPro .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;}

.cab-grid-green-squared .cabGridPro .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;}

Green Squared Layout

The Cab Grid shortcode is enclosed in an HTML element with class ‘cab-grid-green-squared‘. Here we opted to use a class instead of an ID so it can be used on multiple instances.

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Standard PEAK ACCOUNT

- Standard11
- Chauffeur22
- MPV64
- Minibus129
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

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 enclosed in an HTML element with id ‘cabGridProDemoPicBG’
#cabGridProDemoPicBG .cabGridPro {background:rgba(0,0,0,0.2);} #cabGridProDemoPicBG .cabGridPro form ul.cabGridProBookDetails {background: rgba(235, 215, 255, 0.57);color: #000;text-shadow: 0px 0px 1px #fff;} #cabGridProDemoPicBG .cabGridPro 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:
[cabGridPro layout="vehicle"]

Ticket Layout

This is defined either globally in the Cab Grid Pro OPTIONS tab or through a shortcode attribute as [cabGridPro layout="tickets"]
The Cab Grid shortcode is enclosed in an HTML element with id ‘ticketsDemo’
#ticketsDemo .cabGridPro {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);}

Standard PEAK ACCOUNT

Tickets
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

We can write your custom CSS

Hire Us!

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Background Image

You may want to add a background image to the calculator (or sidebar widget) directly. This exmample is a standard Cab Grid Pro instance enclosed in an HTML element with a custom ID (cgpBGimgDemo) and a custom background image: <div id="cgpBGimgDemo">[cabGridPro icons="light"]</div>
The CSS (styling) to add the background image is as follows.
#cgpBGimgDemo .cabGridPro {background:url(/wp-content/uploads/2015/11/blurred-road-lights.jpg);background-size:cover;color: #eee;text-shadow: 0px 1px 0px #fff;} #cgpBGimgDemo .cabGridProPrice,#cgpBGimgDemo .cabGridProMessage {color:#e8e8e8;} #cgpBGimgDemo .cabGridPro form ul.cabGridProBookDetails {background: rgba(0,0,0,0.4);}

Clean/Plain Layout

The Cab Grid shortcode is enclosed in an HTML element with id ‘cgpCleanDemo’
#cgpCleanDemo {padding:0;margin:0;border:1px solid #eee;border-radius:3px;} #cgpCleanDemo .cabGridPro {box-shadow:none;background-color:transparent;background:none;margin: 0;padding: 0;} #cgpCleanDemo .cabGridPro form ul li input {border:1px solid #ddd !important;background:rgba(250,250,250,0.6);} #cgpCleanDemo .cabGridPro form ul li .cabGridProDropSelect,#cgpCleanDemo .cabGridPro form ul li .cabGridProPickSelect {margin:0;padding:0;border:none;background:transparent;} #cgpCleanDemo .cabGridProMessage,#cgpCleanDemo .cabGridProPrice, #cgpCleanDemo .cabGridPro form ul.cabGridProJourneyDetails li label,#cgpCleanDemo .cabGridPro form ul.cabGridProBookDetails li label {color: #888 !important;} #cgpCleanDemo .cabGridPro .cabGridVariation a.active {background-color:rgba(206,206,206,0.48);} #cgpCleanDemo .cabGridPro form ul.cabGridProBookDetails {border:none;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

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).

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Customizations from $49.99

Hire Us!

Sunset Layout

The Cab Grid shortcode is enclosed in an HTML element assigned a class named ‘cab-grid-sunset‘
/*SUNSET TEMPLATE*/ .cab-grid-sunset .cabGridPro {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 );} .cab-grid-sunset .cabGridPro.cgpMobileY {margin:0;padding:0;} .cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect {width:100%;} .cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails {} .cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li {background-image:none;background:transparent;text-indent:0;} .cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers,.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:inline-block;vertical-align: top; width:14.8%;margin:0;padding:0;text-align:left;} .cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cab-grid-sunset .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect {display:inline-block;vertical-align: top; width:29.9%;margin:0;padding:0;text-align:left;} .cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProPassengers, .cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProLuggage,.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProFromSelect,.cab-grid-sunset .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:45%;} .cab-grid-sunset .cabGridPro .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;} .cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li label img {display:none !important;} .cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li input:not([type="button"]) {width:100%;} .cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect {/*cursor:url(/wp-content/plugins/cab-grid-pro/i/return-icon-light.png),auto;*/width: 45px;padding: 0 !important;margin: 0;} .cab-grid-sunset .cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;} .cab-grid-sunset .cabGridPro .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;} .cab-grid-sunset .cabGridPro.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect {display:block;clear:both;width:88%;margin:10px auto;} .cab-grid-sunset .cabGridPro.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)} .cab-grid-sunset .cabGridPro 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;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li {min-height:36px;} .cab-grid-sunset .cabGridPro form ul li.cabGridProTickets input,.cab-grid-sunset .cabGridPro form ul li.cabGridProPassengers input,.cab-grid-sunset .cabGridPro form ul li.cabGridProLuggage input,.cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect .chosen-single,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect .chosen-single,.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect,.cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li textarea,.cab-grid-sunset .cabGridPro 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;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect {padding:0;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li .cabGridProDateSelect select {color:#999 !important;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li textarea {height:auto;line-height:1.3;font-size:13px;padding:3px;min-height: 36px;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li input:not([type="submit"]) {font-size:13px;padding-left:4px;} .cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-sunset .cabGridPro form ul li .cabGridProPickSelect {height:36px;} .cab-grid-sunset .cabGridPro .chosen-container-single .chosen-single div b {background-position: 4px 8px;} .cab-grid-sunset .cabGridPro form ul li .cabGridProDropSelect .chosen-drop,.cab-grid-sunset .cabGridPro 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;} .cab-grid-sunset .cabGridPro form ul li .chosen-container .chosen-drop ul.chosen-results li {padding:5px 6px !important;color:#999;} .cab-grid-sunset .cabGridPro form ul li .chosen-container .chosen-drop ul.chosen-results li.highlighted,.cab-grid-sunset .cabGridPro .cabGridProBookButton,.cab-grid-sunset .cabGridPro .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 );} .cab-grid-sunset .cabGridPro .cabGridProBookButton,.cab-grid-sunset .cabGridPro .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;} .cab-grid-sunset .cabGridPro .cabGridProPrice,.cab-grid-sunset .cabGridPro .cabGridProMessage {color: rgb(130, 25, 25) !important;text-shadow: 0px 1px 1px rgba(251, 251, 251, 0.65);} .cab-grid-sunset .cabGridPro .cabGridVariation {margin: 6px 0 0 0;} .cab-grid-sunset .cabGridPro .cabGridVariation a {border-bottom:none;border-radius:0 !important;background-color:rgba(255,255,255,0.5) !important;color:#999 !important;} .cab-grid-sunset .cabGridPro .cabGridVariation a.active {background-color:#fff !important;box-shadow:none;color:#666 !important;} .cab-grid-sunset .cabGridPro form ul.cabGridProBookDetails li label {font-size: 13px;padding-bottom: 6px;text-transform: uppercase;font-weight: bold;} .cab-grid-sunset .cabGridPro form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color:rgb(203, 57, 34);} .cab-grid-sunset .cabGridPro .cabGridProPriceDigCont {font-size:64px;line-height:64px;width: 100%;} .cab-grid-sunset .cabGridPro .cabGridProPrice img {margin: 0;display: inline-block;clear: left;height: 61px;box-shadow: none !important;border: none !important;vertical-align: bottom;padding-right: 3%;} .cab-grid-sunset .cabGridPro .cabGridProPrice .cabGridProPriceDigCont .cabGridProPriceDig {padding-right: 6%;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

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)

.cab-grid-transfers-layout {width:100%;}

.cab-grid-transfers-layout .cabGridPro {background:transparent;box-shadow:none;color:#fff !important;text-transform:uppercase !important;font-size:16px;max-width: 1170px !important;width:100% !important;margin: 0 auto;padding: 5px;}

.cab-grid-transfers-layout .cabGridPro 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*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProLuggage {display:none !important;}

/*Journey Details General*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails > li {display:inline-block;text-align:left;vertical-align: top;margin: 0 0.7%;padding: 0 !important;}

.cab-grid-transfers-layout .cabGridPro 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;}

.cab-grid-transfers-layout .cabGridPro 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*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers {width: 12%;min-width: 80px;max-width:125px;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProPassengers label {}

/*Return Box*/

.cab-grid-transfers-layout .cabGridPro 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;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {border:none;min-width:80px;text-indent:-9999px !important;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {padding:0;margin:0;width:auto;height:auto;display:none;}

.cab-grid-transfers-layout .cabGridPro 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%;}

.cab-grid-transfers-layout .cabGridPro 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;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:after {color: #000;}

/*TO/FROM boxes (general)*/

.cab-grid-transfers-layout .cabGridPro form ul li .cabGridProDropSelect,.cab-grid-transfers-layout .cabGridPro form ul li .cabGridProPickSelect {width: 100% !important;}

.cab-grid-transfers-layout .cabGridPro .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;}

.cab-grid-transfers-layout .cabGridPro .chosen-container .chosen-drop {box-shadow:none;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li input.chosen-search-input {height:auto;padding:4px;line-height:1.2;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li .chosen-container-single .chosen-single div b {height:20px;margin-top: 10px;}

/*FROM box*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect {width:30%;max-width:358px;min-width:120px;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProFromSelect label {}

/*FROM box*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect {width:30%;max-width:358px;min-width:120px;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProToSelect label {}

/*FLAGS*/

.cab-grid-transfers-layout .cabGridPro .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}

/*PRICE*/

.cab-grid-transfers-layout .cabGridPro .cabGridProPrice {color:#fff;}

.cab-grid-transfers-layout .cabGridPro .cabGridProMessage,.cab-grid-transfers-layout .cabGridPro .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}

.cab-grid-transfers-layout .cabGridPro form ul li input[type="submit"],.cab-grid-transfers-layout .cabGridPro .cabGridProPrice .cabGridProBookButton,.cab-grid-transfers-layout .cabGridPro .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;}

.cab-grid-transfers-layout .cabGridPro form ul li input[type="submit"]:hover,.cab-grid-transfers-layout .cabGridPro .cabGridProPrice .cabGridProBookButton:hover,.cab-grid-transfers-layout .cabGridPro .cabGridProPayButton:hover {background:#fff !important;color:#191F26 !important;}

/*PRICE VARIATION*/

.cab-grid-transfers-layout .cabGridPro .cabGridVariation a {border-radius:2px !important;background: #fff !important;color: #4e4e4e;}

.cab-grid-transfers-layout .cabGridPro .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*/

.cab-grid-transfers-layout .cabGridPro 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 );

}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li textarea, .cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li input {background:#fff;}

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProBookDetails li label {text-transform:uppercase;}

/*Off*/

.cab-grid-transfers-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

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).

The HTML & shortcode would look like this: (pick-up locations are restricted to the ‘Tour’ group.)
<div class="cab-grid-custom-time-layout">[cabGridPro id="Tour" icons="light" layout="time" dest="Tour"]</div>
The CSS also adds a background image to indicate a tour-style…
.cab-grid-custom-time-layout .cabGridPro {background:url(/wp-content/uploads/2017/09/time-bg.jpg);background-size:cover;background-position:top right;background-repeat:no-repeat;min-height: 300px;} .cab-grid-custom-time-layout .cabGridPro .cabGridProDropSelect {display:none;} .cab-grid-custom-time-layout .cabGridPro form ul.cabGridProBookDetails {background:rgba(0,0,0,0.42);}

Standard PEAK ACCOUNT

Passengers
Luggage
hours
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

.cab-grid-brushed-metal-layout {}

.cab-grid-brushed-metal-layout .cabGridPro {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;}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY {padding-bottom:36px;/*accommodates flags*/}

/*Passengers/Luggage/Tickets*/

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {display: inline-block;width:auto;}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak),.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth form ul.cabGridProJourneyDetails>li:not(.cabGridProBreak) {width:49%;}

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProChosenLI {width:32%;min-width:220px;}

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProChosenLI select {width:100%;}

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li label {height: 34px;min-width: 27px;}

.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProLuggage input,.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProPassengers input,.cab-grid-brushed-metal-layout .cabGridPro 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;}

.cab-grid-brushed-metal-layout .cabGridPro.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;}

.cab-grid-brushed-metal-layout .cabGridPro.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);}

.cab-grid-brushed-metal-layout .cabGridPro.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*/

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileN form ul li.cabGridProRtnSelect {height:37px;margin-left:12px;}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProRtnSelect,.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect {width:100% !important;}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul li.cabGridProRtnSelect label,.cab-grid-brushed-metal-layout .cabGridPro.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*/

.cab-grid-brushed-metal-layout .cabGridPro.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;}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY form ul.cabGridProJourneyDetails li.cabGridProChosenLI label {height:auto;}

.cab-grid-brushed-metal-layout .cabGridPro 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;}

.cab-grid-brushed-metal-layout .cabGridPro 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;}

.cab-grid-brushed-metal-layout .cabGridPro 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);}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridProJourneyDetails .chosen-container .chosen-results li.group-result {background: rgba(107, 107, 107, 0.5);color: #ffffff;}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridProJourneyDetails .chosen-container .chosen-results li.highlighted {background:rgba(0,0,0,0.5);}

/*FLAGS*/

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileY .cabGridProFlagCont {text-align: center;width: 100%;right:0;font-size: 185%;bottom: 0;}

/*PRICE*/

.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice {color:#fff;}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridProMessage,.cab-grid-transfers-layout .cabGridPro .cabGridProPriceDigCont .cabGridProRtnMsg {color:#fff;}

.cab-grid-brushed-metal-layout .cabGridPro form ul li input[type="submit"],.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice .cabGridProBookButton,.cab-grid-brushed-metal-layout .cabGridPro .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);}

.cab-grid-brushed-metal-layout .cabGridPro form ul li input[type="submit"]:hover,.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPrice .cabGridProBookButton:hover,.cab-grid-brushed-metal-layout .cabGridPro .cabGridProPayButton:hover,.cab-grid-brushed-metal-layout .cabGridProDiscount button:hover {box-shadow:inset 2px 2px 4px rgba(0,0,0,0.4);}

/*PRICE VARIATION*/

.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation {}

.cab-grid-brushed-metal-layout .cabGridPro.cabGridProRestrictedWidth .cabGridVariation {background-color:transparent;border-radius:6px;}

.cab-grid-brushed-metal-layout .cabGridPro .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);}

.cab-grid-brushed-metal-layout .cabGridPro.cgpMobileN .cabGridVariation a {}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a:first-child {border-top-left-radius: 8px;border-bottom-left-radius: 4px;}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a:last-child { border-top-right-radius: 8px;border-bottom-right-radius: 4px;}

.cab-grid-brushed-metal-layout .cabGridPro .cabGridVariation a.active {box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2);color: #000000;}

/*BOOKING FORM*/

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProBookDetails {text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.48);}

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProBookDetails li textarea,.cab-grid-brushed-metal-layout .cabGridPro 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;}

.cab-grid-brushed-metal-layout .cabGridProMessage {text-shadow: 1px 0px 1px rgba(0,0,0,0.5);}

.cab-grid-brushed-metal-layout .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*/

.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li {text-shadow:none;}

.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li h3.cabGridProExtraTitle {background-color: rgba(61, 62, 68, 0.68);}

.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li p.cabGridProExtraDesc {}

.cab-grid-brushed-metal-layout .cabGridPro form ul li.cabGridProExtras ul li p.cabGridProExtraPrice {}

/*Off*/

.cab-grid-brushed-metal-layout .cabGridPro form ul.cabGridProJourneyDetails li.cabGridProOff {display:none;}

Brushed Metal Layout

This layout makes use of a background image to give a brushed metal appearance.

Responsive design means widget looks good at any size…

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

Standard PEAK ACCOUNT

Passengers
Luggage
One-way
From
Swap selected destinations
To

Pick Up Date/Time:
Return Date/Time:
Name:
Email:
Telephone:
Pick Up:
Destination:
Inbound Flight No:
Outbound Flight No:
Custom Form Field:
Discount/Promo Code
Extras
Select additional items to add to your booking
- Water
  Chilled mineral water
  -+
  $1.491.49

No price found for this journey

Powered by Cab Grid Wordpress Taxi Plugin

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.

It makes 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.

The HTML & shortcode would look like this:
[cabGridPro class="cabGridProSquare"]
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...

Hire Us!

Cab Grid Pro Destination Groups

by TaxiMap | May 19, 2016

Segment destinations by assigning them to groups, then display a version of Cab Grid for each group. This feature allows many instances of the Cab Grid plugin to be displayed on a single web page, each with a different purpose. For example, one for airport transfers, one for school runs, and one for suburban routes. This article describes how to use the Groups feature of the Cab Grid Pro plugin for WordPress.

Basic Style Changes using CSS

by TaxiMap | May 16, 2016

How to change the appearance of the Cab Grid fare price calculator using custom CSS styling. Custom styles cab be added under the OPTIONS tab.

CabGrid Custom Booking Form Fields

by TaxiMap | May 15, 2016

Cab Grid Pro provides an online booking form that is displayed (optionally) after a price is calculated. This form contains a set of standard fields, but custom fields can be added to augment and personalise the booking form. Values entered in these form fields are included with the booking notification email.

What’s new in CabGrid Pro version 2.x?

by TaxiMap | May 11, 2016

We’re delighted to announce the availability of Cab Grid Pro version 2. This update includes several new features and under the hood enhancements. This article discusses these new features and enhancements.

Origin and Destination

by TaxiMap | Feb 17, 2016

How to configure the ORIGIN and DESTINATION options for areas in the Cab Grid Pro taxi price calculator plugin for WordPress.

Price variations and formulae

by TaxiMap | Feb 17, 2016

How to configure price variations in the Cab Grid Pro taxi price calculator plugin for WordPress. Add up to two separate price calculations applied to your main price at the click of a button.

Auto-update error

by TaxiMap | Jan 5, 2016

You may see this error when you try to install an update: Update Failed: The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature We are working on a fix for this, but we have found that if you try the update...

High Number of Areas (Places)

by TaxiMap | Jan 1, 2016

Cab Grid Pro allows an unlimited number of places to be...

What is the Cab Grid WordPress Plugin?

by TaxiMap | Jan 1, 2016

Video tutorial showing installing the plugin from the WordPress plugin directory, activating the Cab Grid plugin, configuring the currency symbol and changing messages, adding areas and specifying prices, and publishing the taxi price calculator on your WordPress website

Cab Grid Pro v1 Install & Setup Video Tutorial

by TaxiMap | Jan 1, 2016

Video tutorial showing installing and configuring the initial version (v1) of the Cab Grid Pro price calculator and taxi booking plugin for WordPress.

Cab Grid Basic Edition Install & Setup Video Tutorial

by TaxiMap | Jan 1, 2016

Video tutorial showing installing the plugin from the WordPress plugin directory, activating the Cab Grid plugin, configuring the currency symbol and changing messages, adding areas and specifying prices, and publishing the taxi price calculator on your WordPress website

Next Entries »

Styling Demos CSS library for Cab Grid Pro versions 4.5.5 and earlier

Water

Need a Hand?

Green Squared Layout

Water

Water

Vehicle Layout

Ticket Layout

Water

We can write your custom CSS

Water

Background Image

Clean/Plain Layout

Water

Hide the luggage option

Water

Customizations from $49.99

Sunset Layout

Water

“Transfers” Theme Layout

Water

Time Layout

Water

Brushed Metal Layout

Water

Water

Water

Square Layout

We can help...