Changing the color of the Google Map portion of the "Contact Us" widget

Support Area Forums Forward Changing the color of the Google Map portion of the "Contact Us" widget

Viewing 12 posts - 1 through 12 (of 12 total)
URL to the page in question: http://http://worcesterbox4.org
  • Author
    Posts
  • #33073

    Hi Bill,

    I’m trying to match the color of every home page widget. I haven’t been able to find the one for the Google map’s bar.

    http://i.imgur.com/Ya5Hipa.jpg

    The eventual design will be heavily red leaning – (the site I’m designing is for a emergency canteen unit – which is heavily involved in the fire service to say the least), so the blue is a real oddball on there.

    The site is nowhere near live yet, so I made sure to include the screenshot.

    Thanks in advance,

    Mike

    #33078
    Bill Robbins
    Moderator

    Hi Mike,

    Excellent question there. Google loads its maps via an iframe which is basically inserting a small web page into the existing one. Because of the way that works, you’ll need to change the color of that bar from Google’s end. On our side of it, we can change things like its height and width, but not items like the color inside.

    If I can help out, let me know.

    Thanks,
    Bill

    #33093

    Hi Bill,

    How do we do that? Sorry I didn’t get back to you sooner – this is something I’m spending my off-time doing and I don’t have access at work. If you can point me in the right direction as to how to change it, that would be appreciated!

    Mike

    #33095
    Bill Robbins
    Moderator

    Hi Mike,

    That’s a great question. To be honest, I haven’t run into an instance of a Google map I’ve made with that bar there before.

    I did a quick search and it doesn’t appear there is a way to remove it very easily. There is a post on Stack Overflow (http://stackoverflow.com/questions/31927193/hide-top-bar-in-embedded-google-map) that has a suggested way to hide it. It may be possible to adapt that technique to your map.

    Would it be possible to see past the coming soon page so that I can give this a try and see if it will work for you? Since I don’t have a map like that I’ll need to be able to see past it to see if this will work or not. Just let me know and we’ll go from there.

    Take care,
    Bill

    #33110
    This reply has been marked as private.
    #33111
    Bill Robbins
    Moderator
    This reply has been marked as private.
    #33119
    This reply has been marked as private.
    #33173

    Bill,

    On a similar subject, is it possible to change to color of links in the menu bar when you hover over them?

    Same goes for these:

    I’d really like to make them both crimson if possible.

    #33178
    Bill Robbins
    Moderator

    Good Morning Mike,

    Let’s see if this will work for the map top bar. Here’s what to do there:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. Look down for the advanced section and click on it. Then choose Custom CSS.
    3. In the box there, add this:
      
      #home-widgets .organizedthemes-contact .contact-map iframe {
      	position: relative;
      	top: -45px;
      }
      
    4. Save your changes.

    Hopefully that will hide the bar by pushing it beyond the top edge of the space for the map.

    You also might add this to your Custom CSS to set a height for your Twitter widget. That may help it fit better for you:

    
    #text-5 {
    	height: 340px;
    }
    

    You can change the color of the navigation bar’s hover state. It’s also the current page colors too. Go to the Appearance section in your WordPress dashboard and click on Customize. Click on navigation there. In that section you’ll see a spot for “Navigation Text Color (Hover) that you can use to change the color of the text there. Right below that there is one for the background. You can change the background there.

    For the footer links, in the customizer, click on the footer section. You’ll see a color picker there for footer links and one for the hover state of footer links. You can set those colors there.

    If you run into any questions or trouble, let me know.

    Thanks,
    Bill

    #33183

    Bill,

    That removed the bar for the map, which may work for some, doesn’t work for me. That map is meant to be able to be opened by site traffic. Removing the bar takes that ability away. I want to keep the bar, but change the color of it.

    Thank you for your help thus far!

    – Mike

    #33184
    Bill Robbins
    Moderator

    Mike,

    I’m afraid all I can offer is to hide it. Google is the only one who can change the color.

    Bill

    #33186

    Ok,

    Thanks anyways Bill!

    – Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Changing the color of the Google Map portion of the "Contact Us" widget’ is closed to new replies.