tes message
j’analyse j’ai l’id « bt_messageModal »
je fouine dans les sources/core/php
mode recherche « ctrl+f » je colle l’id
et je reproduit avec ma propre id en personnalisant
si je clic sur message (html message,programme) j’ouvre le modale des messages
houa au top !
Tu as toutes les réponses pour afficher les messages dans ce post :
Je te remets le lien car tu n’as pas lu le sujet à priori :
Si si j’ai lu, mais j’ai pas eu le temps de m’y pencher.
Bonjour!!
Un grand merci à vous, j’ai réussi à integrer les notif comme je le voulais.
Effectivement on peut faire plein de choses avec Jeedom et après pas mal de boulot j’arrive à quelque chose que je trouve cool.
Il y a encore beaucoup à faire:
Mais voilà ce que ça donne:
Hello à tous, pour mon widget lumière, je souhaite faire un dégrader de couleur du fond (passer du blanc uni comme actuellement à un dégradé) comme cela:
Je pense qu’il y a moyen de le faire en attaquant l’identifiant du composant mais je ne sais pas comment faire pour appliquer ce nouveau CSS à cette tuile.
Benjamin
Après moultes recherches je ne trouve rien de particulier. Quelqu’un a une idée?
via paramètre avancé css
ou
Salut merci pour ta réponse.
Les paramètres avancés css: ok mais lesquels; ceux de la tuiles du design ou ceux de l’équipement ?
La tuile du design n’a rien à voir avec l’équipement je ne sais pas comment tester un équipement via du code ni même comment intégrer cela à une tuile en html/css.
Je vais voir sur le lien que tu m’a donné ce qu’il en est, merci à toi.
via paramètre général
modif des style css jeedom (tu peux spécifier pour design)
il existe un tuto
via paramètre équipement (aucune spécificité donc se sera dash et design)
le lien
tu peux aussi créé un html sur ton design reprenant les class/id ou --variable css
link953, franchement beau boulot ! J’avais commencé à travailler sur un design de ce type il y a un an, mais faute de compétences et de temps, j’ai mis ça de côté. J’ai fait un peu de web lors d’expériences pro précédentes, et je voulais absolument me faire une interface épurée, design et super fonctionnelle. Comment as-tu fait pour mettre des boutons « toggle » pour piloter par exemple tes lumières ? J’avais fait comme toi, un menu à la verticale sur le côté gauche. Tu m’as donné envie de m’y remettre. Par contre je suis encore sur la V3. J’ai peur de passer sur la V4… vas falloir franchir le pas je pense si je ne veux pas avoir à refaire tout mon design une fois la migration sur la V4. Je vais donc commencer par le commencement. Super boulot en tout cas !
Salut. Merci a toi
Je sais pas si entre la v3 et v4 tu auras des soucis de migration mais perso j’en ai pas eu.
Oui je peux te filer le code des que j’ai un moment je m’en occupe.
Bonjour Link953,
Très beau travail :). Je suis également intéressé par le code si tu veux bien le partager. J’éssaye de faire quelques choses d’assez similaires en mode Dark.
Merci.
Salut !
J’ai zappé le topic, mais je vous transmet le code samedi 
Merci beaucoup
link953, tu penses à nous ?
Hello,
Désolé, petit contre-temps hier, voici mon code:
Pour la carte:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow:
12px 12px 16px 0 rgba(0, 0, 0, 0.25),
-8px -8px 12px 0 rgba(255, 255, 255, 0.3);
transition: 0.3s;
}
.card:hover {
box-shadow:
12px 12px 16px 0 rgba(0, 0, 0, 0.25),
-8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<div class="card">
<div class="container">
<h1><b>Méteo</b></h1> <!--Titre de la carte-->
</div>
<img src='data/img/24217.jpg' alt="Avatar" style="width:100%"> <!--image de la carte-->
</div>
</body>
</html>
Le menu latéral:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<style>
body {
margin:0
}
.icon-bar {
width: 90px;
height: 1080px;
background-color: #FFFF;
opacity: 0.9;
box-shadow: 0px 0px 22px 7px rgba(0,0,0,0.19);
padding-top: 150px;
}
.icon-bar i {
color: #A9A9A9;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 30px;
}
.configure{
position: absolute;
bottom: 10px;
left: 14px;
}
</style>
<body>
<div class="icon-bar">
<a href="index.php?v=d&p=plan&plan_id=13"><i class="fas fa-tachometer-alt"></i></a> <!--Bouton jeedom pour revenir au dashboard-->
<a href="index.php?v=d&p=plan&plan_id=15"><i class="icon jeedom2-light-bulb7"></i></a> <!--Bouton accès lumière maison -->
<a href="index.php?v=d&p=plan&plan_id=16"><i class="icon jeedomapp-volet-ferme"></i></a><!--Bouton accès volets-->
<a href="index.php?v=d&p=plan&plan_id=17"><i class="icon jeedom-thermo-moyen"></i></a> <!--Bouton accès thermostat-->
<a href="index.php?v=d&p=plan&plan_id=18"><i class="fas fa-bolt"></i></a> <!--Bouton conso maison-->
<a href="index.php?v=d&p=plan&plan_id=19"><i class="icon meteo-soleil"></i></a> <!--Bouton méteo en détail-->
<a href="index.php?v=d&p=plan&plan_id=14"><i class="icon jeedom-surveillance1"></i></a> <!--Bouton camera en détail-->
<a href="index.php?v=d&p=plan&plan_id=20"><i class='icon nature-drops1'></i></a> <!--Bouton arrosage-->
<a class="configure" href="#"><i class='fas fa-cog'></i></a> <!--menu configuration-->
</div>
</body>
Et enfin pour avoir les notifications:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.notification {
color: #FFFF;
text-decoration: none;
padding: 12px 20px;
position: relative;
display: inline-block;
border-radius: 2px;
}
.notification .badge {
position: absolute;
top: 5px;
right: 10px;
padding: 1px 3px;
border-radius: 80%;
background-color: red;
color: white;
font-size: 20px;
}
</style>
</head>
<script>
/* Nombre de Messages */
jeedom.message.number({
error: function (error) {
$('#div_alert').showAlert({message: error.message, level: 'danger'});
},
success : function (_number) {
if (_number == 0 || _number == '0') {
$('#messageWarning').hide();
} else {
$('#messageWarning').html(_number).show();
$('#messageModal').on('click',function(){
$('#md_modal').dialog({title: "{{Centre de Messages}}"}).load('index.php?v=d&p=message&ajax=1').dialog('open');
});
}
}
});
$('body').on('message::refreshMessageNumber', function (_event,_options) {
jeedom.message.number({
error: function (error) {
$('#div_alert').showAlert({message: error.message, level: 'danger'});
},
success : function (_number) {
if (_number == 0 || _number == '0') {
$('#messageWarning').hide();
} else {
$('#messageWarning').html(_number).show();
}
}
});
});
</script>
<body>
<a href="#" id="messageModal" class="notification"><i class="fas fa-bell" style="font-size:40px" style="color: #FFFFF"></i>
<span class="badge" id="messageWarning"></span>
</a>
</body>
</html>
Merci Beaucoup Link953 :). Je vais essayer de mettre ça en place !
N’hésite pas si tu as besoin 