Create different CSS for Two Buttons in One Control Panel

Question

I am having a problem applying CSS to two custom OpenLayers buttons. I create a PANEL toolbar and then add 8 buttons to it. The ZoomBox, DragPan, ZoomOut, ZoomIn, and nav.next and nav.previous buttons all style the way they should. The issue is with the two BUTTON items.

As near as I can tell the OpenLayers BUTTON object only allows one CSS style called .olControlButtonItemInactive.

THE PROBLEM: I have two BUTTON objects in the PANEL and I want each one to have a different style. But, if I change the name of the CSS class from olControlButtonItemInactive the CSS no longer is picked up by the button.

I thought I could just assign a unique ID attribute to each BUTTON (for instance button #1 has an ID of 'btnMaxExtent' and button #2 has an ID of 'btnHiLite'), then create a CSS style for each one called, respectively, olControlbtnMaxExtentItemInactive and olControlbtnHiLiteItemInactive and then assign these two button styles to the olControltoolPanel class but it does not work.

Here is the script I use to create the buttons on my panel:

    var panelControls = [
            new OpenLayers.Control.ZoomBox({title: "Draw a box to ZOOM IN", text: 'Click Me'}), 
            new OpenLayers.Control.DragPan({title: "Click to PAN around map"}),
            new OpenLayers.Control.ZoomOut({title: "Click to ZOOM OUT one level"}),
            new OpenLayers.Control.ZoomIn({title: "Click to ZOOM IN one level"}),   
            new OpenLayers.Control.Button({title: "Click to go to MAX EXTENT", 
                id: 'btnMaxExtent',                                 
                trigger: zoomToExtent}),
            nav.next, nav.previous,         
            new OpenLayers.Control.Button({title: "Click once for hover info, click it again to turn off the functionality", 
                id: 'btnHiLite',
                trigger: activateHiLite})               
            ];

Just for completeness here is the script I use to add the controls to my panel:

    var toolbar = new OpenLayers.Control.Panel({'div':  document.getElementById('tlbr')});

    toolbar.addControls(panelControls);
    map.addControl(toolbar);

And here is the CSS I have now that works for the BUTTON objects but it makes both BUTTONs look the same.

I want each button to have its own CSS. If I take this same CSS script and create one for each of the BUTTONS with the names .olControlbtnMaxExtentItemInactive and .olControlbtnHiLiteItemInactive they do not work.

  .olControltoolPanel .olControlButtonItemInactive { 
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: -o-linear-gradient(top, #3e9c50, #6ed665);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
background-image: url('Img/zoom-world-mini.png');
background-repeat: no-repeat;
    }

Any suggestions would be appreciated. Thanks for taking the time to look at this!

Answer 1

If I have understood well what you have written, I guess that what you are missing is assigning a different CSS classes to each button. Each of these classes will set a background image to the div used to display the button.

Assigning a CSS class can be done when creating the button using the property displayClass:

new OpenLayers.Control.Button({
    title: 'my button', 
    id: 'myButton',                                 
    trigger: myButtonTrigger,
    displayClass: 'myButtonClass'
})

In case the control has two states, 'active' and 'inactive', according to the previous example you would have to create tow CSS classes named 'myButtonClassItemActive' and 'myButtonClassItemInactive'.

EDIT: I don't see the need of explicitly giving the button an id; OpenLayers will do it for you and, besides, likely you will not need it.

Answer 2

After trying a lot of different options here is what I did to make it work. The original problem was that I wanted to assign different CSS to two different OpenLayers.Control.BUTTON objects but for some reason they were both getting the same CSS.

What I did was remove the script that created the buttons from inside the panelControls array. Now I create variables for both buttons, assign the appropriate attributes to each variable, and then add the variable for the buttons to the panelControls array.

Each button object also gets its own block of CSS assigned to it when it is declared. Now each button gets looks different! Here is the JavaScript I use;

        var btnZoomToMaxExtent = new OpenLayers.Control.Button({ title: "MAX EXTENT",
                id: 'btnZoomToMaxExtent',
                displayClass: "btnZoomToMaxExtent",
                trigger: zoomToExtent
            }); //Calls the zoomToExtent function so that it only zooms out to the extent we tell it to instead of the map extent   
            var btnHiLite = new OpenLayers.Control.Button({ title: "Click once for hover info, click it again to turn off the functionality",
                id: 'btnHiLite',
                displayClass: "btnHiLite",
                trigger: activateHiLite
            });                             

    var panelControls = [
            new OpenLayers.Control.ZoomBox({title: "Draw a box to ZOOM IN"}),   
            new OpenLayers.Control.DragPan({title: "PAN"}),
            new OpenLayers.Control.ZoomOut({title: "ZOOM OUT"}),
            new OpenLayers.Control.ZoomIn({title: "ZOOM IN"}),
            nav.previous, nav.next, btnZoomToMaxExtent, btnHiLite                                   
            ];

and here is the CSS for both buttons. They both look similiar but have different images:

//THIS IS THE CSS FOR THE btnHiLite
.btnHiLiteItemInactive {  
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: #6ed665 url('../../img/marker.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;

}

//THIS IS THE CSS FOR btnZoomToMaxExtent
   .btnZoomToMaxExtentItemInActive { 
border-top: 1px solid #96d1f8;
background: #6ed665;
background: -webkit-gradient(linear, left top, left bottom, from(#3e9c50), to(#6ed665));
background: -webkit-linear-gradient(top, #3e9c50, #6ed665);
background: -moz-linear-gradient(top, #3e9c50, #6ed665);
 background: -ms-linear-gradient(top, #3e9c50, #6ed665);
background: #6ed665 url('../../Img/move_feature_off.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;

}