We have moved at community.getvera.com

Author Topic: ALTUI : Theming, CSS  (Read 11583 times)

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
ALTUI : Theming, CSS
« 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

A simple way easy tutorial was provided by "rd" here =>
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... )
« Last Edit: October 17, 2015, 04:05:21 am by amg0 »

Offline Robjsewell

  • Jr. Member
  • **
  • Posts: 87
  • Karma: +0/-0
Re: ALTUI : Theming, CSS
« Reply #1 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!

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: ALTUI : Theming, CSS
« Reply #2 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
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline Robjsewell

  • Jr. Member
  • **
  • Posts: 87
  • Karma: +0/-0
Re: ALTUI : Theming, CSS
« Reply #3 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!

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: ALTUI : Theming, CSS
« Reply #4 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
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: ALTUI : Theming, CSS
« Reply #5 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;
}
« Last Edit: September 10, 2015, 11:04:42 am by amg0 »

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: ALTUI : Theming, CSS
« Reply #6 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.

Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: ALTUI : Theming, CSS
« Reply #7 on: September 10, 2015, 06:24:44 pm »
Woot.  Now the temp text for the test override is tiny.

Thanks!!!
VeraPlus, UI7, ALTUI on Chrome, Lots of devices and plugins including MQTT and MySensors.  Also playing around with openLuup

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: ALTUI : Theming, CSS
« Reply #8 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

Offline rd

  • Sr. Newbie
  • *
  • Posts: 42
  • Karma: +0/-0
Re: ALTUI : Theming, CSS
« Reply #9 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.

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: ALTUI : Theming, CSS
« Reply #10 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

Offline jcsv75

  • Jr. Member
  • **
  • Posts: 86
  • Karma: +3/-0
Re: ALTUI : Theming, CSS
« Reply #11 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

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +209/-8
Re: ALTUI : Theming, CSS
« Reply #12 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

Offline jcsv75

  • Jr. Member
  • **
  • Posts: 86
  • Karma: +3/-0
Re: ALTUI : Theming, CSS
« Reply #13 on: October 20, 2015, 02:19:39 am »
Wow that was fast! -:)

Thanks a lot!

Jacques

Offline BatterBits

  • Newbie
  • *
  • Posts: 11
  • Karma: +0/-0
Re: ALTUI : Theming, CSS
« Reply #14 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