AnsweredAssumed Answered

Custom styling for HomeButton

Question asked by trichardsesri-southafrica-esridist Employee on Feb 26, 2014
Latest reply on Feb 27, 2014 by MDriscoll-esristaff
I have added a HomeButton to my map, but want to use custom styling to make it look more like the zoom widget. I have got it working ... except for the fact that the word 'Home' now appears over the button. What am I missing?

This is the javascript to add the HomeButton:
this.homebutton = new Homebutton({
[INDENT]map: this.map,
visible: true,
theme: "homeButton",
extent: new esri.geometry.Extent(config.initialExtent)
}, "homeButtonDijit");[/INDENT]
this.homebutton.startup();[/INDENT]



This is the CSS:
/*home button custom styling*/
.homeButton {
    -moz-user-select: none;
    background-color: #FFFFFF;
    border: 2px solid #666666;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    padding: 7px;
}

/*class for the home button*/
.homeButton .home {
    background-image: url("../images/home.png");
    width:16px;
    height:16px;
    background-color: white;
}
/*Containing class for the widget's node*/
.homeButton .homeContainer {
    border:none;
}
/*Class put onto the home button while the home extent is loading*/
.homeButton .loading {
    background-image: url("../images/loading.png");
    width:16px;
    height:16px;
}

Attachments

Outcomes