Custom styling for HomeButton

[TerryRichards]

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

[ManishkumarPatel · Accepted solution]

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

[TerryRichards]

Thanks Manish. Yes, inspecting the element did help ... as you can see somewhere in html that is rendered for the widget there is a span with inner html 'Home'. I will have to inspect the widget's default styling to see what is done to hide it. In the mean time I have just set the font colour of my home class to transparent. Bit of a hack, but will work for now.

Terry

[MattDriscoll]

Thanks Manish. Yes, inspecting the element did help ... as you can see somewhere in html that is rendered for the widget there is a span with inner html 'Home'. I will have to inspect the widget's default styling to see what is done to hide it. In the mean time I have just set the font colour of my home class to transparent. Bit of a hack, but will work for now.

Terry

That text is there incase someone wanted the text instead of an icon or image. You can just use this to hide it:

[HTML].homeButton span{display:none;}[/HTML]