Page 1 of 3

'ThinkTheme' - a new flat design theme

Posted: Thursday 03 September 2015 20:24
by ThinkPad
So, i've spent some time in creating a new theme to be used with Domoticz:
Image

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 ( :mrgreen: ) 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.

Re: 'ThinkTheme' - a new flat design template

Posted: Friday 04 September 2015 8:25
by zofiel
great job!! thanks!!

Re: 'ThinkTheme' - a new flat design template

Posted: Friday 04 September 2015 21:52
by Derik
Thanks....

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

Re: 'ThinkTheme' - a new flat design template

Posted: Saturday 05 September 2015 22:27
by l00pz
Thanks for this nice Theme :)

Re: 'ThinkTheme' - a new flat design template

Posted: Saturday 05 September 2015 23:10
by Minglarn
Nice and clean. Using it now and is great on my iPad to.

Re: 'ThinkTheme' - a new flat design template

Posted: Sunday 06 September 2015 21:12
by 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.

Re: 'ThinkTheme' - a new flat design template

Posted: Tuesday 08 September 2015 7:38
by galadril
Thanks for this Theme, Looks good!

Re: 'ThinkTheme' - a new flat design template

Posted: Saturday 26 September 2015 15:54
by 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;
}

Re: 'ThinkTheme' - a new flat design template

Posted: Sunday 27 September 2015 15:36
by ThinkPad
bkanuka wrote: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.

Re: 'ThinkTheme' - a new flat design template

Posted: Monday 28 September 2015 21:32
by CodeItAway
Thanks for this template. I really like it!

Re: 'ThinkTheme' - a new flat design template

Posted: Monday 28 September 2015 21:58
by ThinkPad
CodeItAway wrote: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!

:lol:

Re: 'ThinkTheme' - a new flat design template

Posted: Thursday 22 October 2015 17:31
by 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

Re: 'ThinkTheme' - a new flat design template

Posted: Thursday 22 October 2015 20:28
by 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".

Re: 'ThinkTheme' - a new flat design template

Posted: Thursday 22 October 2015 20:51
by stlaha2007
ThinkPad wrote: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

Re: 'ThinkTheme' - a new flat design template

Posted: Saturday 24 October 2015 23:24
by 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...

Re: 'ThinkTheme' - a new flat design template

Posted: Sunday 25 October 2015 16:43
by deejc
just installed this theme and really like it, thanks

Re: 'ThinkTheme' - a new flat design template

Posted: Sunday 25 October 2015 20:25
by ThinkPad
Thanks for the positive reactions :D

Re: 'ThinkTheme' - a new flat design template

Posted: Wednesday 04 November 2015 21:38
by 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:

Image

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

Re: 'ThinkTheme' - a new flat design template

Posted: Wednesday 02 December 2015 14:58
by loyske
Nice one Thinkpad, very "strak" theme :D

Re: 'ThinkTheme' - a new flat design template

Posted: Wednesday 02 December 2015 15:21
by 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 ?