-
Notifications
You must be signed in to change notification settings - Fork 3
Using External Styling (Cobalt UI)
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.
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.
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
The cause of the non-perfect centering of Panel2
is because Panel1
's height is not evenly divisible by 2.
This project has been retired. Please view Cobalt 2.