ansaurus

Question

Answer 1

A:

Hello,

Yes I have done this in the past, it can be quite tricky. You need to use firebug to figure out the selectors you need to get and in your CSS you will have to be quite specific to override them, on occaision you might even have to use !important on the rule.

Natalie

Natalie Downe 2009-07-30 10:22:11

Thats great, how would i go about doing so, where does the external file need to be linked?Any example how-to that you can point me too.regards..k

Keet 2009-08-06 20:19:25

Natalie Downe 2009-08-07 09:18:51

Natalie Downe 2009-08-07 09:19:38

Answer 2

A:

What I generally do is create a BalloonStyle for my placemark balloons that contains a wrapper div with a CSS class like earth-balloon, which can then be styled directly from within the containing page.

For example, the KML would look like:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"&gt;
  <Document>
    <Style id="foo">
      <BalloonStyle>
        <text><![CDATA[
        <div class="earth-balloon">
          $[description]
        </div>
        ]]></text>
      </BalloonStyle>
    </Style>
    <Placemark>
      <styleUrl>#foo</styleUrl>
      <name>Bar</name>
      <description><![CDATA[
        Some <em>HTML</em> here.
      ]]></description>
      <Point>
        <coordinates>-122,37</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

the containing page itself could look like:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <!-- Earth API stuff goes here -->
</head>
<body>
  <div id="map3d"></div>
</body>
</html>

and your styles.css could then style the balloon for Placemarks with styleUrl = #foo via rules like:

.earth-balloon {
  font-family: Georgia, serif;
}

.earth-balloon em {
  color: red;
}

Hope that helps!

Roman Nurik 2009-08-12 15:54:11

ansaurus

tags:

views:

answers:

css in Google Earth plugin

related questions