How to theme Domoticz

Creating a Domoticz theme is simple in theory, there are some things to be aware of.

Common locations

Inside the WWW folder you can modify the CSS and the Javascript by adding files in certain locations.

- The App folder contains javascript files that generate most of the HTML that is then loaded into containers.
- The JS files contains other javascript files that Domoticz uses, incuding a big 'domoticz.js' file.
- The CSS folder contains CSS files that act as the 'foundation' of Domoticz.
- The Styles folder contains the themes.

CSS

You can add new custom.css file to the www/style/your-new-theme-name directory. It will then automatically be detected by Domoticz.

Currently it's quite difficult to really theme Domoticz. If you want to get into some serious theming, be advised:

Separation of style and content isn't optimal.
- BR and other html is used to position things.
- Tables are used for positioning things.
- Things that should be DIV'd or SPAN's, like the logo text, are header tags instead, making general content styling difficult.

CSS had some oddities.
- The use of ID's and classes seems to be reversed. Classes are rare, while a lot of things that are recurring are given ID's.
- Existing default CSS uses complex combinations of sibling selector to point to items (so any change in order would destroy the styling)

Selecting things is difficult:
- Some items don't have CSS names.
- Items don't have useful DIV's around them.

CSS Update

This is for a future change to a new theme:

You now have lots of classes to work with. A list:

GENERAL

BODY CLASSES
.CSS3 - this indicates a modern browser with CSS3 support.
.columns3 - this indicates the user preference for normal mode.

.columns4 - this indicates the user preference for compact mode.

.frontStage - this is a class that indicates if you are on the frontend of Domoticz.

Finally, there is a class that indicates what page you are on specifically. For example: .dashboard / .utility / .temperature / etc

BODY ID

mobile - this indicates being used on a mobile phone.

notMoble - this indicates not being on a mobile phone.

DIV.ITEM

There is now a div around each item with lots of classes to work with.

Device type - general device category

Device subtype - the specific subcategory a device belongs to.

.withstatus - a class that is present if the item has status info that is not the same as the bigtext, so you probably want to show it.

.statuscountX - a class that indicates how many status items there are.

STATUS

Inside each status item there are now lots of span tags to separate data better, and allow for designing and targetting.

ITEM TR

The table row inside each item table has a number of TD's with classes. .

.name

.bigtext - maximum 12 characters for text.

.img1, img2 img3 - a wrapper might be put around these.

.lastupdate - last time the item got fresh data.

.type - a difficult item. It has both textual type data about the item, but it also holds the item's widget, like a slider, if it has one.

.status - this contains the output data. On most simple sensors this is exactly the same as Bigtext. If it is, then the javascript in Dashboardcontroller.js will make sure it gets a display: none.

.options - this mini-options menu didn't have a name before. It also contains the favorite-icon (which now has the class 'favorite'). It's still a bit dodgy, as the html contains spaces as separators. This may be cleaned up later.

The TD's inside the items also have ID's. Please don't use those, they are legacy and should be phased out. ID's should always be unique.

DASHBOARD

The dashboard contains section wrappers around each section now. They have unique ID's, as well as classes. For example: .dashSwitches .dashUtility

Browser cache

The web frontend is set to be cached. This will speed up the application launch time, and is perfect if you create a shortcut on the home screen of an iPhone/iPad/….

When experimenting with themes be sure to refresh and/or clear the browser cache after each change.