New dark theme

[Siewert308SW]

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

thx

[G3rard]

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

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
See the examples below.

buttons.png (123.14 KiB) Viewed 5151 times

buttons 2.png (122.16 KiB) Viewed 5151 times

[G3rard]

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.

[G3rard]

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 .

[chrisfraser05]

Nice theme buddy.

Really liking it!

[stlaha2007]

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]

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]

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]

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

[stlaha2007]

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?

[G3rard]

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.

[Sergio]

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

Enviado desde mi A0001 mediante Tapatalk

[G3rard]

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

Edit: done, so you can test it now.

[Sergio]

Ok

Enviado desde mi A0001 mediante Tapatalk

[Sergio]

Enviado desde mi A0001 mediante Tapatalk

[NietGiftig]

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

[G3rard]

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

[sjefk]

Thanks G3rard ! Really nice theme

[DarkoBG]

Thank you for sharing.
Excellent work.

[stlaha2007]

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 !