horizontal-split Background
The horizontal-split background separates the background in a left and a right part.
Design

The above title design has been realized by combining a horizontal-split with a circle background:
backgrounds {
titleCircle {
type: circle;
color: red;
diameter: 80%;
anchor: right | vcenter;
x-offset: -5;
}
titleBg {
type: horizontal-split;
left-color: #f00;
right-color: #ccc;
split-pos: 75%;
}
}
title {
margin: 2;
padding: 2;
padding-top: 12;
padding-bottom: 12;
padding-left: 12;
padding-right: 8;
font-face: proportional;
font-size: large;
font-style: bold;
font-color: #ccc;
background {
type: combined;
foreground: titleCircle;
background: titleBg;
}
layout: left | expand;
}
CSS attributes:
| CSS Attribute | Default | Values | Explanation | Since |
|---|---|---|---|---|
| left-color | white | color | Left color of the background. | 1.3 |
| right-color | gray | color | Right color of the background. | 1.3 |
| split-pos | 50% | dimension (px, %), e.g. 3.5% | The split position either in percent (1% - 100%) or in pixels. 0 has a special meeting - it results in a rectangular split area. | 1.3 |
| split-side | left | left, right | The side of the split position - usually makes only sense when using an absolute pixel value, e.g. when you want to have a right side of 40 pixels. | 1.3 |