Troubleshooting styling issues? See this article…

Custom styling Cab Grid CSSCab Grid 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 Cab Grid Pro admin page in WordPress.

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

Over time we aim to build up a library of pre-defined style customisations that can simply be copied and pasted. Below is one such example. To implements it follow these steps:

  1. Select the code below 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 Cab Grid menu item on the left (assuming you have Cab Grid or Cab Grid 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 Cab Grid 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 Cab Grid widget implementation using the class ‘.cabGridPro_widget

There are many further customisations that are possible, and you can target individual instances of the Cab Grid 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;}

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

More custom Cab Grid styling examples here…

Tags: ,

Pin It on Pinterest

Share This

Share this post with your friends!