The Vera Community forums have moved!

Advanced => Plugins & Plugin Development => Programming => Alternate UI to UI7 => Topic started by: amg0 on August 08, 2015, 05:43:24 am

Title: ALTUI : Theming, CSS
Post by: amg0 on August 08, 2015, 05:43:24 am
Thread to discuss theming and CSS

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

A simple way easy tutorial was provided by "rd" here =>
http://forum.micasaverde.com/index.php/topic,33306.msg252373.html#msg252373 (http://forum.micasaverde.com/index.php/topic,33306.msg252373.html#msg252373)

Feel free to post here your best realizations , any theming contributions ( new button background, new theming css, etc... )
Title: Re: ALTUI : Theming, CSS
Post by: Robjsewell on September 03, 2015, 07:53:19 pm
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!
Title: Re: ALTUI : Theming, CSS
Post by: dklinkman on September 03, 2015, 08:07:22 pm
Sounds like you may still be looking in UI5/6/7

The short answer may be to try this different URL.  http://<YOUR IP OR HOSTNAME HERE>/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
Title: Re: ALTUI : Theming, CSS
Post by: Robjsewell on September 04, 2015, 12:39:10 am
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!
Title: Re: ALTUI : Theming, CSS
Post by: dklinkman on September 09, 2015, 08:20:52 pm
amg0 I have css question.  I read your post on customizing.  Using your example I created a file at http://<my vera>/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
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on September 10, 2015, 10:41:40 am
amg0 I have css question.  I read your post on customizing.  Using your example I created a file at http://<my vera>/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

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
Code: [Select]
span.altui-temperature {
    font-size: 10px;
}
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on September 10, 2015, 06:06:41 pm
V678 fixes the order of css load so that pb should go away now, you do not need the extra span anymore.
Title: Re: ALTUI : Theming, CSS
Post by: dklinkman on September 10, 2015, 06:24:44 pm
Woot.  Now the temp text for the test override is tiny.

Thanks!!!
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on September 29, 2015, 02:13:19 pm
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
Title: Re: ALTUI : Theming, CSS
Post by: rd on October 16, 2015, 03:23:25 pm
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/<xxx>/bootstrap.css where <xxx> 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.
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on October 16, 2015, 03:33:32 pm
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/<xxx>/bootstrap.css where <xxx> 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.
Great tutorial, thank you
Title: Re: ALTUI : Theming, CSS
Post by: jcsv75 on October 19, 2015, 11:36:21 am
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
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on October 19, 2015, 06:56:40 pm
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

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
Title: Re: ALTUI : Theming, CSS
Post by: jcsv75 on October 20, 2015, 02:19:39 am
Wow that was fast! -:)

Thanks a lot!

Jacques
Title: Re: ALTUI : Theming, CSS
Post by: BatterBits on November 01, 2015, 04:49:54 am
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

Title: Re: ALTUI : Theming, CSS
Post by: amg0 on November 01, 2015, 07:25:56 am
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
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
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on November 01, 2015, 11:47:22 am
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
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

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
Code: [Select]

... 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 !


Title: Re: ALTUI : Theming, CSS
Post by: xAPPO on December 21, 2015, 07:28:18 pm
Glad to see the on/off button is no longer bitmapped :)   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  :(   

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 ?




Title: Re: ALTUI : Theming, CSS
Post by: amg0 on December 22, 2015, 03:11:29 am
Glad to see the on/off button is no longer bitmapped :)   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  :(   

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 ?

onoff button is made out of https://proto.io/freebies/onoff/ so you should be able to get some heads start from here,  all these graphic elements are controllable individually
Title: Re: ALTUI : Theming, CSS
Post by: xAPPO on December 22, 2015, 05:12:37 am
Exactly what I wanted ...  :)
Title: Re: ALTUI : Theming, CSS
Post by: dklinkman on December 22, 2015, 06:22:41 pm
I was able to change my slider button color to green with:

.onoffswitch-inner::before {
    background-color: #006C44;
}

Works great.  And the border colors can be changed with:

.onoffswitch-label {
    border-color: #nnnnnn;
}
.onoffswitch-switch {
    border-color: #nnnnnn;
}

though I don't currently use these.  Changing the label text color below the slider I haven't explored.

Cheerz!
Title: Re: ALTUI : Theming, CSS
Post by: tomtcom on December 22, 2015, 07:27:42 pm
Hello,

I use the cyborg theme from the Themes menu. It looks great. The only problem is the battery bar color at 50% is the same as the Info color. So it's purple on purple.

Is there an easy way to make the battery color different?

Title: Re: ALTUI : Theming, CSS
Post by: dklinkman on December 22, 2015, 11:24:09 pm
I find that I can customize the battery indicator background and text colors pretty easily, but then if I select a theme, my custom css no longer works.  On anything.

It's like the selected theme overrides my custom css.  If I reset the theme my css works again.

Amg0 does that sound right?
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on December 29, 2015, 06:04:55 pm
I find that I can customize the battery indicator background and text colors pretty easily, but then if I select a theme, my custom css no longer works.  On anything.

It's like the selected theme overrides my custom css.  If I reset the theme my css works again.

Amg0 does that sound right?

not sure but it could be you need to give your css selector a bigger weight ( a specificity ) like explained here : https://css-tricks.com/specifics-on-css-specificity/
 ( css calculates how precise a selector is and gives it a weigth ranking to know which one applies ) so for instance instead of .class try  div.class if it is a div to try to force it a more precise specificity
Title: Re: ALTUI : Theming, CSS
Post by: DesT on October 24, 2016, 01:35:45 pm
@amg0,

Can we use any bootstrap theme for ALTUI ?   'cause I already have a bunch of bootstrap theme that we buy for some others projects...
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on October 24, 2016, 02:03:41 pm
@amg0,

Can we use any bootstrap theme for ALTUI ?   'cause I already have a bunch of bootstrap theme that we buy for some others projects...
Yes if they are 3.3.6
See the LocalBootstrap variable to install your local bootstrap css
Title: Re: ALTUI : Theming, CSS
Post by: DesT on October 25, 2016, 12:37:40 pm
@amg0,

Can we use any bootstrap theme for ALTUI ?   'cause I already have a bunch of bootstrap theme that we buy for some others projects...
Yes if they are 3.3.6
See the LocalBootstrap variable to install your local bootstrap css

So we can use any bootstrap theme, like
https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on November 17, 2016, 05:33:29 am
Just to add to this thread a notice of the new ImagePath and BackgroundImg variables of ALTUI device
cf http://forum.micasaverde.com/index.php/topic,33308.msg299150.html#msg299150 for an explanation of what they enable you to do.
With these new variables you can enable transparent styles on ALTUI and have a background image
Title: Re: ALTUI : Theming, CSS
Post by: DesT on December 21, 2016, 11:08:19 am
Anyone want to share some screenshot of custom theme ?
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on December 21, 2016, 12:50:30 pm
Anyone want to share some screenshot of custom theme ?

here you are with my settings
Title: Re: ALTUI : Theming, CSS
Post by: NikV on December 21, 2016, 01:53:40 pm
examples from mine - openluup on rpi3

thanks to amg0

Title: Re: ALTUI : Theming, CSS
Post by: amg0 on March 06, 2017, 05:39:55 pm
examples from mine - openluup on rpi3

thanks to amg0

great ! 
Any other good examples out there ?
Title: Re: ALTUI : Theming, CSS
Post by: DesT on April 23, 2018, 06:38:51 am
amg0,

Having a little issue since a while.  The variable LocalBootstrap keep changing.

I tried:

/css/bootstrap.css
http://networkname/css/bootstrap.css

and it always change by adding ../ at the beginning...
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on April 23, 2018, 07:07:35 am
amg0,

Having a little issue since a while.  The variable LocalBootstrap keep changing.

I tried:

/css/bootstrap.css
http://networkname/css/bootstrap.css

and it always change by adding ../ at the beginning...

it is to make sure it is a relative url ( so that it works when used in remote access context ).  I do not recall exactly how this works but I think your starting point is /etc/www and then it must be relative url (   remote access mode has a totally different url path to start with so absolute url wont work )

Code: [Select]
-- verify this starts by ../ to make sure it works for remote access
if (string.starts(localbootstrap,"../") == false) then
if (string.starts(localbootstrap,"/") == false) then
localbootstrap = ".."..localbootstrap
else
localbootstrap = "../"..localbootstrap
end
luup.variable_set(ALTUI_SERVICE, "LocalBootstrap", localbootstrap, lul_device)
end
Title: Re: ALTUI : Theming, CSS
Post by: DesT on April 23, 2018, 07:11:10 am
So if my starting point is /etc/www

then my variable should be css/bootstrap.css
Title: Re: ALTUI : Theming, CSS
Post by: amg0 on April 23, 2018, 07:23:17 am
So if my starting point is /etc/www

then my variable should be css/bootstrap.css
I believe so . which would then get translated to ../css/bootstrap.css which should result to the same thing