Images on custom Ribbon controls
Intro
On this page I show you a few ways to display the image you want on a custom control on the Ribbon.
But before we start we first download the example workbooks and pictures.
Download the example workbooks and pictures
Create a new folder on your Desktop and unzip the files in this folder.
Note: If you are not familiar with the Custom UI Editor read the information on this page first.
http://www.rondebruin.nl/ribbon.htm
Use Built-in images
Open workbook Image1 to test the example below
I use the RibbonX below to add the custom button.
<button id="customButton1" label="Label 1" size="large" onAction="Macro1" imageMso="HappyFace" />
You see that I use imageMso="HappyFace" to tell Excel which image I want to see on the button.
There are 1871 built-in images that you can use in your RibbonX, but how do you find the image names?
There are a few downloads in this section "Find the names of the button images" on this page :
http://www.rondebruin.nl/ribbon.htm
Use Custom images
Example 1 : Open workbook Image2 to test the example below
I add the picture ron.png into the Excel file with the "Insert Icons" option in the Custom UI Editor.
I use the RibbonX below to add the custom button.
<button id="customButton1" label="Label 1" size="large" onAction="Macro1" image="ron" />
You see that I use image="ron" to tell Excel which image I want to see on the button.
Example 2 : Open workbook Image3 to test the example below
In Example 1 the pictures are a part of the Excel file but we can also load pictures that are
in another location. In this example the pictures must be in the same location as the Excel file.
You see that the files Lightoff.png and Lighton.png that I use are in the same folder with example files.
I use the Ribbon attribute getImage with a VBA callback to display custom images on the buttons.
I also use the Ribbon attribute getLabel with a VBA callback to display labels on the buttons.
I use the RibbonX below to add the custom buttons.
<button id="customButton1" size="large" onAction="Macro1" getLabel="GetLabel" getImage="GetImage" />
<button id="customButton2" size="large" onAction="Macro2" getLabel="GetLabel" getImage="GetImage" />
See the GetImage and GetLabel callbacks in the VBA editor.
Change image with VBA after you open the file
In the three examples below I use a toggle button but you can use other controls also.
The image will change when the button is pressed or not pressed.
Note: Look good at the RibbonX and the VBA code in the files below.
Example 1 : Open workbook Image4 to test the example
I use two built-in images in this example.
See the information in the first section of this page for finding the names of all 1871 built-in images.
Example 2 : Open workbook Image5 to test the example
In Example 1 the pictures are a part of the Excel file but we can also load pictures that are
in another location. In this example the pictures must be in the same location as the Excel file.
You see that the files Lightoff.png and Lighton.png that I use are in the folder with example files.
Example 3 : Open workbook Image6 to test the example below.
In this example I use custom images that are in the Excel file.
I have add the pictures into the Excel file with the "Insert Icons" option in the Custom UI Editor.
It doesn't seem possible to use the Ribbon attribute getImage with a VBA callback to
display a custom image from the customUI\images folder in the Excel file on a Ribbon control.
But you can use the workaround in this example file.
Note: When you open the workbook it will automatic do the things below
1) It will first make a copy of the Excel file.
2) Then it changes the extension of the copy of the Excel file to .zip
3) Then it Unzips the files in this zip file into a normal folder
4) Then it uses the attribute getImage to load the pictures from that normal folder.
5) When you deactivate the workbook it will delete the temporary folder/file
More information
Change the Ribbon in Excel 2007 or Excel 2010
http://www.rondebruin.nl/ribbon.htm
There are more links in the "More Information" part of that page
On this page I show you a few ways to display the image you want on a custom control on the Ribbon.
But before we start we first download the example workbooks and pictures.
Download the example workbooks and pictures
Create a new folder on your Desktop and unzip the files in this folder.
Note: If you are not familiar with the Custom UI Editor read the information on this page first.
http://www.rondebruin.nl/ribbon.htm
Use Built-in images
Open workbook Image1 to test the example below
I use the RibbonX below to add the custom button.
<button id="customButton1" label="Label 1" size="large" onAction="Macro1" imageMso="HappyFace" />
You see that I use imageMso="HappyFace" to tell Excel which image I want to see on the button.
There are 1871 built-in images that you can use in your RibbonX, but how do you find the image names?
There are a few downloads in this section "Find the names of the button images" on this page :
http://www.rondebruin.nl/ribbon.htm
Use Custom images
Example 1 : Open workbook Image2 to test the example below
I add the picture ron.png into the Excel file with the "Insert Icons" option in the Custom UI Editor.
I use the RibbonX below to add the custom button.
<button id="customButton1" label="Label 1" size="large" onAction="Macro1" image="ron" />
You see that I use image="ron" to tell Excel which image I want to see on the button.
Example 2 : Open workbook Image3 to test the example below
In Example 1 the pictures are a part of the Excel file but we can also load pictures that are
in another location. In this example the pictures must be in the same location as the Excel file.
You see that the files Lightoff.png and Lighton.png that I use are in the same folder with example files.
I use the Ribbon attribute getImage with a VBA callback to display custom images on the buttons.
I also use the Ribbon attribute getLabel with a VBA callback to display labels on the buttons.
I use the RibbonX below to add the custom buttons.
<button id="customButton1" size="large" onAction="Macro1" getLabel="GetLabel" getImage="GetImage" />
<button id="customButton2" size="large" onAction="Macro2" getLabel="GetLabel" getImage="GetImage" />
See the GetImage and GetLabel callbacks in the VBA editor.
Change image with VBA after you open the file
In the three examples below I use a toggle button but you can use other controls also.
The image will change when the button is pressed or not pressed.
Note: Look good at the RibbonX and the VBA code in the files below.
Example 1 : Open workbook Image4 to test the example
I use two built-in images in this example.
See the information in the first section of this page for finding the names of all 1871 built-in images.
Example 2 : Open workbook Image5 to test the example
In Example 1 the pictures are a part of the Excel file but we can also load pictures that are
in another location. In this example the pictures must be in the same location as the Excel file.
You see that the files Lightoff.png and Lighton.png that I use are in the folder with example files.
Example 3 : Open workbook Image6 to test the example below.
In this example I use custom images that are in the Excel file.
I have add the pictures into the Excel file with the "Insert Icons" option in the Custom UI Editor.
It doesn't seem possible to use the Ribbon attribute getImage with a VBA callback to
display a custom image from the customUI\images folder in the Excel file on a Ribbon control.
But you can use the workaround in this example file.
Note: When you open the workbook it will automatic do the things below
1) It will first make a copy of the Excel file.
2) Then it changes the extension of the copy of the Excel file to .zip
3) Then it Unzips the files in this zip file into a normal folder
4) Then it uses the attribute getImage to load the pictures from that normal folder.
5) When you deactivate the workbook it will delete the temporary folder/file
More information
Change the Ribbon in Excel 2007 or Excel 2010
http://www.rondebruin.nl/ribbon.htm
There are more links in the "More Information" part of that page