CartoDB Editorでカスタム情報ウィンドウを作成しようとしています。docsから、<style>
ブロックを使用してデフォルトのスタイルを指定またはオーバーライドできるはずです。しかし、ブロック全体が無視されているようです。Chrome Dev Tools を見ると、スタイルがまったく表示されていません。それらはオーバーライドされません。存在しないだけです。ただし、インライン スタイルは正常に機能します。
情報ウィンドウ ポップアップのマークアップ:
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h4 {
color: #fff;
}
div.cartodb-popup.v2.custom p {
color: #ff0;
}
</style>
<div class="cartodb-popup v2 custom">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<h4>{{boroname}}</h4>
<p>Borough code: {{borocode}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
私が間違っている可能性のあるアイデアはありますか?私はすでにクラスの有無にかかわらずそれを試しましcustom
たが、いくつかの特別な仕様が害を及ぼさないと思ったので、そこに残しました。<style>
このアプローチは1年前に機能したと確信しています。
インライン スタイルを使用してほとんどのスタイリングを行うことができましたが、それは非常に面倒で、小さなポップアップ矢印のような疑似要素では機能しません。
Web インターフェイスでこれを行う方法はありますか、それとも .js スクリプトなどを編集するために独自のサーバーでこれをホストする必要がありますか?
これは私の地図です: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map