iRule  Universal Remote Control

Support Center

Tutorial: Adding Background Images

Last Updated: Dec 06, 2016 11:11AM EST

Adding a Background Image

This tutorial covers how to add a backfgound image in the Builder

  1. Add New Page.
  2. Backgrounds.
  3. Browse Images.
  4. Filter results.
  5. Select & Import.
  6. Expand Library.
  7. Select Layer.
  8. Drag and Drop.
  9. Background Folder.
  10. Select All Layers.
  11. Place Buttons.
  12. Buttons Added.
  13. Add Commands.
  14. Functional Buttons.
  15. Complete Buttons.
  16. Save

Step One: Add New Page

Step One :: Image Title

In the Panels tree, right click on your page type and select Add page from the list.


Step Two: Backgrounds

Step Two :: Image Title

Within the Page is a Backgrounds folder. Background images are in a layer separate 


Step Three: Browse Images

Step Three :: Image Title

Click on the Actions arrow in the Images tab and select Browse libraries.


Step Four: Filter results

Step Four :: Image Title

You can filter the image libraries displayed by typing the word "backgrounds" into the filter area and press the show button. The filter will only display image libraries with the word backgrounds in the description or name.


Step Five: Select & Import

Step Five :: Image Title

Select the library you wish to import by checking the box next to the name of the Device. Click on the Import button to import the image library into your Builder interface.


Step Six: Expand  Library

Step Six :: Image Title

In the Images tab, you can now view the newly imported library.

Step Seven: Select Layers

Step Seven :: Image Title

The background images are in the background layer while buttons, links and labels are in the foreground layer. Select the background layer to enable the placement of background images. Any image placed in this layer will be a background image and can not have any device commands associated with it. Background images are for visual effect only.


Step Eight: Drag and Drop

Step Eight :: Image Title

Drag and drop a background image into the main interface window. When a background image is placed, the word Background is displayed to indicate that it is a background and not a button.


Step Nine: Background Folder

Step Nine :: Image Title

In the Panels tree, you will now see the background image that was placed in the interface window.


Step Ten: Select All Layers

Step Ten :: Image Title

Select the all layers option to exit the backgrounds layer.


Step Eleven: Place Buttons

Step Eleven :: Image Title

From the Images tab, drag and drop images to be used as buttons in the main interface.


Step Twelve: Buttons added

Step Twelve :: Image Title

In the Panels tree, you can view the buttons added. Notice that the buttons are separated from the background images and have a different icon.


Step Thirteen: Add Commands

Step Thirteen :: Image Title

From the Devices tab, drag and drop device codes to the buttons. This process is the same as any other button and will not be affected by a background image. 


Step Fourteen: Functional Button

Step Fourteen :: Image Title

After Device codes are added to a button it will no longer be grayed out and is a functional button. Repeat adding Device codes to the remaining buttons on the Page.


Step Fifteen: Complete Buttons

Step Fifteen :: Image Title

All of the buttons have a Device code associated with them and are now functional.



Step Sixteen: Save and Sync

File - Save and then sync the interface to view changes  

Recent Discussions

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found
There was an error contacting Get Satisfaction
View All