CabGrid Pro provides the ability to change the main styles loaded for the price calculator. There are a variety of pre-defined style-sheets available that provide a starting point for any custom CSS.
The stylesheet file is set from the ‘BASE STYLES‘ drop-down menu located in the CabGrid Pro OPTIONS tab.
Pre-defined Stylesheets
In CabGrid Pro there are four pre-defined stylesheets available. See examples below.
• CabGrid Pro v5 initial styling
This is a new stylesheet re-written for version 5.0. It is designed to adapt and layout well at most sizes (responsive). It attempts to cut much of the excess CSS that has built up in the previous (v1-4) versions. A smaller style payload will help a website load faster.
This stylesheet will take cues from the theme’s styling – such as typeface (font), text colour and size.
[Also see: How to disable the drop shadow in v5 initial styles]
• Original v1-v4 styling
This is the default stylesheet used in CabGrid Pro versions 1-4. It is recommended upgrading users apply these styles if they also have custom CSS applied.
They also form the basis for alternative styling detailed on the styling demos page.
• Minimum required styling (blank)
This is a blank canvas intended for those wishing to apply their own custom styles via the ‘Styling CSS’ box. It applies only the bare minimum styles required for functionality (such as hiding and showing elements).
• Alternative styles v1-v4 (Styling Demos)
This stylesheet loads all of the alternative styles shown on the styling demos page so that the additional CSS need not be added to the Styling (CSS) box under the OPTIONS tab.
When this stylesheet is loaded, to apply one of the alternative styles, only the CLASS attribute need be added to the cabGridPro shortcode, for example:[cabGridPro class="cgp-Transfers"]
Examples:
Click a button to switch pre-defined stylesheet:
| From↓ To→ | Chelsea | Fulham | Gatwick Airport | Guildford | Hammersmith | Heathrow Airport | Islington | London (Centre) | Putney | Stansted | Tour | West End |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Fulham | $5.00 | $2.00 | $45.95 | $40.00 | $5.00 | $15.00 | $20.00 | $15.00 | $10.00 | $65.00 | $100.00 | $25.00 |
| Gatwick Airport | $20.00 | $19.00 | $10.00 | $18.00 | $25.00 | $45.00 | $30.00 | $15.00 | $75.00 | $100.00 | $100.00 | |
| Guildford | $21.00 | $20.00 | $10.00 | $17.00 | $23.00 | $33.00 | $28.00 | $20.00 | $100.00 | $100.00 | $90.00 | |
| Heathrow Airport | $15.00 | $16.50 | $25.00 | $19.75 | $14.00 | $33.00 | $20.00 | $18.25 | $110.00 | $100.00 | $35.00 | |
| Islington | $20.00 | $18.00 | $55.00 | $50.00 | $20.00 | $25.00 | $15.00 | $25.00 | $60.00 | $100.00 | $16.00 | |
| London (Centre) | $15.00 | $17.00 | $31.50 | $2.00 | $21.00 | $22.50 | $18.00 | $17.10 | $120.00 | $100.00 | $15.00 | |
| Stansted | $50.00 | $55.00 | $100.00 | $80.00 | $60.00 | $70.00 | $33.00 | $90.00 | $35.00 | $100.00 | $120.00 | |
| West End | $25.00 | $26.00 | $100.00 | $90.00 | $27.00 | $35.00 | $20.00 | $15.00 | $29.00 | $120.00 | $100.00 | $5.00 |
Hi, I am choosing V5 styles but its always showing the minimum basic layout which is not what I am looking for. Is there a full guide on this as Ive followed the process through of adding the code and css together but thelayout looks like its from the 1980’s and not the V5 style. Any assistance is appreciated! Thanks
Please try disabling the ‘Use Friendly URLs’ feature as documented here: https://cabgrid.com/help-and-support/url-rewrite-redirects-in-cab-grid-pro-v5/#cgA-rewrite-off
Also see our article on troubleshooting CSS styling issues: https://cabgrid.com/help-and-support/custom-styles/troubleshoot-styling-issues/
Hello
Metal style is not an option for some reason.