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.

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

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.

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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

Shortcode syntax:
[cabGridPro icons="light" class="cgp-FullWidth"]

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?

Hire Us!

Shortcode syntax:
[cabGridPro icons="light" class="cgp-GreenSquared"]

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.

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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:
[cabGridPro layout="vehicle" class="cgp-Transparent"]

Ticket Layout

This is defined either globally in the Cab Grid Pro OPTIONS tab or through a shortcode attribute as [cabGridPro layout="tickets" class="cgp-TicketDemo"]

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);}

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

We can write your custom CSS

Hire Us!

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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:
[cabGridPro icons="light" class="cgp-BGImage"]
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;}

Shortcode syntax:
[cabGridPro class="cgp-Clean"]

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

Customizations from $49.99

Hire Us!

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%;}

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

This orange and red coloured theme uses the CSS ‘content’ attribute to display text labels for the taxi journey input fields.

Shortcode syntax:
[cabGridPro class="cgp-SunSet"]

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

Shortcode syntax:
[cabGridPro class="cgp-Transfers"]

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

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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.)
[cabGridPro id="Tour" icons="light" layout="time" dest="Tour" class="cgp-Time"]
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);}

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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

Shortcode syntax:
[cabGridPro class="cgp-Metal"]

Responsive design means widget looks good at any size…

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.491.49


No price found for this journey

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:
[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!


Auto-update error

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

What is the Cab Grid WordPress Plugin?

What is the Cab Grid WordPress Plugin?

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 Basic Edition Install & Setup Video Tutorial

Cab Grid Basic Edition Install & Setup Video Tutorial

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 ReadMe

Please scroll through to see the CHANGE LOG... Cab Grid Pro users can upgrade to the latest version from their WordPress Admin Panel. Any available update will be shown on either the UPDATES page or the PLUGINS page.

Error: Email Sending Problem

Steps to troubleshoot problems sending or receiving email notifications from the CabGrid Pro taxi booking plugin for WordPress.