I'm using OpenLayers on a script on my page, and I'm trying to use CSS to style the standard buttons that e 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?

I'm using OpenLayers on a script on my page, and I'm trying to use CSS to style the standard buttons that e 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?

• javascript
• css
• button
• openlayers

• If the background images are the buttons you speak of, then you have to change the background images to something else. Otherwise, I see nothing else in your posted code that would have anything to do with buttons. – Sparky Commented Aug 8, 2011 at 17:30
• @Sparky672 - Yes, I can change the background images, but I want to know how to style them in CSS. The OpenLayers documentation said I could style the toolbar (pan,zoom,etc) with css using the '.oldControlNavToolbar' syntax. I'm okay with the current images, I just want to move their location. Any ideas? Thanks. – dwmcc Commented Aug 8, 2011 at 17:32
• You have not posted enough code (HTML) nor explained how you "just wanted to move their location". – Sparky Commented Aug 8, 2011 at 17:34

2 Answers 2

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.

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.