ALTUI : Theming, CSS

[amg0]

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

[amg0]

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 !

[xAPPO]

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 ?

[amg0]

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

[xAPPO]

Exactly what I wanted ... 

[dklinkman]

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!

[tomtcom]

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?

[dklinkman]

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?

[amg0]

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

[DesT]

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

[amg0]

@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

[DesT]

@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

[amg0]

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

[DesT]

Anyone want to share some screenshot of custom theme ?

[amg0]

Anyone want to share some screenshot of custom theme ?

here you are with my settings