Search code examples
cssscrollbaroverridingzoomingcloudmade

How to override cloudmade maps css with your own css?

How to override cloudmade maps css with your own css. I emmbeded code of a map to my site, and map is displayed, but on maps are credits i bottom right corner and zoom scroller. I dont mind for credits but i want to remove that zoom scroller. I tried use css: display: none; on style of cloudemade but not helping. How to put my css over theirs?

Here's the HTML code:

<div id="yjsg6" class="yjsg_grid yjsgsitew">
    <div id="user16" class="yjsgxhtml only_mod" style="width:100.00%;">
        <div class="yjsquare ">
            <div class="yjsquare_in">
                <div class="Flexible-container">
                    <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?&amp;lat=45.8122871952285&amp;lng=15.97111701965332&amp;zoom=14&amp;styleId=102945"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

And all CSS code is in this link

Thanks!

Solution

  • This hack works:

    #yjsg6 {
  margin-left: -50px;
}

    You can't affect the content of the iframe, because it's from a different origin. It should be possible to affect iframe styles with but this doesn't seem to be implemented yet.