SOLVED - Text, Labels, Colors... and others

Community Usage questions
1

Hello,

Since yesterday, I'm trying to make things with texts... i have everything to learn...

compteur link couleur

So here i have a button changing a variable value. This variable is linked to a switch, a menu, and a dropdown.

The menu's children have different colors. If i click on it, we can see them well.

But when the menu's value change after tapping the button, i loose those colors changes.

How to keep them ?...

Here's the menu's CSS :


h1 
{
	background: radial-gradient(white,green);          /* le background derrière les lettres du texte */
	background-size: 100%;                                     /* la taille du dit background */
	color: transparent;                                              /* couleur du texte principal écrit en html */ 
	-moz-background-clip: text;                               /* les deux éléments qui viennent réalise le 
                                                                        montage */
        -webkit-background-clip: text;
	text-transform: uppercase;                       /* uppercase donne des majuscules, lowercase des 
                                                                        minuscules */
	font-size: 200%;                                       /* la taille de police d'écriture */
	line-height: 180%;                                    /* l'espacement entre les lignes */
	margin: 20rem -10rem;                            /* Position du texte et position de l'arrière-plan, en px ou 
                                                                        rem ou %... */
        position:relative;
}


JS{{
var colors = ["blue", "green", "red", "orange"]
var css = ''
for (var i = 0; i < colors.length; i++) {
  css += ".item:nth-child(" + (i+1) + "){color:" + colors[i] + ";}\n"
}
return css
}}

and the menu's HTML :

MENU
<h1> ni </br> là  </h1>

Thank you !

2

To myself and other beginners... I've made it...

Here's the result :
jolies couleurs

Here's the HTML :

MENU
<h1> ni </br> là  </h1>

Here's the CSS i've finally made :

h1 
{
background: url(Images/Fractale_2.png);         
background-size: 100%;                          
color: transparent;                           
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;                   
font-size: 200%;                                 
line-height: 180%;                            
margin: 20rem -10rem;                         
position:relative;
}

JS{{
var couleurs = ["blue", "green", "red", "orange"]
var index = (@{this}-1) 
locals.couleurs = couleurs[index];
var css = ':host{color:#{locals.couleurs};}'
for (var i = 0; i < couleurs.length; i++) {css += ".item:nth-child(" + (i+1) + "){color:" + couleurs[i] + ";}\n"}
return css
}}

After writing this more step-by-step one :

/* La déco d'en haut ......................................................................................................................... */

h1 
{
	background: url(Images/Fractale_2.png);          /* le background derrière les lettres du texte */
	background-size: 100%;                           /* la taille du dit background */
	color: transparent;                              /* couleur du texte principal écrit en html */ 
	-moz-background-clip: text;                      /* les deux éléments qui viennent réalise le montage */
        -webkit-background-clip: text;
	text-transform: uppercase;                       /* uppercase donne des majuscules, lowercase des minuscules */
	font-size: 200%;                                 /* la taille de police d'écriture */
	line-height: 180%;                               /* l'espacement entre les lignes */
	margin: 20rem -10rem;                            /* Position du texte et position de l'arrière-plan, en px ou rem ou %... */
        position:relative;
}




/* On s'occupe de la couleur de texte du widget............................................................................................... */

JS{{
var colores = ["blue", "green", "red", "orange"]
var index = (@{this}-1) 
locals.couleurs = colores[index];
}}

:host{
color:#{locals.couleurs};
}



/* On s'occupe de la couleur de texte des enfants............................................................................................... */

JS{{
var couleurs = ["blue", "green", "red", "orange"]
var css = ''
for (var i = 0; i < couleurs.length; i++) {css += ".item:nth-child(" + (i+1) + "){color:" + couleurs[i] + ";}\n"}
return css
}}
3

Bien joué @Sylvain !

Could you post here the json file to learn from your o-s-c journey ;-). I am convinced we need more real life examples on this forum to help us mastering the "beast".

La bonne soirée !

4

:slight_smile: Here's the json. You'll just have to replace background: url(Images/Fractale_2.png); by any image you may have on your hard drive...

Btw, i added some comments (in french...) to remind me what does what....

And now the menu on the right side offers one color background per child too.

Texte, Couleur, Menu, Switch, Dropdown.json (15.5 KB)
Menu, couleurs texte et background...