Cab Grid Pro has the option to offer return journeys. How these are calculated and configured are the subject of a separate article on one-way or return taxi fare price calculations.

We have spent some time labouring over how best to depict this option to visitors using the Cab Grid price calculator. To keep things neat, an icon is preferred. This allows the calculator layout to render better across different devices and screens (responsively). It also negates the impact of translating button labels. So, we have settled on the current default icons.

However, along the way there have been alternatives that may be suited to different circumstance or requirements. Whilst these have been included in some of our Cab Grid styling demos, it is possible to only target the return icons. Here, we’ll share CSS code snippets required to render these alternatives.

These styles can be implemented by adding the accompanying CSS code to the ‘Styling (CSS)’ box found under the OPTIONS tab of the Cab Grid Pro plugin’s page in the WordPress admin section.

The CSS code snippets below apply to version 5 (and higher) of the Cab Grid Pro taxi price calculator plugin. Snippets for Cab Grid Pro version 4 (and earlier) can be found here.

Text-based return button

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
This snippet hides the icons altogether and uses the label text. This text is translated so changes size in different languages and may need further styling.
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect {border: 1px solid rgba(170,170,170,.36);background: -moz-linear-gradient(top,rgba(255,255,255,.85) 0,rgba(255,255,255,.85) 50%,rgba(247,247,247,.85) 100%);background: -webkit-linear-gradient(top,rgba(255,255,255,.85) 0,rgba(255,255,255,.85) 50%,rgba(247,247,247,.85) 100%);background: linear-gradient(to bottom,rgba(255,255,255,.85) 0,rgba(255,255,255,.85) 50%,rgba(247,247,247,.85) 100%);min-height: 42px;display: flex;align-items: center;align-self: stretch;text-transform: lowercase;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image: none;text-indent: 0;line-height: 1;font-size: 15px;padding: 0;margin: 0;text-align: center;min-height: auto;cursor: ew-resize;}

Tick Box with label

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
This snippet mimics a tick-box and changes the label text.

.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect {min-height: 42px;display: flex;align-items: center;align-self: stretch;text-transform: lowercase;max-width: none;min-width: 100px;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image: none;text-indent: 0;line-height: 1;font-size: 15px;padding: 0;margin: 0;text-align: center;min-height: auto;cursor: ew-resize;white-space: nowrap;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {text-indent:0px;color: #f7f7f7;content:'\002714';display:inline-block;width:27px;height:26px;line-height:26px;background-color:rgba(255,255,255,0.45);margin:0 9px 0 0;padding:0;text-align: center;font-size:18px;border-radius: 7px;border: 1px solid #aaa;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {color: #000;content:'\002714';}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label {background-image: none;}

One-way/Return Switch Icon

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
This snippet displays a slider switch style with labels.
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect {display: flex;align-items: center;align-self: stretch;max-width: none;min-width: 100px;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image: none;text-indent: 0;font-size: 12px;margin: 0;min-height: auto;cursor: ew-resize;white-space: nowrap;text-transform: uppercase;background: linear-gradient(to bottom,rgba(255,255,255,.85) 0,rgba(255,255,255,.85) 50%,rgba(247,247,247,.85) 100%);border: 1px solid rgba(170,170,170,.36);padding: 5%;text-align: center;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {display:block;width:18px;height: 18px;background:#2a62bc;color:#2a62bc;content:'.';border-radius: 10px;margin:3px 4px;float:right;padding:0;line-height:17px;text-align:center;box-shadow:2px 2px 4px rgba(0,0,0,0.1);transition: all 0.3s;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {float:left;background:#3dbc2a;color:#3dbc2a;}

Alternate Icons

  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey
This snippet implements an earlier “arrow head” style version of the one-way/return icons.
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image: url(/wp-content/plugins/cab-grid-pro/i/one-way-icon.png) !important;background-size: contain;padding: 0;margin: 0;}
.cabGridPro .cabGridForm ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label {background-image: url(/wp-content/plugins/cab-grid-pro/i/return-icon.png) !important;}

Built-in Icons

Here are the icons [currently] included with Cab Grid Pro

Icon URL (unless WordPress in sub-directory)
/wp-content/plugins/cab-grid-pro/i/one-way-icon.png
/wp-content/plugins/cab-grid-pro/i/return-icon.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon2.png
/wp-content/plugins/cab-grid-pro/i/return-icon2.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon2-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon2-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3-light.png
/wp-content/plugins/cab-grid-pro/i/one-way-icon3-light.png
/wp-content/plugins/cab-grid-pro/i/return-icon3-light.png

Tags: , , ,

x
  •  
  • Discount/Promo Code
  • Extras

    Select additional items to add to your booking

    • Water

      Water

      Chilled mineral water

      -+

      $1.49


No price found for this journey