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