CartoDB: Style block in infowindow get's ignored. Can't override custom styles

Question

I'm trying to make a custom infowindow in CartoDB Editor. From the docs, it should be possible to use a <style> block to specify or override the default styles. But it seems like the whole block get's ignored. When I look at the Chrome Dev Tools, my styles are not present at all. They don't get overridden, they are just not there. Inline styles work fine, though.

The markup for the info window popup:

<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>

Any ideas what I could be doing wrong? I already tried it with and without the custom class, but I left it in there, because i thought some extra specifity won't do any harm. I'm pretty sure this <style> approach worked a year ago.

I could do most styling using inline styles, but that's very cumbersome and doesn't work for pseudo elements, like the small popup arrow.

Any way to do this on the web interface, or do we need to host this on our own servers to edit the .js scripts, etc?

This is my map: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map

score 0 · Accepted Answer · answered Nov 12 '15 at 10:03

The example above is outdated and <style> blocks in the infowindow editor are not allowed any more. You can only use CSS inline styles in the CartoDB frontend editor. To get full control over the infowindow and the tooltip appearance, use cartoDB.js. In this example I'm changing the popup background color to grey:

<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>

score 0 · Answer 2 · edited Dec 09 '15 at 19:43

Weirdly, I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.

{{mtrsrc}} is a column in my table.

Here's my code:

  <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>

CartoDB: Style block in infowindow get's ignored. Can't override custom styles

2 Answers2