Using css styles to tailor InfoWindows

Tailoring the look of your VizMap application get it now


For this example we are going to use the Concerts/Venues example. The complete workbook (googlemapping.xlsm) can be downloaded and the example Parameter WorkSheet is called VenuesParameters.

Here you can learn how to  reformat the data in your Google Map popup InfoWindows by changing the contents of the given css classes.

How to modify the CSS classes that control the style of your infowindow contents

Below is a pop up info window. Each of the highlighted elements calls out the name of the classes that are used to determine the format to be used. In addition to repositioning (or not showing) certain of the elements (VizMap Element positioning) you can also change their display styles through CSS styling simply by modifying the definition of any of the classes shown below. Any added since this was written may not be shown on the image below, but their function will be clear from their name.


Default Styles

These are defined in the generated application html file as follows, but they originate from a parameter block in your application specific parameter sheet. If you are going to change these it's best to play around with the generated file till you get the look you want before committing them back to the parameter sheet. That way you can always just generate another clean one if it all messes up.

.mcinfo {
 margin: 0px;
 font-family: sans-serif;
 font-size: 0.7em;
 padding: 0px;
 background-color: #0;
 vertical-align: top;
}
.mcelementtd {
 vertical-align:top;
 align-text:left;
}
.mcli {
 display: inline;
 border: 1px solid Teal;
 padding: .2em;
 padding-bottom: 0px;
 background-color: Azure;
 border-top-left-radius: 5px;
 -moz-border-radius-topleft: 5px;
 border-top-right-radius: 5px;
 -moz-border-radius-topright: 5px;
}

.mctabselected {
 background-color: WhiteSmoke;
 border-bottom: 1px solid WhiteSmoke;
}

.mchover:hover {
 background-color: LightSeaGreen;
}

.mcselected {
 background-color: WhiteSmoke;
 margin: 0px;
 padding: .3em;
 border: 1px solid Teal;
 border-bottom-left-radius: 15px;
 -moz-border-radius-bottomleft: 15px;
 border-bottom-right-radius: 15px;
 -moz-border-radius-bottomright: 15px;
 border-top-right-radius: 15px;
 -moz-border-radius-topright: 15px;
}
.mccheck {
    width : 0.7em;
 height :0.7em;
 padding: 0px;
 margin: 0px;
}

.mcstatus {
 display: inline;
 font-family: sans-serif;
 font-size: 0.7em;
 border: 1px solid Gray;
 border-radius: 5px;
 -moz-border-radius: 5px;
 float: right;
}

.mcready {
 color: WhiteSmoke;
 background-color: Teal;
}

.mcbusy {
 color: WhiteSmoke;
 background-color: FireBrick;
}

.mctable {
 font-family: sans-serif;
 font-size: 0.7em;
 border: 1px solid Gray;
}
.mcearth {
    width:240px;
    height:180px;
    border: 1px solid gray;
   
}

.mctableheader {
 font-family: sans-serif;
 font-size: 0.6em;
 background-color: Azure;
 border: 1px solid Gray;
}

.mctweetheader {
 font-family: sans-serif;
 font-size: 1em;
 background-color: gainsboro;
 color:darkslategrey;
 align:left;
 vertical-align:top;

}
.mctweet {
 font-family: sans-serif;
 font-size: 1em;
 background-color:WhiteSmoke;
 color:DarkSlateGrey;
 align:left;
 vertical-align:top;
 
}
.mchide {
 display: none;
}

.mcshow {
 display: block;
}
There are a few of these you need to be very careful with.  mcshow and mchide are used to hide or display items and should be left alone. If you are changing mcli, mcselected and mctabselected, be aware that the border elements are very carefully selected so as to emulate Tabs (which are not a native capability of Google InfoWindows) so its best to leave those borders alone too.  

Status element

You may notice a small status reporting element on the top right. It reports on what is going on and  is red when working and green when idle. I found it useful when debugging and decided to just leave it there.

It is also controlled by Css classes ( mcstatus, mcready, mcbusy). You can adapt those if you want. If you do not want this status bar to be shown you can either change their css attribute to display:none , or you can delete the element they use from the body of the html file .. which we will come to in the next section.

Changing the parameter sheet styles permanently

Once you are happy with the results, you can commit your changes to the parameter sheet. First find the parameter block as below


You need to change the code associated with the Header parameter. By default it looks like this. You can make your style changes as required, being careful to leave everything else intact. 

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
html {
 height: 100%
}

body {
 height: 100%;
 margin: 0;
 padding: 0
}

#map_canvas {
 height: 100%
}

.mcinfo {
 margin: 0px;
 font-family: sans-serif;
 font-size: 0.7em;
 padding: 0px;
 background-color: #0;
 vertical-align: top;
}
.mcelementtd {
 vertical-align:top;
 align-text:left;
}
.mcli {
 display: inline;
 border: 1px solid Teal;
 padding: .2em;
 padding-bottom: 0px;
 background-color: Azure;
 border-top-left-radius: 5px;
 -moz-border-radius-topleft: 5px;
 border-top-right-radius: 5px;
 -moz-border-radius-topright: 5px;
}

.mctabselected {
 background-color: WhiteSmoke;
 border-bottom: 1px solid WhiteSmoke;
}

.mchover:hover {
 background-color: LightSeaGreen;
}

.mcselected {
 background-color: WhiteSmoke;
 margin: 0px;
 padding: .3em;
 border: 1px solid Teal;
 border-bottom-left-radius: 15px;
 -moz-border-radius-bottomleft: 15px;
 border-bottom-right-radius: 15px;
 -moz-border-radius-bottomright: 15px;
 border-top-right-radius: 15px;
 -moz-border-radius-topright: 15px;
}
.mccheck {
    width : 0.7em;
 height :0.7em;
 padding: 0px;
 margin: 0px;
}

.mcstatus {
 display: inline;
 font-family: sans-serif;
 font-size: 0.7em;
 border: 1px solid Gray;
 border-radius: 5px;
 -moz-border-radius: 5px;
 float: right;
}

.mcready {
 color: WhiteSmoke;
 background-color: Teal;
}

.mcbusy {
 color: WhiteSmoke;
 background-color: FireBrick;
}

.mctable {
 font-family: sans-serif;
 font-size: 0.7em;
 border: 1px solid Gray;
}
.mcearth {
    width:240px;
    height:180px;
    border: 1px solid gray;
   
}

.mctableheader {
 font-family: sans-serif;
 font-size: 0.6em;
 background-color: Azure;
 border: 1px solid Gray;
}

.mctweetheader {
 font-family: sans-serif;
 font-size: 1em;
 background-color: gainsboro;
 color:darkslategrey;
 align:left;
 vertical-align:top;

}
.mctweet {
 font-family: sans-serif;
 font-size: 1em;
 background-color:WhiteSmoke;
 color:DarkSlateGrey;
 align:left;
 vertical-align:top;
 
}
.mchide {
 display: none;
}

.mcshow {
 display: block;
}
</style>

From now on every time you generate this application it will have your changes built into the generated html. file.
Comments