[RÉGLÉ] Couleur changeante en fond de page ?

[RobertG]

Bonjour,

Sur un site J3 que je suis en train de migrer, la couleur de la page d'accueil varie entre gris clair (217,217,217) et blanc(255,255,255 si j'interprète bien) grâce à un fichier JS dont l'appel est fait directement dans le fichier index.php du template.

Savez-vous s'il y aurait une alternative utilisable dans Cassiopeia ou comment placer cette inclusion du fichier JS ?

Merci d'avance !

[pmleconte]

Bonjour Robert,

As-tu essayé le plugin LM-Custom de Loïc ? https://www.lomart.fr/extensions/lm-custom

Pascal

[pmleconte]

Sinon, d'après https://magazine.joomla.org/all-issu...of-tips-tricks il suffit de créer un js/user.js avec ton code dans le répertoire du template. (voir le point 4.6)

Pascal

[RobertG]

Merci Pascal. Non, je ne l'ai pas essayé et j'aimerais limiter les extensions sur ce site.

J'ai essayé le code dans un user.js mais il ne semble pas pris en compte, il doit y avoir quelque chose d'autre qui prend le pas.

[pmleconte]

En fait, la doc est incorrecte : il faut mettre le js dans le répertoire media/templates/site/cassiopeia/js et cela fonctionne.

Pascal

[pmleconte]

En fait, la doc est incorrecte : il faut mettre le js dans le répertoire media/templates/site/cassiopeia/js et cela fonctionne.

Pascal

C'est écrit en haut :

0.2. Don't forget: the template media folders have just moved with J!4.1


As you might know, with the introduction of Child Templates in J4.1 the path to the “template media folders” (css, images, js and scss) changes

• from templates/cassiopeia/ in J!4.0
• to media/templates/site/cassiopeia/ in J!4.1+

for Cassiopeia (and similarly for all Templates which are / will be compatible with Child Templates).

Good to know: if you created for example a templates/cassiopeia/css/user.css in J4.0, once you update to 4.1 the file will be automagically moved to media/templates/site/cassiopeia/css/user.css.

So you don’t have to worry about this, Joomla (Dimitris Grammatikogiannis in the present case) got you covered ????

[RobertG]

C'est bien là que je l'ai mis, mais une instruction doit passer pour le rendre inactif ou inefficace.
De pus, il faudrait qu'il ne fonctionne pas sur toutes les pages...

[pmleconte]

Bonjour,

As-tu essayé de mettre le code donné en exemple :

alert( 'Hello, world!' );

De mon côté, j'ai eu l'affichage sans souci.

Pascal

[RobertG]

Bonjour,

Comme je l'avais un peu imaginé, c'est le code datant d'une bonne dizaine d'années qui est en erreur (j'avais oublié de regarder la console )

Uncaught TypeError: window.addEvent is not a function

Hello World s'affiche bien, j'avais oublié de le préciser...

[RobertG]

Bonjour,

J'ai pu supprimer les erreurs de ce fichier JavaScript, mais je bute sur un point essentiel : l'ancien script s'appuie sur l'id "body" définie dans le fichier index.php. Or avec Cassiopeia, la balise body n'a aucune id, seulement des classes.

La seule id est "homepage" définie dans l'article qui doit s'afficher en milieu de page et même en utilisant celle-ci, le fond de l'article ne change pas de teinte (Hello world laissé en début de fichier JS pour test s'affiche bien), mais dans la console j'ai ce message :

La mise en page a été forcée avant le chargement complet de la page. Si les feuilles de style ne sont pas encore chargées, cela peut provoquer un flash de contenu non stylisé.

La ligne citée correspond à celle de la première fonction du fichier JS. Ce message n'apparaît pas dans le site J3, l'appel au fichier JS étant intégré dans l'entête du index.php du template.

La couleur de fond ne change absolument pas, je viens de le tester encore en faisant varier de blanc à noir au lieu de blanc à gris clair.

En PJ le contenu du fichier user.js, si quelqu'un peut m'expliquer quelle erreur j'ai pu faire.
Merci !

[daneel]

Bonjour,

1. Je ne vois pas de pj attaché.

2. Pourquoi en js ?
j4 n'inclus pas de jquery et encore moins mootools.
L'erreur que tu indique provenait généralement de mootools.

3. En css, l'animation en boucle est très simple à faire dans user.css

Si on suppose que tu n'as pas changé le lien de menu.
exemple avec l'id 101 du lien en classe css de body (il suffit de vérifier le code source de la page).

body.itemid-101 {background: #d9d9d9; animation: chgcolor 5s infinite;}
@keyframes chgcolor {from {background-color: #d9d9d9;} to {background-color: #ffffff;}}

Après tu n'indique pas si la couleur change par un évenement particulier (au scroll par exemple).

[RobertG]

Bonjour Yann,

J'avais en effet oublier la pièce jointe, je l'ai ajoutée entretemps.

Le fonctionnement du site utilise une page d'accueil avec uniquement un logo et deux liens vers les versions anglaise et française du site. Ceux-ci sont présents dans un article contenant une div "homepage" englobant le contenu, que le script utilise pour ne définir la couleur de fond que pour cette page et pas sur les autres.

[daneel]

Sauf erreur, pour fonctionner sous J4, ton code dans user.js serait plutôt :

var t = null;

function redrawBackground(n, s) {
var start = 217;
var stop = 255;
if (!n) { n = start; }
if (1 == s) { n++; }
else { n--; }
if (n >= stop) { s = 0; }
if (n <= start) { s = 1; }
document.body.style.background = 'rgb(' + n + ', ' + n + ', ' + n + ')';
t = setTimeout("redrawBackground(" + n + ", " + s + ")", 50);
}

window.addEventListener("load",function() { t = setTimeout("redrawBackground(0, 0)", 100); });

Tu peux tester (cela fonctionne)

puis remplacer ensuite document.body par la selection d'un id (si c'est le cas)

document.getElementById("homepage")

ou la premier élément d'une classe css

Par exemple si tu as ajouté homepage en classe css de body en passant par l'édition du lien de menu
cela donne

getElementsByClassName('homepage')[0]

J'ai du ajouter [0] pour désigner le premier sinon j'aurai du créer une boucle en js.
Concrétement, cela donne :

var t = null;

function redrawBackground(n, s) {
var start = 217;
var stop = 255;
if (!n) { n = start; }
if (1 == s) { n++; }
else { n--; }
if (n >= stop) { s = 0; }
if (n <= start) { s = 1; }
document.getElementsByClassName('homepage')[0].style.background = 'rgb(' + n + ', ' + n + ', ' + n + ')';
t = setTimeout("redrawBackground(" + n + ", " + s + ")", 50);
}

window.addEventListener("load",function() { t = setTimeout("redrawBackground(0, 0)", 100); });

A la lecture du code js, je comprends que cela part du gris vers le blanc pour revenir au gris initial.
donc inutile de le faire en js... ( pourquoi se compliquer la vie... )

avec user.css et sans utiliser de javascript, ce serait :

body {background: #d9d9d9; animation: chgcolor 5s infinite;}
@keyframes chgcolor {
0% { background-color: #d9d9d9; }
50% { background-color: #ffffff; }
100% { background-color: #d9d9d9; }
}

Tu remplace body par l'élément que tu veux... le résultat sera le même que le code js mais bien plus simple en commençant par le gris puis fond blanc à la moitié de l'animation (50%) et ça se termine vers le gris initial à 100% de l'animation nommé chgcolor.

[RobertG]

Merci infiniment ! avec le css ça fonctionne en effet parfaitement !

Une question annexe : quelles lectures sont-elles conseillées pour s'y retrouver avec ces Flexbox, Grid, etc. ?
La gestion des templates n'a jamais été ma tasse de thé, et avec ces nouveaux types de gestion, je suis encore plus perdu !

[daneel]

Merci infiniment ! avec le css ça fonctionne en effet parfaitement !

Une question annexe : quelles lectures sont-elles conseillées pour s'y retrouver avec ces Flexbox, Grid, etc. ?
La gestion des templates n'a jamais été ma tasse de thé, et avec ces nouveaux types de gestion, je suis encore plus perdu !

Je suis en train d'écrire et peaufiner mes explications à travers différents tutoriels.
Ce sera disponible quand j'aurais finalisé d'ici la rentrée.

J'explique en autre le choix de l'équipe pour Cassiopeia... css grid & bootstrap 5.x mais également
- Comment réaliser à partir de zéro
- Comment créer depuis cassiopeia en template enfant.
Globalement, les deux méthodes sont d'un niveau accessible à tous. Tu auras toutes les réponses et plus encore !

Librement et gratuitement mais surtout en français !

Les journées passent tellement vite que je vais devoir lancer un décompte !