[Personnalisation avancée] DARK SOBRE LIGHT (Jeedom v4)

Non je ne pense pas que cela soit possible… (du moins en css)

Ah mince alors moi qui cherche à personnaliser au max mon dashboard

hello,
te serait-il possible de partager ton code css que tu as mis en place pour avoir ce dashboard ?
Je ne sais pas coder ;(

je te remercie

bonjour @dJuL @Didier3L
Je n’arrive pas a obtenir l’ancienne image du theme qui était codée

background: 'core/themes/darksobre/desktop/background.jpg' //Image de fond du thème

je n’ai qu’un fond dark(noir) alors que sur la capture de Diidr3L il y’a bien ce joli fond
Merci

La bonne syntaxe est :

background: url('core/themes/darksobre/desktop/background.jpg');

Et pour tout remplir quelque soit la résolution de l’écran :

background-size: cover;

à appliquer sur le body :

body[data-theme="core2019_Dark"] {
   background: url('core/themes/darksobre/desktop/background.jpg');
   background-size: cover;
}

edit:
Il faut également bien entendu que l’image soit présente dans le dossier ‹ core/themes/darksobre/desktop/ ›)

Super merci

Salut!

Un grand Merci pour ce custom code et aussi pour cette partie afin de récupérer le background de Darksobre.
Mes Designs rendent bien mieux avec ce fond là.

Just une question: est-il possible d’enlever également les « ombres » par dessus le background?
J’ai essayé avec « opacité » mais sans succès

Merci!
Kévin!

As-tu essayé de désactiver les ombres dans les paramètres généraux de Jeedom ? (onglet Interface en bas)

Salut!

Je viens de tester mais malheureusement ca n’a pas enlevé l’image/ombre de fond d’écran

Ah oui j’avais pas vu tes flèches rouges, je croyais que tu parlais de l’ombre des tuiles.
Bah ça je ne sais pas, je n’ai pas ça sur mon Jeedom donc je ne peux pas t’aider.
Si tu fais F12 tu devrais pouvoir trouver les éléments à masquer (l’image et le footer) en CSS.
Tu es sur quelle version de jeedom ?

Salut,

tu peux cacher l’image avec :

body[data-theme="core2019_Dark"] .backgroundforJeedom {
  opacity: 0 !important;  
}

C’est pas super propre, mais ça fonctionne.

Vincent.

Bonjour. Je me permet ma petite contribution car je viens de passer en V4, avec la même problématique que vous sur le background. Le fond par défaut de jeedom apparaissait au dessus de l’image que j’essayais de mettre en fond.

  • Je me suis donc créé 2 petites images au même format que l’originale, une sombre et une claire.
  • J’ai placé ces images dans les thèmes « core2019_Dark » , « core2019_Light » et « Core2019_Legacy »
  • J’ai ensuite simplement inclus dans la Personnalisation avancée ce qui suit :
body[data-theme="core2019_Dark"] .backgroundforJeedom {
	background-image: url("/core/themes/core2019_Dark/desktop/Custom_jeedom_abstract_01_dark.jpg")!important;
    background-size: cover;
    opacity:0.9;
}

body[data-theme="core2019_Light"] .backgroundforJeedom {
	background-image: url("/core/themes/core2019_Light/desktop/Custom_jeedom_abstract_01_light.jpg")!important;
    background-size: cover;
    opacity:0.9;
}

body[data-theme="core2019_Legacy"] .backgroundforJeedom {
	background-image: url("/core/themes/core2019_Legacy/desktop/Custom_jeedom_abstract_01_legacy.jpg")!important;
    background-size: cover;
    opacity:0.9;
}					

Bizarre car chez moi je ce background n’apparait pas et je ne l’ai jamais vu.

cependant pour le masquer il y a pas mal de solutions relativement simple :

  • cacher l’élément :
.backgroundforJeedom {
	display: none !important;
}
  • mettre un fond transparent :
.backgroundforJeedom {
	background-image: none !important;
}
  • Mettre l’opacité à 0 comme proposé 2 posts au dessus :

j’ai mis ca aussi dans la personnalisation

.div_rowZones { 
  background-color: transparent !important;
}
#div_displayObject .eqLogic:not(.col-xs-12), .eqLogic-widget { 
  background-color: rgba(0,92,150,0.7) !important;
}			

Pour retrouver l’ancien affichage des widgets gauge et des sliders (modifié dans les dernières maj de jeedom) :

/* Widget Gauge */
div.arcgauge {
    margin-bottom: 10px;
}
div.arcgauge .state {
    margin-top: -11px;
}

/* slider */
div.cmd-widget .slider.noUi-horizontal {
    margin: 8px 0 2px !important;
}

J’ai du le faire car cela affectait mes designs.


Avant / Après :

image image

1 « J'aime »

bonsoir, je viens de faire la modif, cad copier le code ci dessus dans custom.css

mai le résultat n’est pas là même après redémarrage …

image

Bonjour

Je vais peut être encore dire une bêtise mais dans configuration, onglet interface tu as bien coché Personnalisation Avancée et sauvegardé?

Car sans cela elle n’est tout simplement pas activée… :innocent:

1 « J'aime »

ben voilà !!! super !! merci !!

la première fois que je met le nez dans ces choses là …

Ca fait juste 10j que j’ai Jeedom …
Mais j’ai parcouru tous les menus et lu à quoi correspondait les options.

Sans maitrise, la puissance n’est rien :wink:

moi je me renseigne sur ce dont j’ai besoin en suivant, lors de l’arrivée de ton msg, j’étais en train de chercher la doc de personnalisation…

merci du renseignement et continue de tout lire, ca pourra encore me dépanner :wink: