OpenLayers CSS Styling of Standard Control Buttons

Question

I'm using OpenLayers on a script on my page, and I'm trying to use CSS to style the standard buttons that come on the map. I followed the OpenLayers docs site in styling them like so:

.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;
}

But no matter which CSS settings I change in the above code, nothing changes on the map.

Does anyone have any ideas as to how I can style (move/resize/modify) the existing/default OpenLayers buttons that appear on a given map?

Answer 1

The custom control example explains why this is, but basically, Openlayers is dynamically loading a CSS file over yours and squashing your changes because it was added later.

You should create your map with the 'theme' option set to null; {'theme: null} in map options. Then, include the default CSS (theme/default/style.CSS) before yours, and all should be well.

Answer 2

See the answer to your other question. If you don't reference 'themes/default/style.css' file, path to images is defined inline rather that in CSS classes you mentioned above.