javascript - OpenLayers CSS-styling av standardkontrollknappar

Jag använder OpenLayers i ett skript på min sida, och jag försöker använda CSS för att styla de standardknappar som finns på kartan. Jag följde OpenLayers dokumentationssida för att styla dem så här:

.olControlNavToolbar div {
  display:block;
  width:  28px;
  height: 28px;
  top: 300px;
  left: 6px;
  position: relative;
}
.olControlNavToolbar .olControlNavigationItemActive {
  background-image: url("img/panning-hand-on.png");
  background-repeat: no-repeat;
}
.olControlNavToolbar .olControlNavigationItemInactive {
  background-image: url("img/panning-hand-off.png");
  background-repeat: no-repeat;
}

Men oavsett vilka CSS-inställningar jag ändrar i koden ovan ändras ingenting på kartan.

Har någon några idéer om hur jag kan styla (flytta/ändra storlek/ändra) de befintliga/standard OpenLayers-knapparna som visas på en viss karta?

Svar #1

Exemplet med anpassad kontroll förklarar varför detta händer, men i princip laddar Openlayers dynamiskt en CSS-fil ovanpå din och trycker ner dina ändringar eftersom den lades till senare.

Du bör skapa din karta med alternativet 'theme' inställt på null; {'theme: null} i kartinställningarna. Inkludera sedan standard-CSS (theme/default/style.CSS) före din egen, så bör allt vara bra.

Svar #2

Se svaret på din andra fråga. Om du inte refererar till filen 'themes/default/style.css' definieras sökvägen till bilder inline istället för i de CSS-klasser du nämnde ovan.