CSS style definition

Pisak style

Due to the very particular requirements of Pisak target users, almost every visual aspect of every graphical element should be easily accessed, modified and adjusted. For instance, colors be changed to distinct some button with important function, font be magnified etc. In order to achieve this goal, every Pisak widget is highly modifiable and especially every widget that is an instance of a MxStylable can have its style properties defined in a CSS file.

CSS file

CSS files accepted by Pisak applications should follow starndard CSS syntax. Objects described in a CSS file can be referenced to by their:

  • previously registered GObjects’s __gtype__;
  • previously declared 'style-class', that is __gtype__ and then 'style-class' joined with a single dot. 'style-class' name should unambiguously indicate the application that the given object is used by;
  • Mx objects hierarchy, with space or '>' sign, needs individual case examination.

Each object might have few operating states defined, they are represented by 'style-pseudo-class', such as highlighted or not. Object reference name is linked with a particular 'style-pseudo-class' name with a single colon.

Example of a CSS styling procedure:

  • first create some class and declare its GObject type:

    class Foo:
        __gtype_name__ = 'PisakFoo'
  • then create two instances of the class in the JSON file (JSON layout design) and assign different 'style-class' properties to them:

        'id': 'pisak_foo_looks_1',
        'type': 'PisakFoo',
        'style-class': 'Looks1'
        'id': 'pisak_foo_looks_2',
        'type': 'PisakFoo',
        'style-class': 'Looks2'
  • define style for these two objects in the CSS file, define also style for the objects being in a different state ('hover'):

    PisakFoo.Looks1 {
    color: white;
    background-color: red;
    font-size: 10pt;
    PisakFoo.Looks1:hover {
    color: green;
    PisakFoo.Looks2 {
    color: black;
    background-color: blue;
    font-size: 15pt;
    PisakFoo.Looks2:hover {
    color: pink;
    font-size: 20pt;
  • now, there is only one type defined but two objects of the same type that look completely different.

Properties that can be used when a class inherits from MxWidget class:


Since MxWidget suffers from the lack of documentation about the properties mentioned below, listed links lead to a complete CSS style documentation, but some features may not work with the CSS files in PISAK.

  • ‘background-color’ - sets the background color which is drawn behind background images,
  • ‘background-image’ - draws the background image,
  • ‘border-image’ - image being a content of a widget, taken from a file with a given path, usually in PNG format, specified can be amount of an image border that will be pushed close to the widget edges and not evenly expanded like the rest, middle part of an image,
  • ‘color’ - color of a widget foreground elements, usually it is color of a font or/and an icon,
  • ‘display’ - defines widget’s display type,
  • ‘font-family’ - name of a font family, must be avalaible in the system,
  • ‘font-size’ - size of a font in pixels or in points,
  • ‘font-weight’ - weight of a font, that is its thickness,
  • ‘height’ - specifies the height of the widget’s area,
  • ‘margin’ - sets the thickness of the margin area,
  • ‘opacity’ - is responsible for the transparency of the widget,
  • ‘padding’ - sets the thickness of the padding area,
  • ‘text-align’ - describes how the content of a block is aligned along the inline axis,
  • ‘text-shadow’ - applies shadow effects to the text,
  • ‘visibility’ - decides whether the widget is visible or not,
  • ‘width’ - specifies the width of the widget’s area.