Css CartoDB:infowindow中的样式块已被忽略。无法覆盖自定义样式
我正在尝试在中创建一个自定义信息窗口。从中,应该可以使用块指定或替代默认样式。但似乎整个街区都被忽略了。当我查看Chrome开发工具时,我的风格根本不存在。他们不会被推翻,他们只是不在那里。不过,内联样式可以很好地工作 信息窗口弹出窗口的标记:Css CartoDB:infowindow中的样式块已被忽略。无法覆盖自定义样式,css,cartodb,Css,Cartodb,我正在尝试在中创建一个自定义信息窗口。从中,应该可以使用块指定或替代默认样式。但似乎整个街区都被忽略了。当我查看Chrome开发工具时,我的风格根本不存在。他们不会被推翻,他们只是不在那里。不过,内联样式可以很好地工作 信息窗口弹出窗口的标记: <style type="text/css"> div.cartodb-popup.v2.custom { background: #666; } div.cartodb-popup.v2.custom:before {
<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>
知道我做错了什么吗?我已经尝试过使用自定义类和不使用自定义类,但是我把它放在那里了,因为我认为一些额外的特殊性不会造成任何伤害。我敢肯定这种方法一年前就奏效了
我可以使用内联样式进行大多数样式设置,但这非常麻烦,并且不适用于伪元素,比如小的弹出箭头
有没有办法在web界面上执行此操作,或者我们需要在自己的服务器上运行此操作来编辑.js脚本,等等
这是我的地图:上面的示例已经过时,不再允许使用infowindow编辑器中的块。只能在CartoDB前端编辑器中使用CSS内联样式。要完全控制信息窗口和工具提示的外观,请使用。在本例中,我将弹出窗口的背景颜色更改为灰色:
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<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 h3,
div.cartodb-popup.v2.custom p {
color: #fff;
}
</style>
<section id="map"></section>
<script type="infowindow/html" id="template">
<div class="cartodb-popup v2 custom">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<h3>{{name}}</h3>
<p>{{description}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script type="text/javascript">
cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
tiles_loader: true,
center_lat: 48.6,
center_lon: 11.4,
zoom: 7
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(1);
// Select template from dom
subLayer.infowindow.set('template', $('#template').html());
});
</script>
奇怪的是,我能够让我的infowindow动态地变得更高,而不使用任何脚本标记。我使用web界面设置窗口的宽度,然后通过单击顶部附近的按钮将其添加到infowindow自定义HTML中 {{mtrsrc}}是我的表中的一列 这是我的密码:
<div class="cartodb-popup v2 custom_infowindow">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="row">
<div class="label"></div>
<div class="info">
<img height="300" src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />
</div>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>