Change icon of a user button in dhtmlxwindows

Suite and Optimus Suite 5
#1

Hello,

I would like add a button with addUserButton on a windows. All is okay (the button works), but i would like put my own icon on this button (for export to excel function).

It seems that “label” parameter of addUserButton has no effect.

Thanks for any answer

@++
JC

#2

Hello,

an icon for a user button defined by css rules. If for example, you have added a button with id “custom” (win.addUserButton(“custom”, …)) you need to define the following css rules for it

.dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_btns div.dhtmlx_wins_btns_button .dhtmlx_button_custom_default{
…
}
.dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_btns div.dhtmlx_wins_btns_button .dhtmlx_button_custom_over_default{
…
}

.dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_btns div.dhtmlx_wins_btns_button .dhtmlx_button_custom_over_pressed{
…
}

If a button can be in disabled state, you should define also .dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_btns div.dhtmlx_wins_btns_button .dhtmlx_button_custom_disabled rule

In these rules you need to define the background-image property.

#3

I’ve created a user button as following:

wFiltro.addUserButton(“clean”, 1, “Clean filter”, “clean”);

In dhtmlxwindows_dhx_skyblue.css file

.dhtmlx_skin_dhx_skyblue div.dhtmlx_wins_btns div.dhtmlx_wins_btns_button .dhtmlx_button_clean_default{
background-image:url("…/imgs/limpiarFiltros.gif");
}

But the button’s icon appears to be the same as park button. Mine isn’t shown. What can be wrong??

Thank you,
Nerea

#4

Hello
A little code sample for you:

[code]

html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_add_default { background-image: url(../___img/add.gif); margin-left: 10px; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_add_disabled { background-image: url(../___img/add.gif); margin-left: 10px; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_add_over_default { background-image: url(../___img/add.gif); margin-left: 10px; } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_add_over_pressed { margin-left: 10px; background-image: url(../___img/add.gif); } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_delete_default { margin-left: 10px; background-image: url(../___img/delete.gif); } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_delete_disabled { margin-left: 10px; background-image: url(../___img/delete.gif); } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_delete_over_default { margin-left: 10px; background-image: url(../___img/delete.gif); } .dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_btns .dhtmlx_button_delete_over_pressed { margin-left: 10px; background-image: url(../___img/delete.gif); }
[/code] The result is the next:
#5

Thanks a lot! It worked properly with your example!

#6

You are welcome!