How to change css classes of the Popup?

Question

How can we make changes to the look and feel of the popup? e.g. In following link, I don't want to show Maximize button, I want to keep balloon arrow longer, I want to change background color of the popup etc.

Popups with related records

I don't have map related CSS (esri.css, claro.css etc) in my environment, I download them on-the-fly when user views the map. Where can I find CSS classes of the popup?

Anonymous User · Answer

If you use a developer environment in your browser you can look at the CSS and find the classes. For instance, in Chrome I hit 'F12' which opens the developer console. Then in the map I right click the popup on the element I want to change and hit 'Inspect Element'. On the right hand side of the Element tab in the developer console all the classes affecting the pop-up element are listed. You can even change them there to see what happens and decide what you want to alter in your own CSS.

However, I have found it very difficult to override esri classes, for reasons I still don't understand. It's a good place to start though.

TracySchloss · Answer

I haven't done a whole lot of this, but you're better of starting with this example:

Customize popup | Guide | ArcGIS API for JavaScript

It isn't all CSS, there are also some sprite images involved that you'd have to edit.