'ThinkTheme' - a new flat design theme

[ThinkPad]

So, i've spent some time in creating a new theme to be used with Domoticz:


Save the code below as 'custom.css' in /www/styles/ThinkTheme/ and then choose 'ThinkTheme' from Setup > Settings > Theme
Grab latest CSS-code from Bitbucket here.

The icons are from this topic and can be downloaded here (mirror) but the theme also works fine with just the stock Domoticz icons.
No support, just grab this and enjoy it. Domoticz has updated to v3.9999999 ( ) and my theme doesn't work anymore? Too bad, try to fix it yourself Making this CSS stuff is quite time consuming so i can't help everyone if there is a little bug in my stylesheet.

Free to use and modify, but i would appreciate a link back to this topic if you use large parts of it in your own theme.

[zofiel]

great job!! thanks!!

[Derik]

Thanks....

Looks great....
Is this also working for a tablet @ portret ?
Or have any one a personal skin special for a portret tablet?

[l00pz]

Thanks for this nice Theme

[Minglarn]

Nice and clean. Using it now and is great on my iPad to.

[ThinkPad]

Some small updates (newest CSS always in first post):
- Made some more buttons 'flat' style
- Buttons of notification/timers of switches are also flat-style now
- Removed bold text from 'Create virtual sensor' / 'Setup' buttons as i didn't like it.
- Removed bold text from yellow warning message on hardware page
- Selected rows in table (Hardware/Devices/Notifications for example) are now petrol blue instead of light purple

And some other small fixes.

I want to make some more buttons flat & make table header+bottom also a color instead of gradient, but Bootstrap is annoying me. It overrides my style, even when supplying the '!important' tag after my style.

[galadril]

Thanks for this Theme, Looks good!

[bkanuka]

Hey, thanks for the theme. You might want to add the following (I think it made the dimmer sliders look better):

Code: Select all

dimslider {
    border-color: #333 !important;
    box-shadow: none !important;
}

.dimslider .ui-slider-range {
    border-radius: inherit;
}

[ThinkPad]

Hey, thanks for the theme. You might want to add the following (I think it made the dimmer sliders look better):

Code: Select all

dimslider {
    border-color: #333 !important;
    box-shadow: none !important;
}

.dimslider .ui-slider-range {
    border-radius: inherit;
}

Thanks, looks better indeed! I have added it to the code in the first post.

[CodeItAway]

Thanks for this template. I really like it!

[ThinkPad]

Thanks for this template. I really like it!

Thanks, i appreciate your reaction!

I also really like it myself. Sometimes i see a screenshot passing by somewhere on this forum, and then i see that people are using my theme. And i think by myself: hmmm i actually did a pretty good job, it really looks nice!

[stlaha2007]

Thanks ThinkPad,

Nice work.
Keep up the works.

Using default icons, cause the custom are hard to read on a dimmed tablet.

However, do you have experience with a custom css which is able to rotate between day-night or timely switch between lighter and darker theme, to prevent burnin on tablet or eventually RPi with LCD like the Dutch Toon or Nest device?

Seen some other posts with javascript examples.... Like to use or yours as a startingpoint.

Grtz.

Sent from my D6503 using Tapatalk

[ThinkPad]

Have a look in the frontpage.html topic, they do it there. But it requires more than only CSS, so could be difficult.
And also have a look on Google "switch CSS day night time".

[stlaha2007]

Have a look in the frontpage.html topic, they do it there. But it requires more than only CSS, so could be difficult.
And also have a look on Google "switch CSS day night time".

Thanks.

Must have missed that specific topic.

I was already looking at the Google Day-Night switch, which does a great part of my wishes.

Hardest part is implementing it.
Thanks again gor the direction.


Sent from my D6503 using Tapatalk

[vdomotik]

Thanks !
I really like this theme...
I have just migrated from a Vera Lite and I am so happy with Domoticz and your theme...

[deejc]

just installed this theme and really like it, thanks

[ThinkPad]

Thanks for the positive reactions

[ThinkPad]

Small style change to the log window, from a white background to a much softer (for your eyes) color + different font (Droid Sans Mono) & different color for lines that were first marked blue/greenish:



Newest CSS-file in the topicstart. Or grab it from my Bitbucket where i post all my scripts/code: https://bitbucket.org/frankiepankie/domoscripts/src

[loyske]

Nice one Thinkpad, very "strak" theme

[mvveelen]

Using this for a while now, great work.

One thing though......when there is an error message (red), it's very hard to read on the dark background. I'd prefer another color. Where can I set / change it exactly ?