CabGrid allows you to customise the appearance of the customer facing taxi calculator interface using CSS. Custom styles cab be added to the ‘Styling CSS‘ field under the OPTIONS tab in the CabGrid Pro admin page in WordPress.

For the most part, CabGrid is built to use style cues from the active WordPress theme. So, by default, it will use the type face, font size, text colour and other attributes defined by the theme. However, it is possible to customise virtually every element – and even vary the customisation for different instances of CabGrid.

CSS is a stylesheet language that describes the presentation of a web page. CSS describes how elements must be rendered on screen, on paper, or in other media. You can learn all about CSS at W3Schools

Visual Style Builder

Our visual style builder for the Cab Grid Pro taxi calculator plugin user interface is now available. It will generate CSS code that can be pasted into the ‘Styling CSS’ box as described here.

How to change styles under the OPTIONS tab in CabGrid

Over time we aim to build up a library of pre-defined style customisations that can simply be copied and pasted. Simple examples can be found below. To implements it follow these steps:

  1. Select the code below (or from the style builder) and copy it to your clipboard (go to the EDIT menu at the top of your screen and choose COPY)
  2. Log in to your WordPress admin.
  3. Click the CabGrid menu item on the left (assuming you have CabGrid or CabGrid Pro installed)
  4. Click the OPTIONS tab
  5. Scroll to the option field labelled, ‘Styling (CSS)‘ and remove the current content of this field. (WARNING: This will remove any previous styling customisations you have made)
  6. Paste in the code you previously copied (go to the EDIT menu again and choose PASTE)
  7. Now click the SAVE CHANGES button at the bottom.

When you visit your site, you should find the style changes have been applied to the CabGrid customer interface.

Note: Styling changes are largely geared towards the shortcode implementation of Cab Grid rather than the widget, although you can directly address the CabGrid widget implementation using the class ‘.cabGridPro_widget

There are many further customisations that are possible, and you can target individual instances of the CabGrid plugin (such as the sidebar widget). We will discuss some of these techniques in future posts.

Custom CSS Code Demo

The styles below will apply a simple semi-transparent grey background and display labels instead of icons next to input fields…

.cabGridPro {box-shadow:none;background:rgba(232,232,232,0.5);text-align:left;}
.cabGridPro form ul li {display:block;}
.cabGridPro form ul li.cabGridProBreak {display:none;}
.cabGridPro .cabGridProPassengerIcon,.cabGridPro .cabGridProSuitcaseIcon {display:none !important;}
.cabGridProPassengers label:before {content: 'Number of Passengers ';}
.cabGridProLuggage label:before {content: 'Number of suitcases ';}
.cabGridPro form ul li.cabGridProFromSelect label, .cabGridPro form ul li.cabGridProToSelect label {display: inline;}
.cabGridPro form ul li label {width: 50% !important;display:inline-block !important;}

NOTE: The code above applies to the Pro version of Cab Grid by referencing the primary class, “.cabGridPro“. For the basic (free) version of Cab Grid, the primary class is “.cabGrid“.

Change the background

To fit a given design, simply changing the background colour of the Cab Grid plugin may be all that’s needed. It can be a fixed colour, a graduated colour, an image, or just transparent. It is controlled by the main .cabGrid[Pro] class. Here are some examples:

Transparent background:

/*Cab Grid Basic Edition*/
.cabGrid {background-color:transparent;}
/*Cab Grid Pro*/
.cabGridPro {background-color:transparent;background:transparent;}
/*Cab Grid Pro: remove v5 drop-shadow*/
.cabGridPro:after {display:none;}

Semi-Transparent background:

/*Cab Grid Basic Edition*/
.cabGrid {background-color: rgba(235, 230, 205, 0.5);}
/*Cab Grid Pro*/
.cabGridPro {background-color:rgba(235, 230, 205, 0.5);}

Solid colour background:

/*Cab Grid Basic Edition*/
.cabGrid {background-color: #ff0000; /*red*/}
/*Cab Grid Pro*/
.cabGridPro {background-color:#0000ff; /*blue*/}

Gradient background:

/*Cab Grid Basic Edition*/
.cabGrid {
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
/*Cab Grid Pro*/
.cabGridPro {
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

Picture background:

/*Cab Grid Basic Edition*/
.cabGrid {background-image: url(/path/to/image.jpg);background-size:cover;}
/*Cab Grid Pro*/
.cabGridPro {background-image: url(/path/to/image.jpg);background-size:cover;}

Hide Interface Elements

Certain Cab Grid Pro elements may be superfluous. They can be hidden from view using CSS.

One-way/Return Icon

We look at modifying the appearance of the return icon in this article, but it can be hidden using this CSS:
​.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect {display:none !important;}

Swap destinations

Shown between destination drop-downs when a price is calcualted, the swap destinations icon can be hidden using the following CSS:
​.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProSwapDests {display:none !important;}

Change the loading animation colour

When various actions take place (getting a price, submitting the booking form), a loading animation is shown. The colour of this animation can be controlled through CSS.

Loader Colour

/*red*/

.cabGridPro .la-ball-fussion {color: red;}

/*dark blue*/

.cabGridPro .la-ball-fussion {color: #00005c;}

/*green*/

.cabGridPro .la-ball-fussion {color: rgb(75,220,50);}

Need a Hand?

We can write custom CSS to match CabGrid to your site…



Tags: , , , , , ,

x
  •  
  • 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