Developer Discussions

Discuss topics with other Hexagon Geospatial Power Portfolio developers and experts to get the most out of our products.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Toolbar icons for GWMPub.aspx

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 help.pngbut 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;

Highlighted
Regular Contributor
Posts: 244
Registered: ‎05-01-2016

Re: Toolbar icons for GWMPub.aspx

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

Highlighted
Technical Evangelist
Posts: 1,382
Registered: ‎09-11-2015

Re: Toolbar icons for GWMPub.aspx

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

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial