Widget (taille, police, bold...)

Bonjour à tous,
J’ai sauté le pas, et j’ai donc migré vers la V4.
J’avais un widget en V3 où j’avais modifié la taille de la police et la police.

<div style="min-height : 60px;min-width : 20px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<!-- retrait label-info dans le class pour supprimer le fond bleu -->
		<span class='label state' style="font-size: 50px;position:relative;top:2px;opacity: 1;"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

En passant en V4, il ne fonctionne plus du tout.
J’ai donc voulu utiliser les paramètres optionnels du widget, mais d’après ce que j’ai lu, ce n’est pas possible.
image

Dois-je refaire mon widget ou alors puis-je utiliser les paramètres optionnels à partir du moment où j’utilise les bons noms ?
Avez-vous une liste des paramètres modifiables ?

Merci pour vos conseils.
Mathieu

Hello,
J’ai trouvé une solution, je crée un widget
image

puis je mets ce code dans le “test”

<div style="font-weight: bold; font-size: 40px; color: #FFFFFF">#value##unite#</div>

Mathieu

Bonjour
Merci pour cette astuce. elle marche parfaitement sur mon widget.
Cependant, j’ai 200 tests de valeurs à faire pour afficher un texte particulier : je récupère une tendance météo donnée par ma station, cette tendance étant un chiffre allant de 0 à 200, et chaque chiffre correspond à une phrase particulière. Par exemple #value#==4, je fais écrire “Plutôt clair avec peu de changement de température”
Là ou cela se complique c’est que je vais devoir mettre les attributs de style sur chacun des 200 tests, et si je souhaite modifier un paramètre, il faudra que je modifie 400 fois (200 pour le light et 200 pour le dark).
N’y aurait-il pas une méthode globale?
Merci
Stéphane

Je me réponds à moi-même :wink:
Il y a un solution, peut-être pas parfaite, mais qui fonctionne bien chez moi.
1- Ecrire un code CSS (aller dans Réglage/Système/Personnalisation avancée/CSS)

.nom_du_style{
font-size: 0.5em;
font-weight: lighter;
}

2- Dans le widget
faire le test #value#==4 (par exemple)
sur résultat du test <span class="nom_du_style">Plutôt clair avec peu de changement de température</span>

Si on veut changer un attribut : modifier dans le CSS et tout se modifie

Pas bête !
J’y avais pas du tout pensé.
Merci, je vais essayer.
Mathieu

Hello @Stephane_Bec,
Sais-tu comment appliquer le CSS sur un Design ?
image

Mathieu

Bonjour @OUARZA
Es-tu sur un jeedom V4?

Hello,
Oui, je suis en V4.
Mathieu

Je ne vois pas où tu trouve cette page dans jeedom.
Moi je vais sur “réglage”-> “système” -> “personnalisation avancée” et je mets mon CSS comme ci-dessous :
Capture

Puis ensuite, dans “outils” -> “widgets”, je mets mon Le texte que tu souhaites afficher comme ci-dessous :
Capture

Voilà !

Oui, je suis d’accord avec toi, mais en fait si je veux appliquer un CSS uniquement sur un élément dans mon Design sans toucher aux éléments de mon Dashboard.
Comment appliquer un CSS uniquement sur un élément du Design ?
Mathieu

A mon avis, il te faut créer 2 codes CSS ou 2 widgets, un pour le design et l’autre pour le design

Quelle syntaxe mettre ici ?
image

A cet endroit, il faut mettre ton code CSS :

.previsions_vantage{
font-size: 0.5em;
font-style: normal;
font-weight: lighter;
}

C’est dommage.
J’ai 20 affichages, je dois faire 20 fois la modification alors que si on avait la possibilité de mettre <class=“previsions_vantage”> on aurait juste à modifier dans le paramétrage avancée de Jeedom pour que la modification s’applique sur les 20 éléments.