Custom styling for HomeButton

TerryRichards1

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

homebutton.png

Incorrect1.jpg

BerendVeldkamp_0-1775637940025.png

ManishkumarPatel

Hi Terry,

You can try to inspect the element and verify. Also you could refer to the below sample:
https://developers.arcgis.com/javascript/jssamples/widget_home.html

If possible can create a jsfiddle and share so its easier to troubleshoot.

Regards,
Manish

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