Alternate small icons for resized buttons

This question is related resizing toolbar buttons. I have just begun implementing the resizing of toolbar buttons in LIveContent Create from big buttons to small buttons by hiding the big button and recreating the button as small button. I used the example you provided in a previous question:

<x:overlay xmlns="http://xopus.com/2009/lui">
<!-- Hide default Finish Editng button -->
<ribbon-bigbutton id="FinishEditingButton" available="false"/>
<!-- Add small Finish Editing button next to Save button -->
<ribbon-smallbutton id="CustomFinishEditingButton" after="SaveButton" command="FinishEditingCommand" iconsrc="finish_editing_icon.png" />
</x:overlay>

The follow up question concerns images for the buttons. I noticed that icons_standalone.png contains the big button images upon examination with the developer tools in the browser as well as smaller versions of those icons for all except FinishEditing and CancelEditing. Is there any way in the configuration to redirect the background position to these icons? Or with JavaScript manipulating the HTML DOM? I'm assuming it would have the correct height and width based on it being defined as small button. It is a lot of effort to recreate almost a dozen images, so I want to utilize as much of out-of-the-box as possible. 

Thanks in advance!

Parents
  • Sorry, my question ended up in with the code example. icons_standalone.png contains the big button images that used upon examination with the developer tools in the browser. This file also contains small icons for each image except the Finish Editing and Cancel Editing buttons. We have to resize approx a dozen buttons. It would be nice to use the out of the box images rather than try to recreate them. Is there any way through configuration to redirect the background position of the image used? I wasn't sure if JavaScript manipulation of the HTML DOM would work if the button were toggled or disabled and then re-enabled.
Reply
  • Sorry, my question ended up in with the code example. icons_standalone.png contains the big button images that used upon examination with the developer tools in the browser. This file also contains small icons for each image except the Finish Editing and Cancel Editing buttons. We have to resize approx a dozen buttons. It would be nice to use the out of the box images rather than try to recreate them. Is there any way through configuration to redirect the background position of the image used? I wasn't sure if JavaScript manipulation of the HTML DOM would work if the button were toggled or disabled and then re-enabled.
Children