Advanced theming for REAPER!
ca. 2.0 beta / August 31 2007
How to create an advanced icon theme
All of the following items are optional (you can mix/match old style with new style), though you will need at least a use_pngs 1 in your rtconfig.txt to enable PNG support.
- Create a file "rtconfig.txt" in your icon theme directory
Optional lines:
- ; comment
- use_pngs 1 ; enable png support
- tcp_vupeakwidth 1 ; size (in px) of the peak hold indicator for track panel meter
- mcp_vupeakheight 1 ; size (in px) of the peak hold indicator for mixer meter
- mcp_mastervupeakheight 1 ; size (in px) of the peak hold indicator for the mixer master meter
- tcp_showborders 1 ; set to 0 to disable borders in the track panels
- mcp_showborders 1 ; set to 0 to disable borders in the mixer
- transport_showborders 1 ; set to 0 to disable borders in the transport
- use_overlays 1 ; enable button overlay image support (see below)
- mcp_altmeterpos 1 ; put MCP meters on right side
- tcp_vol_zeroline AABBGGRR ; sets the ABGR value of the TCP's volume fader zero line. FFFF0000 would be solid blue, for example (v2.0+) -- note that this used to be documented incorrectly.
- tcp_pan_zeroline AABBGGRR ; tcp pan fader zero line color (v2.0+)
- mcp_vol_zeroline AABBGGRR ; mcp vol fader zero line color (v2.0+)
- mcp_pan_zeroline AABBGGRR ; mcp pan fader zero line color (v2.0+)
- trans_speed_zeroline AABBGGRR ; transport speed fader zero line color (v2.0+)
- Panel backgrounds (you can use bmp or png, all stretched to fit -- and alpha channel is ignored):
- transport_bg.png: background image for transport
- tcp_bg.png: background image for track panels
- tcp_bgsel.png: background image for selected track panels
- mcp_bg.png: background image for mixer panels
- mcp_bgsel.png: background image for selected mixer panels
- mcp_mainbg.png: background image for master mixer panel
- mcp_mainbgsel.png: background image for selectd master mixer panel
- toolbar_bg.png: background image for toolbar
- tcp_namebg.png: background image for track name field
- mcp_namebg.png: background image for track name field in mixer
v2.0+: If you wish to have the outer edges of the background not stretched, you can define these regions by making the upper left and lower right corners pink (255,0,255), and having lines going along the edges of the image to specify the unstretched portion:
- Button images:
You can use a similarly named .png instead of the .ico. You should make it be 3 images next to eachother, for
normal, mouseover, and mouse pushed images. Alpha channel is supported. The image will be stretched to fit any buttons:
If use_overlays is set to 1, overlay images will also be loaded if found for buttons. Overlay images are useful for drawing shadows or highlights of buttons, typically outside of the button (and inside if you want it to interact nicely with other shadows as well). These images are named image_name_ol.png (i.e. track_mute_off_ol.png). These images will typically be mostly transparent, and are similar in format to the normal button image, except they should have pink lines in the upper left and lower right corners to delimit the area that would be outside of the button region.
- Fader images (all supporting alpha channel):
- tcp_volbg.png: background for track panel volume faders (stretched to fit)
- tcp_volthumb.png: thumb image for track panel volume faders
- tcp_panbg.png: background for track panel pan faders
- tcp_panthumb.png: thumb image for track panel pan faders
- mcp_volbg.png: background for mixer volume faders (VERTICAL)
- mcp_volthumb.png: thumb image for mixer volume faders (VERTICAL)
- mcp_panbg.png: background for mixer pan faders
- mcp_panthumb.png: thumb image for mixer pan faders
If the background image has an alpha of less than 0.25, then clicking the mouse on that part of the image will not do anything (the click will be ignored by the fader).
v2.0+The background images can have hints of what parts to scale similar to the panel backgrounds, above.
For the thumbs, there's some logic to allow you to specify the extents at which the thumb image should be mouse-hittable.
For example, on a track volume thumb, add an additional row at the bottom of the image, and make two 255,0,255 (pink) lines, one extending from the left edge of the image to the left edge of the mouse-hittable region, and one extending from the right edge of the mouse hitt-able image to the right edge of the image:
For vertical fader thumb images it is similar, only it is the rightmost column (rather than bottommost row).
Note that currently the thumb images aren't scaled, so you can make them whatever size you want (this may change, however).
- Meter images:
These images form the lit and unlit states of each of the VU meters. You can also have them function as a mask over the default meters by using the alpha channel (i.e. transparency = stock meter).
- tcp_vu.png: track meter:
This image should be at least 64 pixels wide (W) and a multiple of 8 pixels high (H). It consists of 8 slices of image, each W pixels wide and H/8 pixels tall. The rightmost 32 pixels of each slice will be scaled to fit the "clip indicator" for the meter, and the leftmost W-32 pixels will fill the rest. The ordering of slices is as follows:
- Left channel, dim meter, normal
- Right channel, dim meter, normal
- Left channel, lit meter, normal
- Right channel, lit meter, normal
- Left channel, dim meter, record armed
- Right channel, dim meter, record armed
- Left channel, lit meter, record armed
- Right channel, lit meter, record armed
- mcp_vu.png: mixer meter:
This image should be a multiple of 4 pixels wide (W), and at least 64 pixels tall (H). It consists of 4 slices of image, each W/4 pixels wide and H pixels tall. The topmost 32 pixels of each slice will be scaled to fit the clip indicator area, and the bottommost H-32 pixels will fill the rest of the meter. The ordering of slices is as follows:
- Left channel, dim meter
- Right channel, dim meter
- Left channel, lit meter
- Right channel, lit meter
- mcp_master_vu.png: mixer master meter:
This image should be a multiple of 8 pixels wide (W), and at least 64 pixels tall (H). It consists of 8 slices of image, each W/8 pixels wide and H pixels tall. The topmost 32 pixels of each slice will be scaled to fit the clip indicator area, and the bottommost H-32 pixels will fill the rest of the meter. The ordering of slices is as follows:
- Left channel, RMS, dim
- Left channel, peak, dim
- Right channel, RMS, dim
- Right channel, peak, dim
- Left channel, RMS, lit
- Left channel, peak, lit
- Right channel, RMS, lit
- Right channel, peak, lit
- Scrollbar image:
A tutorial for scrollbar skinning is available here.
- scrollbar.png:
This image contains all the scrollbar elements. It needs to have a dimension of 204x238px.
The pink (RGB color: 255,0,255) sections determines how each slice will be stretched. The areas delimited by the pink color will not be stretched.

The ordering of slices is as follows:
- Horizontal scrollbar background (off state) - (0,0)-(204,17)
- Horizontal scrollbar background (on state) - (0,17)-(204,34)
The horizontal scrollbar has 2 pink areas defined on line 35, one for each side of the scrollbar.
- Vertical scrollbar background (off state) - (170,37)-(187,238)
- Vertical scrollbar background (on state) - (187,37)-(204,238)
The vertical scrollbar has 2 pink areas defined on column 168, one for each side of the scrollbar.
- Horizontal thumb (off state) - (0,37)-(167,54)
- Horizontal thumb (mouseover state) - (0,54)-(167,71)
- Horizontal thumb (on state) - (0,71)-(167,88)
The horizontal thumb has 3 pink areas defined on line 89: left, middle and right sides.
- Vertical thumb (off state) - (0,91)-(17,238)
- Vertical thumb (mouseover state) - (17,91)-(34,238)
- Vertical thumb (on state) - (34,91)-(51,238)
The vertical thumb has 3 pink areas defined on column 52: top, middle and bottom sides.
- Up button (116,121)
- Left button (116,141)
- Right button (116,161)
- Down button (116,181)
- Zoom in button (116,201)
- Zoom out button (116,221)
Each button is 17x17px and has 3 states: off, mouseover, pushed.
- Horizontal zoom in/out delimiter (163,101)-(167,118)
- Vertical zoom in/out delimiter (143,114)-(160,118)
- Extended mixer views (v2.0+):
The following images can be used to customize the appearance of the extended mixer views. Alphachannel is supported on all of these.
Background images (supporting the standard panel background stretch options as described above):
- mcp_sendlist_bg.png: background of track send list
- mcp_fxlist_bg.png: background of track fx list
- mcp_master_fxlist_bg.png: background of master track fx list (wider usually -- if omitted then the normal track image will be used instead)
Per-slot button images. These are all three slices of equal height, arranged vertically (top slice being normal, second being mouseover, and third is pressed). Note that panel background stretch isn't currently supported.
- mcp_fxlist_off.png: FX list, fx is offline
- mcp_fxlist_byp.png: FX list, fx is bypassed
- mcp_fxlist_norm.png: FX list, normal state
- mcp_fxlist_empty.png: FX list, empty slot
- mcp_master_fxlist_off.png: Master FX list, fx is offline (if omitted normal track FX image used)
- mcp_master_fxlist_byp.png: Master FX list, fx is bypassed (if omitted normal track FX image used)
- mcp_master_fxlist_norm.png: Master FX list, normal state (if omitted normal track FX image used)
- mcp_master_fxlist_empty.png: Master FX list, empty slot (if omitted normal track FX image used)
- mcp_sendlist_norm.png: Send, normal
- mcp_sendlist_mute.png: Send, muted
- mcp_sendlist_empty.png: Send, empty slot
- end.
ok really the end.