Advanced customization

Settings → System → Advanced customization

Here you can manage functions javascript and rules CSS applied on desktop or mobile.

Attention

Using inappropriate CSS rules can break the display of your Jeedom. Improperly used js functions can cause significant damage to various components of your installation. Remember to generate and outsource a backup before using these functions.

This function uses a particular mode of the Core file editor with two locations :

In the menu bar of the Core file editor, a button Enabled Or Deactivated tells you if the Core should load them or not. This option is also available in Settings → System → Configuration Interface tab.

Noticed

When launching this page, the tree is automatically created, as well as the 4 files with a comment on the first line including the version of the Core which created them.

Ressources

CSS: Cascading Style Sheets

Javascript

Tips for customizing the interface

In case of problem

Injecting JS and / or CSS can make Jeedom inoperative.

In this case, two solutions :

Example of advanced personalization in CSS

All these examples are to be put in the CSS file (don’t forget to activate the advanced customization at the top)

Removing scrollbars on widgets

.eqLogic-widget.cmds{
 overflow-x: hidden !important;
 overflow-y: hidden !important;
}

Remove minimum width/height of widgets

This allows you to have smaller widgets (width [min-width], height [min-height]) but be careful, this can make the display less pretty.

div.cmd-widget.content,
div.cmd-widget .content-sm,
div.cmd-widget .content-lg,
div.cmd-widget.content-xs {
  min-width: unset !important;
  min-height: unset !important;
}

Added margins between object names and equipment on the dashboard

.div_object legend .objectDashLegend {
  margin-bottom: 5px;
}
Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site web. Si vous continuez à utiliser ce site, nous supposerons que vous en êtes satisfait.