Hi everyone.
I promised to write a small tutorial with regards to changing the pimatic layout.
I will update the how-to now and them when adding new code.
This is my current layout 
Please keep in mind that updating the mobile-front-end plugin to a newer version will undo all the changes. But normally i fix it within couple of minutes. Maybe this can be added to the configuration in pimatic itself in the near future
Background Pimatic Login-Gui
Location:
pimatic-app\node_modules\pimatic-mobile-frontend\app\css\themes\default\jquery.mobile-1.4.5.css
/* Page and overlay */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
**add**`background: url("http://image.jpg") no-repeat center fixed;`
**add**`-webkit-background-size: cover;`
**add**`-moz-background-size: cover;`
**add**`-o-background-size: cover;`
**add**`background-size: cover;`
background-color: #f9f9f9 /*{a-page-background-color}*/;
border-color: #bbb /*{a-page-border}*/;
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
Background Pimatic Gui
pi\pimatic-app\node_modules\pimatic-mobile-frontend\app\css\style.css
#item-lists, #item-lists .owl-wrapper-outer, #item-lists .owl-wrapper, #item-lists .owl-item {
height: 100%;
margin: 0;
**add**`background: url("http://image.jpg") no-repeat center center fixed;`
**add**`-webkit-background-size: cover; /* For WebKit*/`
**add**`-moz-background-size: cover; /* Mozilla*/`
**add**`-o-background-size: cover; /* Opera*/`
**add**`background-size: cover; /* Generic*/`
border: none;
display: block;
}
Change background color and radius of devices:
pimatic-app\node_modules\pimatic-mobile-frontend\app\css\style.css
.locked .items .no-header {
overflow: visible;
**change** `border-radius: 25px;`
**add** `background: rgba(255, 255, 255, 0.5);` (the rgba give a transparent background)
float: left;
padding-left: 1% !important;
padding-right: 1% !important;
width: 46.4%;
margin-left: 0;
Change radio button radius
pimatic-app\node_modules\pimatic-mobile-frontend\themes\graphite\base.coffee
theme.variables = {
'global-font-family': 'Helvetica,Arial,sans-serif'
'global-radii-blocks': '0.2em'
**change** `'global-radii-buttons': '1em'`
'global-box-shadow-size': '1px'
'global-box-shadow-color': 'rgba(0,0,0,0.2)'
Change slider track height
pimatic-app\node_modules\pimatic-mobile-frontend\app\css\themes\default\jquery.mobile-1.4.5.css
.ui-slider-track {
position: relative;
overflow: visible;
border-width: 1px;
border-style: solid;
**change** `height: 1px; `
margin: 0 15px 0 68px;
**change** `top: 12px;`
}
