How to Increase jqGrid toolbar / navbar icon size

Question

Here is a requirement that we received, can we increase the size Struts2-jQuery Grid /jQGrid 'Toolbar Icons' ? like Save/Delete/Find/Add etc ?

Our users would need visual accessibility in this regard. Is there any solution apart from setting the zoom size of the browser ?

Update (How we fixed it):

Step 1: Downloaded a 32px icon sprite grid
Step 2: Placed this sprite grid image in the webapp\template\mytheme\images folder
Step 3: Updated the jquery-ui.css file (which was generated for our custom theme from ThemeRoller)
Step 4: In the ICONS section update the .ui-state-default class to point the new image
Step 5: Added width: 16px; height: 16px; properties to the same class
Step 6: Adjusted the position in every image classes
Step 7: We used image editing tools to compress it's size so that we could make all icons from 32px to 24px and varied the color settings (Hue/Saturation..etc) to get different colors for various UI states.

 example: 
Changed
.ui-icon-trash { background-position: -176px -96px; }

to 

.ui-icon-trash { background-position: -352px -192px; }

This brought the new sized icons.The only challenge we face now is to find a suitable 32px css sprite grid icon image for various states (Active, Default, Hover and Error).

It would have been great if ThemeRoller has this option to generate icon set of various sizes.

Answer 1

you will have to download a new set of icons which are available in 32px, these icons come along with jquery ui custom css.

check this link for further help

http://wiki.jqueryui.com/w/page/26308090/ThemeRoller-icon-set