Currently in beta, the Cab Grid style builder utility helps preview and test out custom CSS styling for the taxi fare price calculator interface. It provides a visual interface for adjusting styles for the Cab Grid calculator.
The Cab Grid style builder is not intended to be a comprehensive design tool. Its purpose is to enable basic changes such as background colour, background image, font size and colour, and border effects. Articles providing further details and specific styling adjustments are available.
Try the Cab Grid Style Builder
How to use the Cab Grid Style Builder
- Use the tabs above the Cab Grid preview interface to select a layout.
- Select the base styles from the first drop down
- Choose the base icon set
- Select which element of the interface adjustments will impact
- Adjust properties
- ADD generated CSS code to the code box
- Repeat steps 4 to 6 to add further style adjustments
- Select and copy all generated CSS code.
- Paste the copied CSS code to the ‘CSS Styles’ box under Cab Grid Pro > OPTIONS in the WordPress admin panel
- SAVE changes and view the site
Getting the most from the Style Generator
- Main Container: Use this to change the background colour or image, and apply border effects.
- General child elements: Use this to change the general font/typeface size and colour.
- Within any element’s properties, use the Show or Hide setting to remove elements from the interface.
- The Background Image property is sometimes used to display gradients. Delete or replace the background image properly if background colours are not showing.
- The style generator only provides access to high level elements. Further control can be achieved by inspecting the code and adding styles manually.