How to style info windows with CSS in JavaScript API?

[johnywhy]

Hi

Is it possible to style info windows with CSS in the JavaScript API?

Thanks!

[StephenLead]

Hi Johny,

It sure is. If you haven't already done so, download Firefox and Firebug (the developer plugin).

Open one of the sample maps, open an infoWindow, and use the HTML Inspector within Firebug to see which CSS classes are being used. For example:

.infowindow .window .top .right .sprite {
    margin-top: 0;
    position: absolute;
}

.claro .infowindow .sprite {
    background-image: url("../images/claro.infowindow.png");
}

.infowindow .sprite {
    height: 1000px;
    width: 1000px;
}

.infowindow .window {
    color: #000000;
    font-family: verdana,sans-serif;
}

You'll find a whole host of classes which you can modify to style the infoWindows the way you want them. You can overwrite these classes by including them in your own CSS files / style declarations.

Steve

[KellyHutchins]

Along with the great info Steve provided you might want to check out the 'Customize Info Window' conceptual doc in the help:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_customize.htm

[johnywhy]

awesome!

but before i dig into this, can this work with the embed provided by the online map maker?

thanks!

[BretWhiteley1]

Along with the great info Steve provided you might want to check out the 'Customize Info Window' conceptual doc in the help:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_customize.htm

Kelly, this link is broken, could you please update it?

Thanks

[KellyHutchins]

Here's the link:

https://developers.arcgis.com/javascript/jshelp/intro_customize.html

[derekswingley1]

also worth reading:  http://blogs.esri.com/esri/arcgis/2012/08/15/making-your-pop-up-pop/