CSSStyling

Cascading Style Sheets

PyMT uses CSS style sheets to let you customize the way widgtes appear when you run an application. This way you can completely customize the look and feel of your applications.

Ways to use custom Style Sheets

Edit ~/.pymt/user.css

If you create a file called user css in the PyMT home directory (USER_HOME/.pymt). PyMT will automatically load it after it loads the default CSS.

Add new CSS at runtime

mycss = '#button{ bg-color: rgba(255, 127, 0, 127); }'
css_add_sheet(mycss)

Pass a CSS style sheet at the command line?

Actually can we do this?

Default CSS sheet

This is the contents of the default css file used by pymt internally. The specific contents may change with version, and this here might not be up to date. But it should be able to give you a pretty good idea of how the CSS style sheets work with PyMT, which properties you can set, and how to specify the values.

* {
    /* text color */
    color: rgba(255, 255, 255, 255);

    /* color when something is pushed */
    color-down: rgba(150, 150, 150, 150);

    /* background color of widget */
    bg-color: rgba(60, 60, 60, 150);

    /* fonts */
    font-size: 10;
    font-name: "";
    font-weight: normal; /* normal, bold, italic, bolditalic */
    font-color: rgba(255, 255, 255, 255);

    /* borders */
    border-width: 1.5;
    border-radius: 0;
	border-radius-precision: 1;
    draw-border: 0;

    /* background alpha layer */
    draw-background: 1;
    draw-alpha-background: 0;
    alpha-background: 1 1 0.5 0.5;

    /* text shadow */
    draw-text-shadow: 0;
    text-shadow-color: rgba(22, 22, 22, 63);
    text-shadow-position: -1 1;
}

vectorslider {
    slider-color: rgba(255, 71, 0, 255);
    bg-color: rgba(51, 102, 230);
}

display {
    /* color of touch */
    touch-color: rgba(255, 0, 0, 255);
}

popup,
colorpicker,
form,
vkeyboard,
flippablewidget,
button {
    bg-color: rgba(60, 60, 60, 100);
}

formslider,
slider, xyslider, vectorslider, multislider, boundaryslider {
    padding: 8;
    bg-color: rgb(51, 51, 51);
    slider-color: rgb(255, 127, 0);
    draw-slider-border: 0;
    slider-border-radius: 0;
    slider-border-radius-precision: 1;
    draw-slider-alpha-background: 0;
    slider-alpha-background: 1 1 .5 .5;
    slider-draw-background: 1;
}

fileentryview {
    bg-color: rgba(0, 0, 0, 0);
    item-selected: rgb(255, 100, 0, 200);
    border-radius: 8;
    border-radius-precision: .5;
}

kineticcontainer {
    bg-color: rgba(90, 90, 90, 127)
}

kineticlist {
    title-draw-background: 1;
    title-color: rgb(127, 127, 127);
    draw-title-border: 0;
    title-border-radius: 0;
    title-border-radius-precision: 1;
    draw-title-alpha-background: 0;
    title-alpha-background: 1 1 .5 .5;
    scrollbar-size: 3;
    scrollbar-color: rgba(127, 127, 127, 127);
    scrollbar-margin: 3 3 3 0;
}

.kineticlist-search {
    /* kinetic search button */
    bg-color: rgba(0, 255, 0, 127);
    alpha-background: 1 1 .7 .7;
    draw-alpha-background: 1;
}

.kineticlist-delete {
    /* kinetic delete button */
    bg-color: rgba(255, 0, 0, 127);
    alpha-background: 1 1 .7 .7;
    draw-alpha-background: 1;
}

basewindow,
window {
    bg-color: rgb(5, 5, 5);
    draw-alpha-background: 0;
    alpha-background: 0.8 0.8 0.0 0.0;
}

modalwindow {
	bg-color: rgba(0, 0, 0, 200);
}

innerwindow {
    bg-color: rgba(255, 255, 255, 175);
    bg-color-move: rgba(0, 175, 0, 175);
    bg-color-full: rgba(175, 0, 0, 175);
    border-width: 30;
}

innerwindowcontainer {
    bg-color: rgba(0, 0, 0);
}

vectorslider,
objectdisplay {
    vector-color: rgb(255, 255, 255);
}

vkeyboard {
    /* onboard keyboard */
	border-color: rgb(100, 100, 100);
    border-radius: 15;
    border-radius-precision: 0.35;
	border-width: 20;
    color-down: rgba(200, 200, 200, 255);
    draw-border: 1;
    draw-key-alpha-background: 1;
    draw-key-border: 1;
    key-alpha-background: 1 1 .7 .7;
	key-border-color: rgb(60, 60, 60);
    key-border-radius: 5;
    key-border-radius-precision: 0.35;
    key-color: rgba(20, 20, 20, 255);
    key-draw-background: 1;
    margin: 10 50 10 50;
    syskey-color: rgba(20, 20, 40, 255);
}

popup {
    /* popup widget */
    border-radius: 5;
    alpha-background: 1 1 .7 .7;
    draw-alpha-background: 1;
    draw-border: 1;
}

.popup-button {
    bg-color: rgba(40, 40, 40, 255);
    alpha-background: 1 1 .7 .7;
    draw-alpha-background: 1;
    draw-border: 1;
    border-radius: 5;
}

.popup-button-submit {
    bg-color: rgba(40, 40, 70, 255);
}

video {
	bg-color: rgba(100, 100, 100, 220);
    draw-alpha-background: 1;
    alpha-background: 1 1 0.2 0.2;
    border-radius: 8;
}

.video-toggleplay,
.video-togglemute,
.video-timeline {
	bg-color: rgba(100, 100, 100, 220);

    slider-color: rgba(255, 127, 0, 200);

    draw-slider-alpha-background: 1;
    slider-alpha-background: 1 1 .6 .6;
    slider-border-radius: 8;
}

coverflow {
	bg-color: rgba(0, 0, 0, 255);
}

label {
    draw-background: 0;
}