When you implement Cab Grid on your web page it will render using the default styling we provide. You can modify the appearance yourself through the Styling (CSS) section under the OPTIONS tab.

However, outside factors (such as theme or plugin styling) can themselves override Cab Grid’s built in styling leading to appearance or styling problems with the interface. Examples of this could be unreadable or too small text.

To rectify these issues you need to do a bit of analysis and implement custom styling to fix the problems. Often the key to this will be using the ‘!important‘ declaration.

Let’s look at an example…
CSS Issues Example 1 - book button
In this example, the BOOK button is illegible because the font colour is too close to the background.

Using the browser’s web inspector to inspect the book button (right-click and choose Inspect Element – you may need to enable developer tools or use Chrome) we reveal the button’s styling. Here we see that the font colour is overridden by some other style declaration.
Inspect CSS
To rectify this we can add the following CSS to the ‘Styling (CSS)’ section under the OPTIONS tab on the Cab Grid admin page. We will use the !important declaration to force our styling to override any others. To begin with, we copy the selector that styles this element (.cabGridPro form ul li input[type=submit]) from the web inspector.
.cabGridPro form ul li input[type=submit] {color:#444 !important;}
Potentially, we can also force the font size to be something more readable:
.cabGridPro form ul li input[type=submit] {color:#444 !important;font-size:19px !important;}
This is the result:
Corrected CSS book button

 


Another Common Styling Issue: Footer (or other theme element) overlays Cab Grid Place Drop-down menus

This is often caused by conflicting styling in the WordPress theme. There are two approaches to fixing this…

A kind of brute-force fix is simply to add white-space (new lines) below the Cab Grid shortcode in the WordPress editor. The drawback to this is that there might be a lot of unnecessary empty space below the Cab Grid price calculator.

The same effect can also be achieved by adding a margin under the Cab Grid price calculator using CSS. To do this, the following code would be added to the ‘Styling CSS”‘ box on the OPTIONS tab of the Cab Grid admin page:

.cabGrid,.cabGridPro {margin-bottom:150px;}

However, these solutions are not particularly elegant. The correct way to fix this is to find the overlapping element and apply the right z-index value to insure that the Cab Grid drop-downs appear top-most.

To do this some investigation using the Web Inspector is required (as detailed above). The offending HTML element will need to be identified and then a z-index value applied to that element to bring the drop down to the top. Something like this:

.container {z-index:999;}

Note: this will vary from theme to theme and may also cause other layout issues. Experimentation is recommended.

 

Tags: , , , ,

Pin It on Pinterest

Share This

Share this post with your friends!