Note
The CSS code on this page is geared primarily to Cab Grid Pro version 4 or earlier and may require some further adjustments to be applied to Cab Grid Pro version 5 or later. However, the basic principles remain the same so only minor updates should be necessary.
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). 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.
Text-based return button
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 .cabGridProJourneyDetails li.cabGridProRtnSelect {width: 45px;padding: 0 !important;margin: 0;background-image:none;background:transparent;text-indent:0;}
.cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro .cabGridProJourneyDetails li.cabGridProRtnSelect label {height:auto !important;float:none !important;text-indent: 0 !important;background-image: none !important;display: block !important;line-height: 1 !important;font-weight: bold !important;text-transform: uppercase;font-size: 9px !important;margin: 2px 0 0 0;text-align: center;padding: 2px !important;cursor:ew-resize;min-width:49px;}
.cabGridPro.cgpMobileY .cabGridProJourneyDetails li.cabGridProRtnSelect {display:block;clear:both;width:88%;margin:10px auto;}
.cabGridPro.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)}Tick Box with label
This snippet mimics a tick-box and changes the label text.
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {height:auto;background-image:none;position:relative;min-width:80px;max-width:160px;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {background-image:none !important;text-transform:uppercase !important;display:inline-block !important;float:none !important;padding: 0 1px 0 3px !important;text-align: left;height:30px;line-height:30px;border:none;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect input {background-image:none;padding:0;margin:0;width:auto;height:auto;display:none;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {text-indent:0px;/*content:'\ ';*/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 form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {color: #000;content:'\002714';}One-way/Return Switch Icon
This snippet displays a slider switch style with labels.
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:none !important;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label {text-transform:uppercase !important;display:inline-block !important;float:none !important;padding: 0 !important;text-align: center;height:27px;line-height:27px;border:1px solid #aaa;border-radius:7px;background:rgba(255,255,255,0.45);min-width:82px;font-size:10px;color:#777;}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect label:before {display:block;width:18px;height:17px;background:#2a62bc;color:#2a62bc;content:'.';border-radius:17px;margin:3px 4px;float:right;padding:0;line-height:17px;text-align:center;box-shadow:2px 2px 4px rgba(0,0,0,0.1);}
.cabGridPro form ul.cabGridProJourneyDetails li.cabGridProRtnSelect.cabGridProRtnIcon label:before {float:left;background:#3dbc2a;color:#3dbc2a;}Alternate Icons
This snippet implements an earlier “arrow head” style version of the one-way/return icons.
.cabGridPro form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon.png);}
.cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect,.cabGridPro_widget .cabGridPro form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon.png) !important;}
.cabGridPro.cgp-light form ul li.cabGridProRtnSelect,.cabGridPro.cgp-light.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect,.cabGridPro_widget .cabGridPro.cgp-light form ul li.cabGridProRtnSelect {background-image:url(/wp-content/plugins/cab-grid-pro/i/one-way-icon-light.png) !important;}
.cabGridPro form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro_widget .cabGridPro form ul li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:url(/wp-content/plugins/cab-grid-pro/i/return-icon.png) !important;}
.cabGridPro.cgp-light form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro.cgp-light.cabGridProRestrictedWidth form ul li.cabGridProRtnSelect.cabGridProRtnIcon,.cabGridPro_widget .cabGridPro.cgp-light form ul li.cabGridProRtnSelect.cabGridProRtnIcon {background-image:url(/wp-content/plugins/cab-grid-pro/i/return-icon-light.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 |
