Include a file called styles.less in your panel root folder to define styles and apply them to your panel. RuBAN uses the less pre-processor to convert the contents of your less file to css. As less syntax is the same as css you can just use css syntax if you don't have need for pre-processing and the rules you define will come out of the pre-processor unchanged.

Root selector

To facilitate limiting the scope your css styles to your component RuBAN applies the panel's name as class to the container of your custom panel. e.g. if your panel is called mypanel then the div element containing your panel will have 'class="... mypanel"' applied to it, this allows you to define selectors like this:

styles.less

@mypanel-header-color: #00b5b4;

.mypanel  h1
{
	color: @example1-header-color;
	position: absolute;
	top: 5px;
	left: 5px;
	margin: 0px;
}

Images and static resources

RuBAN resolves your static content like images relative to the root folder of your panel (if your paths to your resources are relative paths of course). As a best practice we recommend you create a sub-folder like "img" to bundle your images, so to place a background image in your panel enter:

static content

.mypanel h1 {
	background-image: url('img/background.jpg');
}

Browser not supported