Additional Chili Classnames

Custom Classnames

Creating New Classnames

Creating new classnames in the skin.lua file is very simple. You can of course create them from scratch, but the classes that already exist are likely in perfect form to be copy, edited, and pasted as a new class.

For example, lets say that we want to create a new custom button. If I look in the skin.lua file, I'll see a pre-made class called skin.button. It looks like this:

skin.button = {
  TileImageBK = ":cl:tech_button_bk.png",
  TileImageFG = ":cl:tech_button_fg.png",
  tiles = {22, 22, 22, 22}, --// tile widths: left,top,right,bottom
  padding = {10, 10, 10, 10},

  backgroundColor = {0, 0, 0, 0.5},
  focusColor  = {0.94, 0.50, 0.23, 0.5},
  borderColor = {1,1,1,0},

  DrawControl = DrawButton,
}

Now, if I want to create my own, I can just copy and paste this class into a new block, and give it a different name, like this (While I'm at it, I'll make it red when I hover the mouse over it (focusColor)):

skin.example_button = {
  TileImageBK = ":cl:tech_button_bk.png",
  TileImageFG = ":cl:tech_button_fg.png",
  tiles = {22, 22, 22, 22}, --// tile widths: left,top,right,bottom
  padding = {10, 10, 10, 10},

  backgroundColor = {0, 0, 0, 0.5},
  focusColor  = {1, 0, 0, 0.5},
  borderColor = {1,1,1,0},

  DrawControl = DrawButton,
}

Using Custom Classnames

Now I have my example_button class, but how do I use it? Using custom classnames is extremely simple. You simply have to declare the custom classname when you create your element, like this:

	self.btnLogin = Button:New {
		x = 1,
		width = 130,
		bottom = 1,
		height = 70,
		caption = i18n("login_verb"),
		font = Configuration:GetFont(3),
		classname = "example_button",
		OnClick = {
			function()
				self:tryLogin()
			end
		},
	}

The important bit here is classname = "example_button",. Once you have declared the custom class, chili will use all of the parameters you have specified from that class, and any parameters that it needs that you have not specified will draw from the skin default parameters.

Window Classes

overlay_window

This class is to be used whenever you have a panel or a window that is drawn on top of existing chiligui. For example, here is the overlay class being used for the tooltip on the battle listings:

Button Classes

action_button

This class is used for buttons that are important and imply an important action, like logging in or starting a game. You can see it in this image on the Login button:

Hover state:

option_button

This class is used for options sets, or settings. You might see it on a settings option, or changing a map, etc. In this screenshot, it is shown on the register button:

Hover state:

negative_button

This class is used for showing negative states such as cancel, or exit actions. On the screenshot below, it is shown on the cancel button:

Hover state: