nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom Buttons For OverviewMap

TimSkinner

Is there a way to override the default Show Overview Map and Hide Overview Map button icons ? My users like the overview map, but want to know if they can change the icons. I have looked at the documentation for the dijit and also examined the HTML and CSS using firefox, but can't see an obvious way of doing it.

Trouver plus de publications taguées avec

Accepted answers

TimSkinner

Kelly, I tried the solution you suggested and found that I had to include '!important' in each of ther entries in my local css, then it worked fine. Thanks for your help.

All comments

TimSkinner

Kelly, I tried the solution you suggested and found that I had to include '!important' in each of ther entries in my local css, then it worked fine. Thanks for your help.

TimSkinner

Thanks kelly, I'll give that a go.

khutchins

Tim,

If you take a look at the OverviewMap.css file using Firefox you'll see references to overview.png. This is a sprite that contains all the images used by the OverviewMap widget (see attached). You can replace these images with your own images by modifying the following css classes to point to your new image.
[ATTACH=CONFIG]16478[/ATTACH]


.esriOverviewMap .ovwMaximize {
    background: url("../images/overview.png") repeat scroll 0 -130px transparent;
}
.esriOverviewMap .ovwRestore {
    background: url("../images/overview.png") repeat scroll 0 -104px transparent;
}

.esriOverviewMap.ovwTL .ovwShow, .esriOverviewMap.ovwBR .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -26px transparent;
}
.esriOverviewMap.ovwTR .ovwShow, .esriOverviewMap.ovwBL .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 0 transparent;
}
.esriOverviewMap.ovwBL .ovwShow, .esriOverviewMap.ovwTR .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -78px transparent;
}
.esriOverviewMap.ovwBR .ovwShow, .esriOverviewMap.ovwTL .ovwHide {
    background: url("../images/overview.png") repeat scroll 0 -52px transparent;
}
.esriOverviewMap .logo-med, .esriOverviewMap .logo-sm, .esriOverviewMap .bingLogo-lg {
    display: none;
}

overview.png

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.