Developer Discussions

[geoquery]

I have been trying to change from the default icons to custom ones that are 58 by 40 pixels which requires a change in default.css

Some of the icons on my tool bar are from default tools (using their class names like .wc_map_tb_measure_distance the css)  and some are from custom ones (using x-btn, x-btn-icon, etc)

The CSS below displays the new icons full size (except for the map scale one which i can not find where to change to a different image) but I cannot figure out how to change the little outline around each of them.  In addition the css changes are messing up the Errors,Warnings, Messages tabs on the Notification log among others.  I have Firefox installed and am using the developer tools to inspect the icons, etc but can't get find what is controlling the outlines around the icon images.  What I've added to default.css is below but it is not correct - any suggessions appreciated!  

.x-btn {width:58px !important;
height:43px !important;
}
.x-btn-left{width:58px !important;
height:43px !important;
}
.x-btn-right{width:58px !important;
height:43px !important;
}
.x-btn-center{width:58px !important;
height:43px !important;_map_scale_
}

.x-btn-icon{width:58px !important;
height:43px !important;
}

.x-btn-icon-left{width:58px !important;
height:43px !important;
}
.x-btn-icon-right{width:58px !important;
height:43px !important;
}
.x-btn-icon-center{width:58px !important;
height:43px !important;
}

.wc_map_tb_feature_info{width:58px !important;
height:43px !important;
}

.wc_map_tb_measure_distance{width:58px !important;
height:43px !important;
}
.wc_map_tb_measure_area{width:58px !important;
height:43px !important;
}
.wc_map_tb_measure_clear{width:58px !important;
height:43px !important;
}
.wc_map_tb_notifications {width:58px !important;
height:43px !important;
}

.wc_map_tb_print_map {width:58px !important;
height:43px !important;
}

.wc_map_tb_fit_all{width:58px !important;
height:43px !important;

[geoquery]

Made progress...changed my GP.ui.toolbar.add to iconCls: 'x-btn-icon2' instead of 'x-btn-icon', and then made css styles for x-btn-icon2 so they don't interfer with x-btn-icon.  Made my own zoom_all so i could move it with my custom zoom-in and zoom-out.  Only 1 problem remains - how can i make the icons just a little taller  - specifying a height doesn't work.  The width i am specifying is the width of the icon image.

My remaining problem is i include a height the icons show the full image but i get the blue picket fence at bottom.  If i don't include a height all looks great except the very top and bottom of the icons are cut off.

.wc_map_tb_feature_info{width:62px !important;
height: 40px !important;
}

.wc_map_tb_measure_distance{width:62px !important;
height: 40px !important;

}
.wc_map_tb_measure_area{width:62px !important;
height: 40px !important;
}
.wc_map_tb_measure_clear{width:62px !important;
height: 40px !important;
}
.wc_map_tb_notifications {width:62px !important;
height: 40px !important;
}

.wc_map_tb_print_map {width:62px !important;
height: 40px !important;
}

.wc_map_tb_fit_all{width:62px !important;
height: 40px !important;
}

.wc_map_tb_mc_switch {width:62px !important;
height: 40px !important;
}

.x-btn-icon2 {width:62px !important;

height: 40px !important;

}

.x-toolbar {
display: block;
background: #DFDFD0;
position: relative;
zoom: 1;

border-style: solid;
border-width: 0;
padding: 0;

height: 44px !important;
}

[jan.neumann]

Hi Jane,

This looks like the style is generated as a part of JS listener (element hover action).

As far as I could see those could be table elements such as <td> that are forming the cells which in the end appear only as a button. Something most likely generated by ExtJS framework. The work-around could be to try to find those HTML elements and remove / hide them using jQuery, or find apply different style during run-time.

Or, I suggest you to consider creating a Development ticket and get a help on most rational approach.

Regards,

Jan