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