Styling iShare Popups

The display name for a layer is included in the popup HTML as an H3 element. The display name is also used to create a popup-Display-Name class in the element that wraps the layer HTML.

E.g. a layer with display name Primary Schools would produce HTML similar to:

Example HTML

<div class="contentDisplay popup-Primary-Schools">
    <h3>Primary Schools</h3>
    <div class="infoResult"> 
        <p><strong><a href="http://link.to.schoola/" target="_top" title="Click here to go to the related web page">Primary School A</a></strong></p>
        <p> <strong>Admissions:</strong>Junior And Infants (4-11yrs) </p> <p> <strong>School Type:</strong>Community </p>
    </div>
    <div class="infoResult atLastResult">
        <p><strong><a href="http://link.to.schoolb/" target="_top" title="Click here to go to the related web page">Primary School B</a></strong></p>
        <p><strong>Admissions:</strong>Junior And Infants (4-11yrs)</p>
        <p><strong>School Type:</strong>Voluntary Aided </p>
    </div>
</div>

The new code can be targeted in CSS like this:

Example CSS

#atMyMaps .atPopupFeatureInfo h3 {
    /* general rule for layer titles */
}
 
#atMyMaps .atPopupFeatureInfo popup-Primary-Schools {
    /* rule for primary school HTML */
}
 
#atMyMaps .atPopupFeatureInfo popup-Primary-Schools h3 {
    /* rule for primary school title */
}

iShare Help

Styling iShare Popups

Analytics

Related content