How to change font color of directions

[Eric]

Hi,

How do I change the font color in the directions listing (directions steps). The text is dark on a dark background in my WP theme. How do I change the Text color to white ?

Thanks

[Chris]

Hi,

The directions CSS is under the class .mapp-directions. So this should work if you add it to your styles.css:

.mapp-directions {
  color : white;
}

Depending on the theme, you may need to add an !important modifier or a more precise selector. You can check the CSS that is actually being applied using Firebug or IE F12 developer tools.

[Eric]

Hi Chris,

I tried adding the code to my theme’s style.css editor, but without effect. I tried it with and without the !important modifier. The plugin is installed on a mobile site built on WordPress, here:

http://m.evanhcpa.com/location

[Chris]

Hi,

Sorry, I thought you meant the directions form. The step-by-step route for the directions is generated and styled by Google.

MapPress does wrap the step-by-step in a div with class “mapp-dir-renderer”, though, so this may do what you want:

.mapp-dir-renderer {
  background-color: black !important;
  color: white !important;
}

It might be easier to just make the directions background white (as Google was assuming it would be) so the text shows up:

.mapp-dir-renderer {
  background-color: white;
}

If you find that you need to style individual parts of the directions, Google uses classes that begin with “adp” (“adp”, “adp-list”, “adp-fullwidth”, etc.). You can use Firebug or IE Developer tools to see how they’re being set.

[Eric]

Thanks, that worked. I wasn’t able to change the font color, but I was able to change the background color, so now it’s working fine.

[Author]

Posts