Skip to content

Using External Styling (Cobalt UI)

ebernerd edited this page Jul 1, 2016 · 1 revision

Using External Styling

External styling can be especially helpful if you don't want a cluttered main program. You can write all your styling in a separate file (in our example, styles) and load them. External styles are just baseplates, as you can override those styles in your main project file.

Understanding the Layout

External styles need a specific layout for them to work. Here's a basic rundown:

return {
  STYLENAME = {
    --contents
  },
  STYLENAME2 = { 
    --content
  }
}

The file must contain a table that is returned (hence the return { on the first line). Any other style names are tables within that master table, and must be separated by a comma.

Example

In this example, we'll have two panels that both have the same styling. However, since the styles call for percentages, their appearance will be different.

In styles

return {
	Main = {
		w = "50%",
		h = "50%",
		marginleft="25%",
		margintop="25%",
	}
}

In our project

local cobalt = dofile( "cobalt" )
cobalt.ui = dofile( "cobalt-ui/init.lua" )

Styles = cobalt.ui.loadStyles( "styles" )

Panel1 = cobalt.ui.new( { style=Styles.Main } )
Panel2 = Panel1:add( "panel", { style = Styles.Main, backColour = colours.red } )

function cobalt.draw()
	cobalt.ui.draw()
end

cobalt.initLoop()

Our result
result

The cause of the non-perfect centering of Panel2 is because Panel1's height is not evenly divisible by 2.