Elemental Theme

[nayr]

After a long night without internet and then a week of living with the results, came up with this theme. Since its based off element-light I am just calling it elemental as a nod to the original.. Who said OpenSource has to be ugly? Ive seen many attempts to start the UI over and I am guilty of that, yeah we suck, so lets get it done through pure old CSS.

Compact Dashboard (Click to Zoom)


Tested on Chrome, Firefox and Safari, and Mobile Devices. Please test in IE, I have not had a license to Windows since Win2k.

Download v1: https://www.dropbox.com/s/2a23u553ku4un ... 1.zip?dl=1
Download v2: https://www.dropbox.com/s/76yx3hdr2j88y ... 2.zip?dl=1
Download v3: https://www.dropbox.com/s/1fbsizxv1s9hd ... 3.zip?dl=1
Download v3b: https://www.dropbox.com/s/rxal6c53npr8i ... b.zip?dl=1

This may or may not be merged, it could be waiting to simmer before committing.. but its always the latest (of mine):
Update to latest CSS from my Repo (v4+): https://raw.githubusercontent.com/nayrn ... custom.css

Now included in Domoticz by default from v2.4115! Thanks everyone

[remb0]

very stylish! my compliments.

[nayr]

Thank you,

Now for the ToDo list:

• Figure out missing CSS for Device Highlighting on Update
• Decide if I want to fix the time/date/sunrise line or keep it hidden, I didnt really miss it so I am thinking of continuing to leave it out.
• Code Cleanup

[nayr]

v2 released, Sensors again flash when sensor is updated, lot more bug fixes and tightening things up..

going to let it simmer for a while and see how it grows on me, I'd very much like to accordion the dashboard items so they can be compacted and expanded, but I dont think I can do it without hacking the main pages.. so poo.

[proohu01]

looks very good! I like it a lot.
The only problem I have with it so far is that the sliders are out of frame. (I tried it in Chrome 47 and IE11)

Frame Size and Slider

frame_slider.png (19.15 KiB) Viewed 19781 times

[ThinkPad]

Looking good! Maybe create a pull request at the Github page of Domoticz, so it can replace the original Element-Light theme? This one looks much better.

[nayr]

looks very good! I like it a lot.
The only problem I have with it so far is that the sliders are out of frame. (I tried it in Chrome 47 and IE11)

frame_slider.png

In chrome can you right click in that element, inspect and then tell me the table element name, ie: body table#itemtablesmall

I must of missed that one in the css, there's alot of different buttons and its hard to test em all.. those double icon tables probably have a unique name that I missed.

[nayr]

Looking good! Maybe create a pull request at the Github page of Domoticz, so it can replace the original Element-Light theme? This one looks much better.

if I did that then I'd need to make an elemental-dark not that it would be all that much trouble since the hard part is getting polished.

but yeah, let me flush out any outstanding issues and cleanup the code so its easier to maintain.. dont want another half assed theme teasing people

[proohu01]

In chrome can you right click in that element, inspect and then tell me the table element name, ie: body table#itemtablesmall

body table#itemtablesmalldoubleicon

[nayr]

hrmm, it dont appear that I can fix that without first getting a core patch pushed through first.

The problem is all the columns in the table have an ID I can catch and set the padding, but the slider does not have an ID I can catch and pad.

The width of the slider is fixed also, cant seem to override it through css alone.. positioning is off on all sliders, I cant get them to move, but those doubleicon tables show the issue more dramatically.

I'll keep playing with it, see how the default theme is getting by without this being an issue.. might have to resize and respace all the devices.. but for the sake of future theme designers I think the best solution would be give that column an ID.

You can see in the lower screenshot another issue I face, the Device Name color is hardcoded, if I wish to keep highlighting on update I cant over-ride it.. not very theme friendly, im stuck with accepting the hardcoded color scheme.. luckily I made it work, but it wont with a dark version.

I'd also like to see ability to add custom javascript to a style, dont think I can do this as it is.. but I'd like to add some accordion effects to make a more compact version of this that expands as you click.. it would bring domoticz's native UI and my own in-house UI pretty much in line.. I abandoned my custom UI for domo long ago.. The reason I want to add the accordion effect is to get all my devices in one dashboard without scrolling.. better experience for large touch screens IMHO, if you have to drag to scroll you might as well tap to enlarge.

[nayr]

Version 3 released: https://www.dropbox.com/s/1fbsizxv1s9hd ... 3.zip?dl=0

this version came out frustration of spending hours trying to fix the sliders and getting nowhere, try to make a bit more room on the right side of the slider and the slider's fixed with just grows larger to take up that new space gotta be some javascript messing with me.

Whats New:
- Minor Bug Fixes.
- More Rounded Edges.
- More Transparency.
- No Icons in Main Menu.
- Menu Themed to match.
- more polishing of rough edges.

Screenshots:

[raym]

This is looking really nice. Thanks for your efforts.

[proohu01]

this version came out frustration of spending hours trying to fix the sliders and getting nowhere, try to make a bit more room on the right side of the slider and the slider's fixed with just grows larger to take up that new space gotta be some javascript messing with me.

I'am almost sorry I mentioned the bug
Version 3 looks even better. To bad it didn't fix the slider bug. Thank you for the effort.

[nayr]

Thanks, yeah it just keeps looking better the more I refine it.. I think I am nearing the finish line though, ive gone through everything I can find trying to make it please me more and I am quickly running out of things to refine.

and hot on its heels: elemental_v3b.zip @ https://www.dropbox.com/s/rxal6c53npr8i ... b.zip?dl=1

Changes:
I was not entirely happy with the top menu, keeping with my minimalist approach I redesigned it with vigor.
gone: domoticz name, icon, app version.. was nice knowing yeh, but well.. I know you, and dont need to be reminded on every page.
few font tweaks
fixed background if you resize it larger than the image, now scales (you need a big monitor to do this)

Known Issues due to JavaScript: (fixes likely require more than I can do through css alone)
Slider Position is Funky, would perfer more padding to the right.. Should be able to give column an ID and not impact other themes.
Since Menu Icons are hidden by default, minimizing the theme til the point of loosing text wont restore icons.. Should be able to modify JS that hides text to show icon without impacting other themes.

See Attached screenshot:


Plan: Once I am completely happy with the design (id say >97% there), I will dig into the base code and see if I can make a few small alterations that wont mess with the other themes but will allow me to address the issues with my theme. Then submit it all in a push request so everyone's got it preinstalled and displayed perfectly. The code dig is going to tempt me to get real fancy like with the javascript.. Ive done my best to keep it to just pure CSS, but the theme engine feels kinda tacked on.

[nayr]

merged in with upstream Domoticz, this theme will be included in the next release, there are some more fixes and changes.. largely for mobile devices and small screens.

I'll try to maintain this so it continues to absorb more features, cheers

https://github.com/domoticz/domoticz/tr ... /elemental

To Update your existing theme with the latest release, just grab this custom.css from the link above and replace it with the one provided in my .zip file.

Displays correctly on mobile:


was able to get a little bit more padding on the side of the sliders, its not ideal (only 5px) but I didnt want to impact other themes too much.. I am still trying to come up with a better solution that will make it less of an issue.

The problem is in the default theme you have a smaller rounded div for the device NAME that floats inside the bigger one, the JavaScript sets the slider width based on the width of that element.. Well if you to go with a full width device NAME on top, well that means now your dimmers are now oversized by about 10px, looking at other non-default themes this problem is a bane plaguing them all.

I am still going to try to fix it the right way, hopefully without causing more problems to existing themes.. and actually helping them out.. Its not your fault @proohu01 that I am obsessed with this issue, I ran into it years ago when first tried to make a domoticz theme, hit this problem and gave up, I am just finally sick of nobody doing anything about it.

[proohu01]

I am still going to try to fix it the right way, hopefully without causing more problems to existing themes.. and actually helping them out.. Its not your fault @proohu01 that I am obsessed with this issue, I ran into it years ago when first tried to make a domoticz theme, hit this problem and gave up, I am just finally sick of nobody doing anything about it.

Still looking good. Thanks for the effort. I like your mentality of biting into this problem

[ThinkPad]

Woah... you are really putting a good effort into it! Great!!

[jjnj]

It looks great, thank you!

Verstuurd vanaf mijn LG-H960 met Tapatalk

[Albsucher]

Hello,

Bit of a "newbie" question... You mentioned the theme is included into Domoticz. How do i activate or select this to show up?

Thanksin advance.

[proohu01]

setup -> Settings -> System -> User Interface -> Theme