How to theme Domoticz
Creating a Domoticz theme is simple in theory, there are some things to be aware of.
- The CSS folder contains CSS files that act as the 'foundation' of Domoticz.
- The Styles folder contains the themes.
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.
This is for a future change to a new theme:
You now have lots of classes to work with. A list:
.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.
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.
The dashboard contains section wrappers around each section now. They have unique ID's, as well as classes. For example: .dashSwitches .dashUtility
There is a special GuiWork branch of domoticz on github where visual changes can be shared. Contact the developers to get an account to upload changes. Simple changes can be made though the Github web interface, so don't worry if you're not used to working with Github.