How to override cloudmade maps css with your own css? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Closed 8 years ago.

• This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
• Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.

Improve this question

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!

Answer 1

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.