topic Re: How to style info windows with CSS in JavaScript API? in ArcGIS JavaScript Maps SDK Questions

How to style info windows with CSS in JavaScript API?

johnywhy — Wed, 24 Aug 2011 16:11:02 GMT

Hi

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

Thanks!

Re: How to style info windows with CSS in JavaScript API?

StephenLead — Sun, 12 Dec 2021 07:54:24 GMT

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

Re: How to style info windows with CSS in JavaScript API?

KellyHutchins — Thu, 25 Aug 2011 14:45:51 GMT

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

Re: How to style info windows with CSS in JavaScript API?

johnywhy — Sat, 27 Aug 2011 01:03:16 GMT

awesome!

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

thanks!

Re: How to style info windows with CSS in JavaScript API?

BretWhiteley1 — Tue, 11 Feb 2014 19:08:50 GMT

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

Re: How to style info windows with CSS in JavaScript API?

KellyHutchins — Tue, 11 Feb 2014 19:38:19 GMT

Here's the link:

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

Re: How to style info windows with CSS in JavaScript API?

derekswingley1 — Tue, 11 Feb 2014 20:01:14 GMT

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