ALTUI : Theming, CSS

Thread to discuss theming and CSS

some information was provided here =>
[url=http://forum.micasaverde.com/index.php/topic,30310.msg243792.html#msg243792]http://forum.micasaverde.com/index.php/topic,30310.msg243792.html#msg243792[/url]

A simple way easy tutorial was provided by “rd” here =>
[url=http://forum.micasaverde.com/index.php/topic,33306.msg252373.html#msg252373]http://forum.micasaverde.com/index.php/topic,33306.msg252373.html#msg252373[/url]

Feel free to post here your best realizations , any theming contributions ( new button background, new theming css, etc… )

Hi this looks fantastic! I’ve installed from MIOS Apps, but what now? It shows in my apps list, I’ve reloaded LUUP several times but I must be messing something? Sorry but I’m a mere babe in arms with this stuff. I did notice that akbooer highly rated Altui, and he’s pretty smart so that’s high praise indeed!

Sounds like you may still be looking in UI5/6/7

The short answer may be to try this different URL. http:///port_3480/data_request?id=lr_ALTUI_Handler&command=home

For example, my URL looks like this: http://192.168.1.231/port_3480/data_request?id=lr_ALTUI_Handler&command=home

Hopefully that works

Perfect thank you. It’s like I opened my garage door (via Vera of course…) and found a brand new Ferrari instead of the old Ford!

amg0 I have css question. I read your post on customizing. Using your example I created a file at http:///altui.css and added this class:

.altui-device-body, .altui-scene-body {
background-color : green;
opacity : 0.699999988079071044921875;
}

and it works as expected. all the device backgrounds turn green.

But if I add a style from the J_ALTUI_plugins.js it doesn’t work. For example this class as a test attempts to override the font size for the temperature device dashboard

.altui-temperature {
font-size: 10px;
}

But nothing happens. The text stays the same. Is this expected or am I doing something wrong?

Thanks!!!

–David

[quote=“dklinkman, post:5, topic:188333”]amg0 I have css question. I read your post on customizing. Using your example I created a file at http:///altui.css and added this class:

.altui-device-body, .altui-scene-body {
background-color : green;
opacity : 0.699999988079071044921875;
}

and it works as expected. all the device backgrounds turn green.

But if I add a style from the J_ALTUI_plugins.js it doesn’t work. For example this class as a test attempts to override the font size for the temperature device dashboard

.altui-temperature {
font-size: 10px;
}

But nothing happens. The text stays the same. Is this expected or am I doing something wrong?

Thanks!!!

–David[/quote]

I need to look at the order of loading CSS. it is probably in the wrong loading order so the last one which prevails is not the right one.
Now you could force it by being mroe specific on the selector ( that gives it more weight and then browser will pick yours ) . for instance you can try

span.altui-temperature { font-size: 10px; }

V678 fixes the order of css load so that pb should go away now, you do not need the extra span anymore.

Woot. Now the temp text for the test override is tiny.

Thanks!!!

About customizing bootstrap for ALTUI for doing things like changing screen size breakpoints
cf http://forum.micasaverde.com/index.php/topic,34057.msg250360.html#msg250360

Here is a very basic introduction for people who don’t want to mess with editing css files, etc. I am posting this since I couldn’t find the “easy” answer readily.

  1. Go to https://bootswatch.com/

  2. Scroll down until you see a set that you like. For example, “Cyborg”

  3. Click on the download arrow. Copy the URL that looks like “https://bootswatch.com/cyborg/bootstrap.css”. Note, you don’t have to actually download the file. Also the format is https://bootswatch.com//bootstrap.css where is the name of the theme you like.

  4. Go to you AltUI Plugin

  5. Choose Variables

  6. Paste your link (“https://bootswatch.com/cyborg/bootstrap.css”) in the ThemeCSS variable.

  7. Refresh

Hope this helps someone who wants a really basic walkthough. Thanks for all your work on this amg0.

[quote=“rd, post:10, topic:188333”]Here is a very basic introduction for people who don’t want to mess with editing css files, etc. I am posting this since I couldn’t find the “easy” answer readily.

  1. Go to https://bootswatch.com/

  2. Scroll down until you see a set that you like. For example, “Cyborg”

  3. Click on the download arrow. Copy the URL that looks like “https://bootswatch.com/cyborg/bootstrap.css”. Note, you don’t have to actually download the file. Also the format is https://bootswatch.com//bootstrap.css where is the name of the theme you like.

  4. Go to you AltUI Plugin

  5. Choose Variables

  6. Paste your link (“https://bootswatch.com/cyborg/bootstrap.css”) in the ThemeCSS variable.

  7. Refresh

Hope this helps someone who wants a really basic walkthough. Thanks for all your work on this amg0.[/quote]
Great tutorial, thank you

Hi,

Thanks to this tip, I am now using the darkgrey ‘slate’ bootswatch theme wiht AltUI.

Great stuff and I just wanted to say thanks!

Quick question: could the theme be made a part of the startup parameters? In this case I could e.g. use a dark theme on my mobile phone and a brighter theme on my desktop.

cheers,

Jacques

[quote=“jcsv75, post:12, topic:188333”]Hi,

Thanks to this tip, I am now using the darkgrey ‘slate’ bootswatch theme wiht AltUI.

Great stuff and I just wanted to say thanks!

Quick question: could the theme be made a part of the startup parameters? In this case I could e.g. use a dark theme on my mobile phone and a brighter theme on my desktop.

cheers,

Jacques[/quote]

Good idea. implemented in v0.92.837
Themes selected this way will overide the LUA ThemeCSS variable with a client side choice ( stored in localStorage on the client device ) such that you should be able to have a different theme per devices

Wow that was fast! -:slight_smile:

Thanks a lot!

Jacques

I really like the themes, and especially the dark themes. On most of them however, there is an issue with reading text somewhere!

On all the dark themes for example, if I view Devices/AltUI/Settings, the three configuration buttons are all unreadable - light text on a light background. Similarly, with the text under the switch (grey on blue) on the control tab

And my favourite “light” theme, Flatly, in the “Event watcher” device, the control section has green text on light blue, which is very difficult to read.

Are these things that are easy to fix? I can’t see that anyone else has mentioned it, but I’m sure it must affect everyone.

I am using AltUI v0.95.859, and Firefox

[quote=“BatterBits, post:15, topic:188333”]I really like the themes, and especially the dark themes. On most of them however, there is an issue with reading text somewhere!

On all the dark themes for example, if I view Devices/AltUI/Settings, the three configuration buttons are all unreadable - light text on a light background. Similarly, with the text under the switch (grey on blue) on the control tab

And my favourite “light” theme, Flatly, in the “Event watcher” device, the control section has green text on light blue, which is very difficult to read.

Are these things that are easy to fix? I can’t see that anyone else has mentioned it, but I’m sure it must affect everyone.

I am using AltUI v0.95.859, and Firefox[/quote]
I ll a have a look to see if I can make these a little bit more following bootstrap cuss standards, but in any case you can fix it by downloading the bootswatch theme and customize it or add your own additional rules , make your own css file and declare it in the themecss configuration variable of altUI device

[quote=“amg0, post:16, topic:188333”][quote=“BatterBits, post:15, topic:188333”]I really like the themes, and especially the dark themes. On most of them however, there is an issue with reading text somewhere!

On all the dark themes for example, if I view Devices/AltUI/Settings, the three configuration buttons are all unreadable - light text on a light background. Similarly, with the text under the switch (grey on blue) on the control tab

And my favourite “light” theme, Flatly, in the “Event watcher” device, the control section has green text on light blue, which is very difficult to read.

Are these things that are easy to fix? I can’t see that anyone else has mentioned it, but I’m sure it must affect everyone.

I am using AltUI v0.95.859, and Firefox[/quote]
I ll a have a look to see if I can make these a little bit more following bootstrap cuss standards, but in any case you can fix it by downloading the bootswatch theme and customize it or add your own additional rules , make your own css file and declare it in the themecss configuration variable of altUI device[/quote]

confirmed, I changed ALTUI settings page to use bootstrap style in buttons so that it is aligned to the theme choice whether the settings page is viewed inside UI5/7 or ALTUI, but other plugins could have the same issue and the only way is to create your custom css.

for instance, I use the Slate one, but I customized it so that the switching point is smaller such that landscape rotation on iPhone6+ gives you a desktop view, plus added some darker barkgrounds to bg-info as the one from bootswatch theme a light blue.

My custom css is like


... here goes all the bootswatch Slate one with modified switching point for 'small'screen...
... then the following lines after ...

 td,button,select { 
	color:rgb(142, 142, 142)
}
.bootgrid-table th>.column-header-anchor {
	color: white;
}

.bootgrid-table th:hover,
.bootgrid-table th:active {
  background: rgb(187, 187, 187);
}

.bg-info {
  background: #03084C;	
}

then that file can be put somewhere on your vera, or what I personally do,is I put it on my googledrive and declare the url to download it in the THemecss variable of ALTUI. in essence Google drive becomes my web server !

Glad to see the on/off button is no longer bitmapped :slight_smile: Although I am very inexperienced with CSS I did theme most of my stuff a while back, mostly by trial and error, and I suspect I now have multiple redundant overrides. Anyway I’m just about to try to change the on/off button colours too as they don’t match my theme - but before I spend time on it - is that possible ?

Previously I substituted my own bitmap image for the old on/off one but the change to the new vector image has overridden that. I can’t remember what I did before - so I’ll look over it.

There seem to be 5 areas involved, my main focus will be the pale blue on but there’s also the pale grey off colour, the white round button and the two grey borders. Can I address all these individually ? A quick example of the right element and how to do this - would be great but I’ll persevere anyway, assuming it’s possible. It’s a good learning exercise although it obviously didn’t sink in much last time :frowning:

I’m in this area:
altui-button-on-off pull-right
onoffswitch-inner

As an alternative am I able to substitute my own complete graphic in CSS in place of the new on/off inbuilt one ?

[quote=“XAPPO, post:18, topic:188333”]Glad to see the on/off button is no longer bitmapped :slight_smile: Although I am very inexperienced with CSS I did theme most of my stuff a while back, mostly by trial and error, and I suspect I now have multiple redundant overrides. Anyway I’m just about to try to change the on/off button colours too as they don’t match my theme - but before I spend time on it - is that possible ?

Previously I substituted my own bitmap image for the old on/off one but the change to the new vector image has overridden that. I can’t remember what I did before - so I’ll look over it.

There seem to be 5 areas involved, my main focus will be the pale blue on but there’s also the pale grey off colour, the white round button and the two grey borders. Can I address all these individually ? A quick example of the right element and how to do this - would be great but I’ll persevere anyway, assuming it’s possible. It’s a good learning exercise although it obviously didn’t sink in much last time :frowning:

I’m in this area:
altui-button-on-off pull-right
onoffswitch-inner

As an alternative am I able to substitute my own complete graphic in CSS in place of the new on/off inbuilt one ?[/quote]

onoff button is made out of On/Off Flipswitch HTML5/CSS3 Generator - Proto.io so you should be able to get some heads start from here, all these graphic elements are controllable individually

Exactly what I wanted … :slight_smile: