Css dans widget pour changer couleur texte et fond

Utilisation du core de Jeedom Widgets
1

Bonjour les experts en widget :grinning:

J’essaie de mettre du texte de couleur avec un fond de couleur également.
J’ai donc créé un widget (en ajoutant dans la partie Test, Expression, Résultat) le css et j’applique ce widget sur une commande. Là ça va je m’en sort. Ce n’est peut-être pas optimisé, vous me direz ce que vous en pensez.

Donc j’ai par exemple #value# == 255 et j’applique dans ce cas :

<span style=color:#FDFEFE;background-color:#2471A3>&nbsp;&nbsp;En Pause&nbsp;&nbsp;</span>

Pour ce résultat :
Capture d’écran 2023-07-11 à 12.27.38

Je voudrais pour aller encore plus loin rajouter une petite bordure au champ.
J’essaie avec ce que j’ai trouvé sur les cours en css :
border-width: thick; mais je n’arrive à rien malgré plusieurs essais.

D’après l’exemple ça devrait donner :
Capture d’écran 2023-07-11 à 12.29.41

Pendant que j’y suis je voudrais avoir aussi les coins arrondis. Là il semble que c’est :
border-radius: 4em;
Mais pareil je n’y arrive pas :confused:

Si quelqu’un de calé passe par là son aide est la bienvenue.
Merci
Bien cordialement

2

Bonjour,
Pour avoir ça :
Screenshot_20230711_131740_Chrome

Je rentre ça dans le widget :
<div style="border-style: none; border-width: 2px; border-radius: 100%; width: 50px; height: 50px; background: green; color: white"><div style="position: relative; top: 10px;"<i class='icon mdi-fridge-industrial'></i></div></div>

Si ça peut aider.

1 « J'aime »
3

Bonjour,
Oui ça m’aide un peu, je vois que la méthode fonctionne et que c’est juste mon écriture qui n’est pas bonne.
Mettre une icone je prends aussi :slight_smile: Ca peu me servir
Merci

1 « J'aime »
4

Voici un exemple dans un widget

image

<span style="font-size: 25px;color:grey; text-shadow: 2px 2px 5px grey;border:1px solid;border-radius:5px;padding:7px; box-shadow: 2px 2px 5px grey;">Fermée</span>
5

Bonjour,
Pas mal :wave:
Ca me rassure, je ne suis pas le seul à passer du temps pour une information stylée.
La seule différence c’est que c’est empirique chez moi. Pas de compétence donc j’y vais à coup de copie et d’essais.
Il parait que l’apprentissage par imitation est une forme d’intelligence … chez les singes :joy: mes ancêtres surement.

3 « J'aime »
6

Je bricole aussi pas mal.
J’ai regardé quelques cours de CSS sur Interne, ça aide puis il y a beaucoup d’aide sur le forum … alors dès que je peux apporter une modeste contribution je le fais avec plaisir.
Bon courage

7

Hello,
J’ai piqué l’exemple de Franck pour mes tests et ça donne ça :
Capture d’écran 2023-07-12 à 11.20.57
Mais malgré le retour à la ligne après le widget Charge en Cours et le retour avant le widget VE Connecté et bien ça se chevauche.
Pas envie de passe en disposition Tableau qui me complique pour le reste. Auriez vous une idée ?
Bien cordialement

8

Hello,

en rajoutant un margin-bottom dans les styles css.

9

Bonsoir,
Merci j’ai été voir ça du coup dans les cours.
Je ne dois pas bien m’en servir surement car ça ne bouge pas :frowning:

Je l’ai rajouté comme cela dans le css de franck.

<span style="font-size: 25px;color:#FDFEFE;background-color:#2471A3;text-shadow: 2px 2px 5px #2471A3;border:1px solid;border-radius:5px;padding:3px;box-shadow: 2px 2px 5px #2471A3;margin-bottom: 20px;">&nbsp;&nbspVE Déconnecté&nbsp;&nbsp</span>
10

en rajoutant un petit display: inline-block; , tu sera peut être obligé d’augmenter le padding.

11

Hello,
Bon j’ai réussi à avoir ce que je voulais à force de tests, les sachants vont me huer mais on fait ce qu’on peu :slight_smile:

J’ai donc rajouté :

margin-block-end: 15px;display: inline-block;padding:20px;

Capture d’écran 2023-07-13 à 10.33.40
Capture d’écran 2023-07-13 à 10.33.40742×300 22.5 KB

12

Désolé je pirate ce fil mais peut être que @mich0111 pourrait m’aider aussi sur ma question ci-dessous :innocent:?
Je suis un peu dans le même cas que rennais et je tâtonne :smiley:

13

Je veux bien essayer de t’aider mais quelle est la question ?

14

Elle est dans l’autre fil que j’ai linké :slight_smile:

15

Je n’aurais pas mieux

16

Ok merci quand même :grimacing: