UIPanel Theming Parameters

The UIPanel theming block id is 'panel'.



A diagram of which part of the element is themed by which colour parameter.

UIPanel makes use of the following these colour parameters in a 'colours' block. All of these colours can also be a colour gradient:

  • "dark_bg" - The background colour/gradient of the panel element.

  • "normal_border" - The colour/gradient of the border around the panel (if it has one).


UIPanel accepts an image specified in the theme via an 'images' block. An 'images' block can have these parameters:

  • "background_image" - The image displayed on the panel. It has the following block of sub-parameters:

    • "path" - The string path to the image to be displayed. OR

    • "package - The name of the python package containing this resource - e.g. 'data.images'

    • "resource - The file name of the resource in the python package - e.g. 'splat.png' - Use a 'package' and 'resource' or a 'path' not both.

    • "sub_surface_rect" - An optional rectangle (described like "x,y,width,height") that will be used to grab a smaller portion of the image specified. This allows us to create many image surfaces from one image file.

    • "premultiplied" - Optional parameter to declare that a loaded image already contains premultiplied alpha and does not need premultiplying. Set to "1" to enable, "0" to disable (default).


UIPanel accepts the following miscellaneous parameters in a 'misc' block:

  • "shape" - Can be one of 'rectangle' or 'rounded_rectangle'. Different shapes for this UI element.

  • "shape_corner_radius" - Only used if our shape is 'rounded_rectangle'. It sets the radius, or radii, used for the rounded corners. Use a single integer to set all corners to the same radius, or four integers separated by commas to set each corner individually.

  • "border_width" - The width of the border around the element in pixels. Defaults to "1".

  • "shadow_width" - The width of the shadow around the element in pixels. Defaults to "2".

  • "tool_tip_delay" - time in seconds before the button's tool tip (if it has one) will appear. Default is "1.0".


Here is an example of a panel block in a JSON theme file, using the parameters described above.

 1 {
 2     "panel":
 3     {
 4         "colours":
 5         {
 6             "dark_bg":"#21282D",
 7             "normal_border": "#999999"
 8         },
10         "background_image":
11         {
12             "package": "data.images",
13             "resource": "splat.png",
14             "sub_surface_rect": "0,0,32,32"
15         },
17         "misc":
18         {
19             "shape": "rounded_rectangle",
20             "shape_corner_radius": "10",
21             "border_width": "1",
22             "shadow_width": "15"
23         }
24     }
25 }