Bonjour à tous,
Je suis en train de réaliser mes design, et je rencontre un petit souci.
J’aimerai savoir comment changer la couleur par défaut du texte. En effet en fonction du fond que j’utilise je ne vois pas mon texte.
Si je vais dans Paramètres d’affichage, que je choisis la couleur blanc pour le texte et que je décoche Défaut, je me retrouve bien avec la bonne couleur mais du coup je perds mes valeurs de °C ou mes Tic de couleur vert / orange / rouge
Auriez-vous une idée ?
De même au cas où question bonus
Merci d’avance pour votre coup de main.
mike
Avril 17, 2020, 7:14
2
Hello,
Peut-être en allant dans Réglages / Système / Configuration / Interface et en cochant « Activer » dans « Personnalisation ». Ce n’est pas l’option par défaut a priori (ce que je ne comprends pas, mais bon).
M
1 « J'aime »
Merci pour ton retour, mais malheureusement ça ne marche pas où je n’ai pas compris
Bonjour michael,
.tooltipstered.tooltips.action.btn-default.btn-sm.btn{#ff0000 !important;
bon le rouge ça fera pas terrible alors à toi de voir laquelle des couleurs sera la mieux sur ce site par exemple pour récupérer les codes
Trouvez facilement des codes de couleur HTML pour votre site Web en utilisant nos sélecteur de couleur, tableaux de couleur et des noms de couleur HTML avec des codes de couleur HEX, RGB et les valeurs HSL.
si tu ne vois pas de changement tout de suite tu peux faire un CTRL+F5
Par le suite tu peux pousser plus loin tu enlève le code qui change en rouge pour mettre celui-ci
.tooltipstered.tooltips.action.btn-default.btn-sm.btn{
1 « J'aime »
Ouhaouuuuuuuuuuu c’est énorme c’est exactement ça que je cherchais.
Du coup j’ai compris que pour changer la couleur d’un bouton c’est dans
Mais du coup pour mon texte comment je peux savoir quelle est la bonne « formule » ?
Merci par avance.
Sous chrome clique droit et inspecter, dans la fenêtre qui s’ouvre tu trouvera se que tu veux, par contre pour changer la couleur du texte dans un design passe plutôt par les paramètre d’affichage de ton virtuel
Spine
Avril 19, 2020, 5:35
7
Bonjour,
Le virtuel que tu essayes d’afficher provient du plugin Monitoring qui possède son propre template/widget, donc si tu modifies la couleur par les options de Jeedom tu écrases le style du template et tu perds la couleur.
Tu changes la couleur de ton fond car ton manque de visibilité vient du fait que tu affiches une police grise sur fond gris :
Tu modifies le code du template qui se trouve ici :
@anon55749692 sympa le dégradé sur les boutons, je crois que je vais l’adopter.
Bonjour à tous
Savez vous quel est le code pour changer le fond des zones dans les vues ?
Et celle pour les vignettes des virtuels ?
Merci
Merci pour vos réponses c’est gentil.
Pour changer les couleurs de fonds des zones il faut que tu ailles sur ta zone → Paramètres d’affichage
<!-- CONTENU -->
<div style="height:580px; background-color: rgba(0,0,0,0.5);"> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>
Spine
Avril 19, 2020, 7:42
10
Be tout dépend de ta couleur de police justement, la couleur du core par défaut est le gris (silver) pour être lisible aussi bien sur le thème Dark que le thème Light…
<div id="plugin_container" class="eqLogic-widget eqLogic allowResize" style="width:#width#;height:#height#;border:#border#;border-radius:#border-radius#;background-color: #background-color#;color: #color#; #style#" data-translate-category="#translate_category#" data-category="#category#" data-eqLogic_id="#id#" data-version="#version#" >
<center class="widget-name" style="padding-right: 0px;"><a href="#eqLink#" style="font-size : 1.1em;#hideEqLogicName#">#name_display#<span style="font-size: 0.85em;position: relative;top:-2px;display:none;" class="object_name">#object_name#</span></a>
<span style="float: right;display: #statuts_display#;">
<span title="Eteindre l'équipement" class="poweroff tooltips" data-type="action" data-subtype="other" data-cmd_id="#cmd_poweroff_id#" style="float: right">
<a class="action" style="cursor: pointer;"><i class="fa fa-power-off" style="font-size : 0.9em;padding-right:10px"></i></a>
<script>
$('.poweroff[data-cmd_id=#cmd_poweroff_id#] .action').on('click', function() {
bootbox.confirm('Etes-vous sûr de vouloir éteindre l\'équipement #name# ?', function (result) {
if (result) {
jeedom.cmd.execute({id: '#cmd_poweroff_id#'});
}
});
});
</script>
</span>
<span title="Redémarrer l'équipement" class="reboot tooltips" data-type="action" data-subtype="other" data-cmd_id="#cmd_reboot_id#" style="float: right">
<a class="action" style="cursor: pointer;"><i class="fas fa-sync" style="font-size : 0.9em;padding-right:10px"></i></a>
<script>
$('.reboot[data-cmd_id=#cmd_reboot_id#] .action').on('click', function() {
bootbox.confirm('Etes-vous sûr de vouloir redémarrer l\'équipement #name# ?', function (result) {
if (result) {
jeedom.cmd.execute({id: '#cmd_reboot_id#'});
}
});
});
</script>
</span>
<span id="iconSSH#id#" style="float: right;width:25px;padding:2px;"></span>
<script>
if ('#cnx_ssh#' == 'OK') {
$('#iconSSH#id#').append('<i title="Connexion SSH OK" class="fa fa-check tooltips" style="font-size : 1.1em;color: #00FF00;" ></i>');
}
if ('#cnx_ssh#' == 'KO') {
$('#iconSSH#id#').append('<i title="Connexion SSH KO" class="fa fa-times tooltips" style="font-size : 1.1em;color: #FF0000;"></i>');
}
</script>
</span>
</center>
<div class="tooltips" data-cmd_id="#namedistriid#" style="margin-left:5px;display: #namedistri_display#; color: white;">
<span title="Distribution Linux" class="fab fa-linux" style="min-width:15px"></span>
<span>#namedistri#</span>
</div>
<div class="tooltips" data-cmd_id="#uptimeid#" style="margin-left:5px;display: #uptime_display#; color: white;">
<span title="Temps d'activité (uptime)" class="fas fa-tachometer-alt" style="min-width:15px;"></span>
<span id="uptime#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
$('#uptime#id#').append('<span>#uptime#</span>');
}
</script>
<div class="tooltips" style="margin-left:5px;display: #loadavg_display#; color: white;">
<span title="Charge système (load average)" class="fa techno-courbes3" style="width:15px;"></span>
<span id="loadavg1mn#id#"></span><span id="loadavg5mn#id#"></span><span id="loadavg15mn#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
if ('#loadavg1mn#' == '') {
$('#loadavg1mn#id#').append('<span></span>');
}else if ('#loadavg1mn#' < '#loadavg1mnvertinfa#') {
$('#loadavg1mn#id#').append('1 min : <span data-cmd_id="#loadavg1mnid#" class="history cursor" style="color: #00FF00;" >#loadavg1mn#</span>');
}else if ('#loadavg1mn#' >= '#loadavg1mnorangede#' && '#loadavg1mn#' <= '#loadavg1mnorangea#') {
$('#loadavg1mn#id#').append('1 min : <span data-cmd_id="#loadavg1mnid#" class="history cursor" style="color: #FF8000;" >#loadavg1mn#</span>');
}else if ('#loadavg1mn#' > '#loadavg1mnrougesupa#' && '#loadavg1mnrougesupa#' !== '') {
$('#loadavg1mn#id#').append('1 min : <span data-cmd_id="#loadavg1mnid#" class="history cursor" style="color: #FF0000;" >#loadavg1mn#</span>');
}else {
$('#loadavg1mn#id#').append('1 min : <span data-cmd_id="#loadavg1mnid#" class="history cursor">#loadavg1mn#</span>');
}
if ('#loadavg5mn#' == '#loadavg5mnvertinfa#') {
$('#loadavg5mn#id#').append('<span></span>');
}else if ('#loadavg5mn#' < '#loadavg5mnvertinfa#') {
$('#loadavg5mn#id#').append(' - 5 min : <span data-cmd_id="#loadavg5mnid#" class="history cursor" style="color: #00FF00;" >#loadavg5mn#</span>');
}else if ('#loadavg5mn#' >= '#loadavg5mnorangede#' && '#loadavg5mn#' <= '#loadavg5mnorangea#') {
$('#loadavg5mn#id#').append(' - 5 min : <span data-cmd_id="#loadavg5mnid#" class="history cursor" style="color: #FF8000;" >#loadavg5mn#</span>');
}else if ('#loadavg5mn#' > '#loadavg5mnrougesupa#' && '#loadavg5mnrougesupa#' !== '') {
$('#loadavg5mn#id#').append(' - 5 min : <span data-cmd_id="#loadavg5mnid#" class="history cursor" style="color: #FF0000;" >#loadavg5mn#</span>');
}else {
$('#loadavg5mn#id#').append(' - 5 min : <span data-cmd_id="#loadavg5mnid#" class="history cursor">#loadavg5mn#</span>');
}
if ('#loadavg15mn#' == '') {
$('#loadavg15mn#id#').append('<span></span>');
}else if ('#loadavg15mn#' < '#loadavg15mnvertinfa#') {
$('#loadavg15mn#id#').append(' - 15 min : <span data-cmd_id="#loadavg15mnid#" class="history cursor" style="color: #00FF00;" >#loadavg15mn#</span>');
}else if ('#loadavg15mn#' >= '#loadavg15mnorangede#' && '#loadavg15mn#' <= '#loadavg15mnorangea#') {
$('#loadavg15mn#id#').append(' - 15 min : <span data-cmd_id="#loadavg15mnid#" class="history cursor" style="color: #FF8000;" >#loadavg15mn#</span>');
}else if ('#loadavg15mn#' > '#loadavg15mnrougesupa#' && '#loadavg15mnrougesupa#' !== '') {
$('#loadavg15mn#id#').append(' - 15 min : <span data-cmd_id="#loadavg15mnid#" class="history cursor" style="color: #FF0000;" >#loadavg15mn#</span>');
}else {
$('#loadavg15mn#id#').append(' - 15 min : <span data-cmd_id="#loadavg15mnid#" class="history cursor">#loadavg15mn#</span>');
}
}
</script>
<div class="tooltips" data-cmd_id="#Mempourcid#" style="margin-left:5px;display: #Mem_display#; color: white;">
<span title="Mémoire vive" class="fa techno-memory" style="width:15px;"></span>
<span id="Mempourcent#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
if ('#Mempourc#' == '') {
$('#Mempourcent#id#').append('<span>#Mem#</span>');
}else if ('#Mempourc#' > '#Mempourcvertsupa#' && '#Mempourcvertsupa#' != '') {
$('#Mempourcent#id#').append('#Mem# (<span data-cmd_id="#Mempourcid#" class="history cursor" style="color: #00FF00;" >#Mempourc#%</span>)');
}else if ('#Mempourc#' >= '#Mempourcorangede#' && '#Mempourc#' <= '#Mempourcorangea#') {
$('#Mempourcent#id#').append('#Mem# (<span data-cmd_id="#Mempourcid#" class="history cursor" style="color: #FF8000;" >#Mempourc#%</span>)');
}else if ('#Mempourc#' < '#Mempourcrougeinfa#') {
$('#Mempourcent#id#').append('#Mem# (<span data-cmd_id="#Mempourcid#" class="history cursor" style="color: #FF0000;" >#Mempourc#%</span>)');
}else {
$('#Mempourcent#id#').append('#Mem# (<span data-cmd_id="#Mempourcid#" class="history cursor" >#Mempourc#%</span>)');
}
}
</script>
<div class="tooltips" data-cmd_id="#Mem_swapid#" style="margin-left:5px;display: #Mem_swap_display#; color: white;">
<span title="Mémoire Swap" class="fa fa-list-alt" style="width:15px;"></span>
<span id="Mem_swap#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
$('#Mem_swap#id#').append('<span>#Mem_swap#</span>');
}
</script>
<div class="tooltips" data-cmd_id="#ethernet0id#" style="margin-left:5px;display: #ethernet0_display#; color: white;">
<span title="Trafic réseau" class="fa techno-fleches" style="width:15px;"></span>
<span id="ethernet0#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
$('#ethernet0#id#').append('<span>#ethernet0#</span>');
}
</script>
<div class="tooltips" data-cmd_id="#hddpourcusedid#" style="margin-left:5px;display: #hddused_display#; color: white;">
<span title="Espace disque" class="fas fa-hdd" style="width:15px;"></span>
<span id="hddpourcused#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
if ('#hddpourcused#' == '') {
$('#hddpourcused#id#').append('<span></span>');
}else if ((parseInt('#hddpourcused#')) < (parseInt('#hddpourcusedvertinfa#'))) {
$('#hddpourcused#id#').append('Total : #hddtotal# - Utilisé : #hddused# (<span data-cmd_id="#hddpourcusedid#" class="history cursor" style="color: #00FF00;">#hddpourcused#%</span>)');
}else if ((parseInt('#hddpourcused#')) >= (parseInt('#hddpourcusedorangede#')) && (parseInt('#hddpourcused#')) <= (parseInt('#hddpourcusedorangea#'))) {
$('#hddpourcused#id#').append('Total : #hddtotal# - Utilisé : #hddused# (<span data-cmd_id="#hddpourcusedid#" class="history cursor" style="color: #FF8000;">#hddpourcused#%</span>)');
}else if ((parseInt('#hddpourcused#')) > (parseInt('#hddpourcusedrougesupa#')) && (parseInt('#hddpourcusedrougesupa#')) != '') {
$('#hddpourcused#id#').append('Total : #hddtotal# - Utilisé : #hddused# (<span data-cmd_id="#hddpourcusedid#" class="history cursor" style="color: #FF0000;">#hddpourcused#%</span>)');
}else {
$('#hddpourcused#id#').append('Total : #hddtotal# - Utilisé : #hddused# (<span data-cmd_id="#hddpourcusedid#" class="history cursor">#hddpourcused#%</span>)');
}
}
</script>
<div id="synovol2#id#"></div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
if ('#synovolume2_display#' == 'OK'){
$('#synovol2#id#').append('<div id="synovol2#id#" class="tooltips" data-cmd_id="#hddpourcusedv2id#" style="margin-left:5px;display: #hddusedv2_display#;"><span title="Espace disque Volume 2 (Synology)" class="fa fa-hdd-o" style="width:15px"></span> <span id="hddpourcusedv2#id#"></span></div>');
}
if ('#hddpourcusedv2#' == '') {
$('#hddpourcusedv2#id#').append('<span></span>');
}else if ((parseInt('#hddpourcusedv2#')) < (parseInt('#hddpourcusedv2vertinfa#'))) {
$('#hddpourcusedv2#id#').append('Total : #hddtotalv2# - Utilisé : #hddusedv2# (<span data-cmd_id="#hddpourcusedv2id#" class="history cursor" style="color: #00FF00;">#hddpourcusedv2#%</span>)');
}else if ((parseInt('#hddpourcusedv2#')) >= (parseInt('#hddpourcusedv2orangede#')) && (parseInt('#hddpourcusedv2#')) <= (parseInt('#hddpourcusedv2orangea#'))) {
$('#hddpourcusedv2#id#').append('Total : #hddtotalv2# - Utilisé : #hddusedv2# (<span data-cmd_id="#hddpourcusedv2id#" class="history cursor" style="color: #FF8000;">#hddpourcusedv2#%</span>)');
}else if ((parseInt('#hddpourcusedv2#')) > (parseInt('#hddpourcusedv2rougesupa#')) && (parseInt('#hddpourcusedv2rougesupa#')) != '') {
$('#hddpourcusedv2#id#').append('Total : #hddtotalv2# - Utilisé : #hddusedv2# (<span data-cmd_id="#hddpourcusedv2id#" class="history cursor" style="color: #FF0000;">#hddpourcusedv2#%</span>)');
}else {
$('#hddpourcusedv2#id#').append('Total : #hddtotalv2# - Utilisé : #hddusedv2# (<span data-cmd_id="#hddpourcusedv2id#" class="history cursor">#hddpourcusedv2#%</span>)');
}
}
</script>
<div class="tooltips" data-cmd_id="#cpu_tempid#" style="margin-left:5px;display: #cpu_display#; color: white;">
<span title="Nombre CPU, fréquence et température" class="fa techno-pc" style="width:15px;"></span>
<span id="cpu#id#"></span><span id="cpu_temp#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
if ('#cpu_temp#' != '') {
if ('#cpu_temp#' < '#cpu_tempvertinfa#') {
$('#cpu#id#').append('<span>#cpu# </span>');
$('#cpu_temp#id#').append('(<span data-cmd_id="#cpu_tempid#" class="history cursor" style="color: #00FF00;" >#cpu_temp#°C</span>)');
}else if ('#cpu_temp#' >= '#cpu_temporangede#' && '#cpu_temp#' <= '#cpu_temporangea#') {
$('#cpu#id#').append('<span>#cpu# </span>');
$('#cpu_temp#id#').append('(<span data-cmd_id="#cpu_tempid#" class="history cursor" style="color: #FF8000;" >#cpu_temp#°C</span>)');
}else if ('#cpu_temp#' > '#cpu_temprougesupa#' && '#cpu_temprougesupa#' != '') {
$('#cpu#id#').append('<span>#cpu# </span>');
$('#cpu_temp#id#').append('(<span data-cmd_id="#cpu_tempid#" class="history cursor" style="color: #FF0000;" >#cpu_temp#°C</span>)');
}else {
$('#cpu#id#').append('<span>#cpu# </span>');
$('#cpu_temp#id#').append('(<span data-cmd_id="#cpu_tempid#" class="history cursor">#cpu_temp#°C</span>)');
}
}else {
$('#cpu#id#').append('<span>#cpu#</span>');
}
}
</script>
<div class="tooltips" data-cmd_id="#perso1id#" style="margin-left:5px;display: #perso1_display#;">
<span class="fa" title="#nameperso1#" style="width: 15px;max-width: 15px;max-height: 15px;">#iconeperso1#</span>
<span id="uniteperso1#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
$('#uniteperso1#id#').append('<span data-cmd_id="#perso1id#" class="history cursor">#perso1##uniteperso1#</span>');
}
</script>
<div class="tooltips" data-cmd_id="#perso2id#" style="margin-left:5px;display: #perso2_display#;">
<span class="fa" title="#nameperso2#" style="width: 15px;max-width: 15px;max-height: 15px;">#iconeperso2#</span>
<span id="uniteperso2#id#"></span>
</div>
<script>
if ('#cnx_ssh#' == 'OK' || '#cnx_ssh#' == 'No') {
$('#uniteperso2#id#').append('<span data-cmd_id="#perso2id#" class="history cursor">#perso2##uniteperso2#</span>');
}
</script>
</div>
Autre solution, tu reprends chacune des info. remontées par le plugin dans un virtuel et tu pourras appliqué la couleur que tu souhaites sur chaque commande…
1 « J'aime »
Bonsoir,
Je prends le fil de la conversation et je me demandais comment je peux changer la couleur de l’étiquette de ma tuile de mon scénario. Faut il passer par l’interface puis activer la perso avancés pour se retrouver dans le css? Si oui, que dois-je rentrer pour y mettre la couleur de mon choix ?
je n’ai pas trouvé où je peux changer la couleur des boutons.
