New dark theme

User avatar
Siewert308SW
Posts: 471
Joined: Monday 29 December 2014 16:47
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands - Zoutkamp (gn)
Contact:

Re: New dark theme

Post by Siewert308SW » Tuesday 24 January 2017 22:09

Thx for your work.
It really looks great...

thx
Setup:
1x RPi3 - PIco hv3.0A Plus / Domoticz
1x RPi3 - PIco hv3.0A Plus / PiHole
1x RFXtrx433E / Aeotec ZW090
3x FI9803P Cam
2x Youless Elec/Gas
4x KD101 detectors
a lot of KaKu/z-wave stuff

Domoticz scripts: @ GitHub
pico_installer: @ GitHub

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

New dark theme

Post by G3rard » Tuesday 24 January 2017 22:40

Thanks for your messages! Good to see you like this theme :D

The devices are also showing some more information in the small colored bar at the top left (standard Domoticz functionality).
White -> normal
Blue -> protected device
Red -> not updated for a while
Yellow -> battery almost empty

The bars are small but usefull :mrgreen:
See the examples below.
buttons.png
buttons.png (123.14 KiB) Viewed 1455 times
buttons 2.png
buttons 2.png (122.16 KiB) Viewed 1455 times
Last edited by G3rard on Tuesday 24 January 2017 22:40, edited 1 time in total.
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

Re: New dark theme

Post by G3rard » Tuesday 24 January 2017 23:16

Sergio wrote:Nice theme G3rard! I really like it.
I like messing with web pages. I'll try to contribute whenever I have time.

For example in spanish as the words are much longer, the bottom buttons on switches wrap on to two lines.
If you reduce left and/or right margins only two points total on ".btnsmall, .btnsmall-dis" tag it will fit on a single line without messing anything.
Would be great if you can contribute. I re-used another theme and there are probably some parts which are not needed anymore or some parts which can be done better/easier. Would be nice if you can propose your changes via Github pull requests.

I also saw that on my iPad the buttons on the Weather tab (which include Forecast) are wrapping to two lines.

If I change

Code: Select all

margin-right: 15 px
to

Code: Select all

margin-right: 12px
for
.btnsmall, .btnsmall-dis
.btnsmall-sel
.btnsmall:hover,
.btnsmall-sel:hover,
.btnsmall-dis:hover

this is all showed on 1 line (last parts are for selected button and when hovering). Is that fine for you as well?
If so then I will update the code.
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

Re: New dark theme

Post by G3rard » Tuesday 24 January 2017 23:19

NietGiftig wrote:I'm using this one now, nice & clean
Thanks for sharing
Very minor question
The selector switch in button mode has white bg/black letters for unselected buttons, they become Grey/yellow when you hover over them.
Is it possible to change this the other way round. or tell me where I can change it.
It makes the dark side of the theme darker ;-)
You're right. I will have a look at it, but not in the coming days.
But you can already try to change it in this part https://github.com/gerard33/dark-th3me/ ... m.css#L239.
Let us know what the results are :).
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

chrisfraser05
Posts: 33
Joined: Sunday 08 January 2017 19:59
Target OS: Windows
Domoticz version:
Contact:

Re: New dark theme

Post by chrisfraser05 » Wednesday 25 January 2017 0:00

Nice theme buddy.

Really liking it!

stlaha2007
Posts: 437
Joined: Monday 05 October 2015 10:16
Target OS: -
Domoticz version:
Contact:

Re: New dark theme

Post by stlaha2007 » Wednesday 25 January 2017 10:32

Implemented it last night...
Looks nice.

Gonna change the background to a more darker one.

However it takes a lot of time to display. I also found out why.

Unfortunatly, my tablets are restricted to access internet.
Within the .css there are the font-imports from google.
Not a big deal. I already downloaded a zip from google-fonts an github. Being busy to convert the import to locally hosted fonts.

Having the same issues with other templates and frontpages for now.
Hopefully someone will implement it with local fonts ;-)

Sergio
Posts: 46
Joined: Friday 12 December 2014 14:25
Target OS: Raspberry Pi
Domoticz version: 3.6150
Location: Spain
Contact:

Re: New dark theme

Post by Sergio » Wednesday 25 January 2017 15:50

G3rard wrote: I also saw that on my iPad the buttons on the Weather tab (which include Forecast) are wrapping to two lines.

If I change

Code: Select all

margin-right: 15 px
to

Code: Select all

margin-right: 12px
for
.btnsmall, .btnsmall-dis
.btnsmall-sel
.btnsmall:hover,
.btnsmall-sel:hover,
.btnsmall-dis:hover

this is all showed on 1 line (last parts are for selected button and when hovering). Is that fine for you as well?
If so then I will update the code.
The only thing I touched was:

Code: Select all

.btnsmall,
.btnsmall-dis {
  margin-top: 2px;
  margin-bottom: 1px;
  margin-left: -16px;
  margin-right: 14px;
  ...
I did compensate left and right so I didn't get any strange alignment effects, but I did not took into account sel, hover as you.
Perhaps you can try it by reducing from both sides.

Sergio
Posts: 46
Joined: Friday 12 December 2014 14:25
Target OS: Raspberry Pi
Domoticz version: 3.6150
Location: Spain
Contact:

Re: New dark theme

Post by Sergio » Wednesday 25 January 2017 15:56

stlaha2007 wrote:Hopefully someone will implement it with local fonts ;-)
I've done nice things with embedded elements in css, but you must be aware that as the html files get bigger (themselves or linked elements), the whole system gets sluggish.
In that case I use a minimizer. But due to the "open" and "runtime developing" nature of this files, that could be a problem.

The minimizer can also be implemented at the web server level and always raises the interface performance.

NietGiftig
Posts: 140
Joined: Sunday 11 October 2015 8:50
Target OS: Raspberry Pi
Domoticz version: V3.6224
Location: Holland
Contact:

Re: New dark theme

Post by NietGiftig » Wednesday 25 January 2017 19:32

stlaha2007 wrote: However it takes a lot of time to display. I also found out why.
Unfortunatly, my tablets are restricted to access internet.
Within the .css there are the font-imports from google.
Not a big deal. I already downloaded a zip from google-fonts an github. Being busy to convert the import to locally hosted fonts.
Having the same issues with other templates and frontpages for now.
Hopefully someone will implement it with local fonts ;-)
+1 from me
Very much +1
RPI-2 + SSD / ESPEasy Sensors & Switches / Sonoff / RFLink / Action Switches / TP-Link switch / Node-Red / Reacticz

stlaha2007
Posts: 437
Joined: Monday 05 October 2015 10:16
Target OS: -
Domoticz version:
Contact:

Re: New dark theme

Post by stlaha2007 » Wednesday 25 January 2017 20:17

Already implemented it...
Trick is to use e few more lines and download the .ttf file.

Good example is the theme Arcadia... Instead of import are a few extra lines which define font-face etcetera including local and filepath/filename.

Easiest way is to search the forum for the Arcedia theme, download and extract it. Copy the first 4 font-blocks over the 4 import-blocks and copy/move the font-directory into the theme folder.

@G3rard: Please; Can you update it on github yourself so we all can benefit from this little tweak?

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

Re: New dark theme

Post by G3rard » Wednesday 25 January 2017 21:19

I have updated the theme to load the Ubuntu font from a local folder.
Latest version is on Gibthub https://github.com/gerard33/dark-th3me.
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

Sergio
Posts: 46
Joined: Friday 12 December 2014 14:25
Target OS: Raspberry Pi
Domoticz version: 3.6150
Location: Spain
Contact:

Re: New dark theme

Post by Sergio » Wednesday 25 January 2017 21:22

I'll also try it and tell you if it also solves the wrapping buttons in Spanish.

Enviado desde mi A0001 mediante Tapatalk

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

Re: New dark theme

Post by G3rard » Wednesday 25 January 2017 21:25

Sergio wrote:I'll also try it and tell you if it also solves the wrapping buttons in Spanish.

Enviado desde mi A0001 mediante Tapatalk
I have not changed that yet ;)
So wait a few minutes please :mrgreen:

Edit: done, so you can test it now.
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

Sergio
Posts: 46
Joined: Friday 12 December 2014 14:25
Target OS: Raspberry Pi
Domoticz version: 3.6150
Location: Spain
Contact:

Re: New dark theme

Post by Sergio » Wednesday 25 January 2017 21:37

Ok

Enviado desde mi A0001 mediante Tapatalk

Sergio
Posts: 46
Joined: Friday 12 December 2014 14:25
Target OS: Raspberry Pi
Domoticz version: 3.6150
Location: Spain
Contact:

Re: New dark theme

Post by Sergio » Wednesday 25 January 2017 22:18



Enviado desde mi A0001 mediante Tapatalk

NietGiftig
Posts: 140
Joined: Sunday 11 October 2015 8:50
Target OS: Raspberry Pi
Domoticz version: V3.6224
Location: Holland
Contact:

Re: New dark theme

Post by NietGiftig » Wednesday 25 January 2017 22:39

G3rard wrote:
NietGiftig wrote: The selector switch in button mode has white bg/black letters for unselected buttons, they become Grey/yellow when you hover over them.
You're right. I will have a look at it, but not in the coming days.
But you can already try to change it in this part https://github.com/gerard33/dark-th3me/ ... m.css#L239.
Let us know what the results are :).
I have bee trying to do this, but to little knowledge of HTML/CSS i am afraid
I guess I have to copy some relevant lines from the styles.css to the custom.css???
I keep trying ;-)
RPI-2 + SSD / ESPEasy Sensors & Switches / Sonoff / RFLink / Action Switches / TP-Link switch / Node-Red / Reacticz

User avatar
G3rard
Posts: 825
Joined: Wednesday 04 March 2015 23:15
Target OS: Linux
Domoticz version: V3.8153
Location: The Netherlands
Contact:

Re: New dark theme

Post by G3rard » Wednesday 25 January 2017 22:56

You only have to change custom.css.

See the opening post:
The quickest way to test changes to the theme is via the development console in Chrome (open it with F12).
- choose the Sources tab
- choose acctheme and custom.css
- any changes will be visible directly
- if you want to implement these changes then edit these in domoticz/www/styles/dark-th3me/custom.css

Just try to change something from line 239 and further and you will directly see the results.
It's a lot of trial and error :)
Ubuntu Server 14.04 | Domoticz v3.8153 | RFXtrx433E | Z-Wave Aeotec Z-Stick S2
Frontpage | Sonos PHP | Dark th3me | Sony Bravia Python plugin | Sonos Python plugin

sjefk
Posts: 27
Joined: Thursday 07 January 2016 8:49
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: New dark theme

Post by sjefk » Thursday 26 January 2017 9:15

Thanks G3rard ! Really nice theme

User avatar
DarkoBG
Posts: 7
Joined: Friday 26 August 2016 22:36
Target OS: Raspberry Pi
Domoticz version: beta
Location: Serbia
Contact:

Re: New dark theme

Post by DarkoBG » Thursday 26 January 2017 14:31

Thank you for sharing. :)
Excellent work.

stlaha2007
Posts: 437
Joined: Monday 05 October 2015 10:16
Target OS: -
Domoticz version:
Contact:

Re: RE: Re: New dark theme

Post by stlaha2007 » Thursday 26 January 2017 23:37

G3rard wrote:I have updated the theme to load the Ubuntu font from a local folder.
Latest version is on Gibthub https://github.com/gerard33/dark-th3me.
Double Thanks !

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests