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

Offline amg0

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

Offline amg0

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



Offline xAPPO

  • Jr. Member
  • **
  • Posts: 95
  • Karma: +6/-8
Re: ALTUI : Theming, CSS
« Reply #17 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 ?




« Last Edit: December 21, 2015, 07:37:29 pm by XAPPO »
xAP, Fibaro HC2, Vera 3 Lite Edge Plus , SmartThings, HomeVision, Home Automation Hub, Hue, LIFX, C-Bus, Sonos, Barionet, Crestron, AMX, Loxone, Harmony, HouseBot, HomeSeer, Indigo, MQTT, IFTTT, IOLogix, 1-wire, IDRATek.

Offline amg0

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

Offline xAPPO

  • Jr. Member
  • **
  • Posts: 95
  • Karma: +6/-8
Re: ALTUI : Theming, CSS
« Reply #19 on: December 22, 2015, 05:12:37 am »
Exactly what I wanted ...  :)
xAP, Fibaro HC2, Vera 3 Lite Edge Plus , SmartThings, HomeVision, Home Automation Hub, Hue, LIFX, C-Bus, Sonos, Barionet, Crestron, AMX, Loxone, Harmony, HouseBot, HomeSeer, Indigo, MQTT, IFTTT, IOLogix, 1-wire, IDRATek.

Offline dklinkman

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

Offline tomtcom

  • Beta Testers
  • Hero Member
  • *****
  • Posts: 1005
  • Karma: +23/-31
Re: ALTUI : Theming, CSS
« Reply #21 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?


Offline dklinkman

  • Full Member
  • ***
  • Posts: 129
  • Karma: +1/-0
Re: ALTUI : Theming, CSS
« Reply #22 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?
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: 3090
  • Karma: +206/-8
Re: ALTUI : Theming, CSS
« Reply #23 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

Offline DesT

  • Sr. Member
  • ****
  • Posts: 340
  • Karma: +5/-1
Re: ALTUI : Theming, CSS
« Reply #24 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...
Vera Edge-UI7/Plus-UI7 (2), DSC Partition (5 ) + Zones Sensors(31), Nest thermostat (1) & Protect Fire/CO (3), GE Sw (8 ), GE Dimr (14), FGMS-001 (2), ZW100 (2), RZCS4 (1), AL-DSC11 (1), Aeon HEM 2nd Edition (1), Aeon SSE (5), YRD220-ZW (1), SONOS (6), MyQ Chamberlain (1)
PINE64/openLuup/ALTUI/Rules

Offline amg0

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

Offline DesT

  • Sr. Member
  • ****
  • Posts: 340
  • Karma: +5/-1
Re: ALTUI : Theming, CSS
« Reply #26 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
Vera Edge-UI7/Plus-UI7 (2), DSC Partition (5 ) + Zones Sensors(31), Nest thermostat (1) & Protect Fire/CO (3), GE Sw (8 ), GE Dimr (14), FGMS-001 (2), ZW100 (2), RZCS4 (1), AL-DSC11 (1), Aeon HEM 2nd Edition (1), Aeon SSE (5), YRD220-ZW (1), SONOS (6), MyQ Chamberlain (1)
PINE64/openLuup/ALTUI/Rules

Offline amg0

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

Offline DesT

  • Sr. Member
  • ****
  • Posts: 340
  • Karma: +5/-1
Re: ALTUI : Theming, CSS
« Reply #28 on: December 21, 2016, 11:08:19 am »
Anyone want to share some screenshot of custom theme ?
Vera Edge-UI7/Plus-UI7 (2), DSC Partition (5 ) + Zones Sensors(31), Nest thermostat (1) & Protect Fire/CO (3), GE Sw (8 ), GE Dimr (14), FGMS-001 (2), ZW100 (2), RZCS4 (1), AL-DSC11 (1), Aeon HEM 2nd Edition (1), Aeon SSE (5), YRD220-ZW (1), SONOS (6), MyQ Chamberlain (1)
PINE64/openLuup/ALTUI/Rules

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3090
  • Karma: +206/-8
Re: ALTUI : Theming, CSS
« Reply #29 on: December 21, 2016, 12:50:30 pm »
Anyone want to share some screenshot of custom theme ?

here you are with my settings