Widget Actualités

[BaudouinPaul]

Bonjour à tous !

J'aimerai rendre la partie "Dernières actualités" de mon site un peu plus glamour que ce qui est proposé nativement par jimdo (voir ici : www. cdck44.fr). J'ai trouvé ce code, qui retravaillé pourrait être sympa : https:// codepen.io/andytran/pen/BNjymy .
Cependant, cela impliquerait d'aller bidouiller le code à chaque fois que de nouveaux articles sont publiés (modifier manuellement le code quoi). D'où mon interrogation : est-il possible d'automatiser cette tâche ? Je m'explique : plutôt que d'indiquer manuellement à chaque fois la balise "h1.title" par le titre de l'article, est-il possible de lui dire "Affecter le titre du dernier article paru" dans un lanage HTML ? Je ne sais pas si je suis clair

Merci par avance à tous ceux qui éclaireront ma lanterne !

[FredVig]

Si vous voulez toucher uniquement un élément sur la page, parmi d'autres éléments de même class, c'est possible en fonction de sa position.
Ce n'est pas possible directement en fonction de sa date de publication, mais la date de publication place l'élément dans une position prédéterminée.
Selon le résultat recherché, ciblez cet élément avec l'une des pseudo class
:first
:first-child
:last-child
:nth-child
:nth-last-child

voir ici :
https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

Si vous utilisez https://codepen.io/andytran/pen/BNjymy, il faudra obligatoirement ajouter de quoi cibler le nouvel article.
En fait, ce code n'est pas adapté à Jimdo, il s'applique à tout article, du moment qu'on l'écrit sur le même modèle, m^mes éléments, de m^mes class.
On peut utiliser ses principes en les adaptant à Jimdo, cela peut être une expérience instructive.

Avec un code css touchant les tous les articles de blog Jimdo, ou tous les articles se trouvant sur une page précise, c'est par contre possible.
Dans ce cas, il suffit de cibler en utilisant la bonne class, ou l'id de la page.
Notez que le code de Andy Tran est complexe pour une simple transformation au survol.
Le même résultat pourrait être obtenu avec du css, sans javascript. (moindre risque  de perte de code)
Pour cela vous devrez suivre le tuto "modifier le code" de ce ce forum. (sauf si vous maîtrisez déjà la modification de code html sous jimdo)
Il faudra notamment explorer les propriétés "transition", "transform" "delay"
La pseudo class ::hover
Quelques propriétés de design comme box-shadow, les filtres css sur image.

[BaudouinPaul]

Bonjour FredVig,
J'ai déjà pas mal travaillé le html du site, pas de soucis.
Nous avons une page "actus" avec tous les articles de listés. https://www. cdck44.fr/actus/
Cela me permets de récupérer les sélecteurs. Pour les titres par exemple :
Dernier article = #cc-m-6774375263 > div > div:nth-child(1) > a.j-blog-header > h2
Avant dernier article = #cc-m-6774375263 > div > div:nth-child(2) > a.j-blog-header > h2
Etc ...
Il serait donc possible de modifier le CSS du module (rendu : https:// codepen.io/baudouinpaul/pen/rQBvNE) afin d'y intégrer ces sélecteurs ? J'apprends sur le tas mais c'est super intéressant

[FredVig]

je pense que ce serait plus simple de faire un code css sans javascript.

Votre ciblage peut fonctionner.
Vous pouvez aussi sans doute le généraliser en partant d'un ciblage par class
.j-blogSelection, j-blogarticle…
Plutôt que par identifiant #cc-m-6774375263, qui peut changer au fil de vos modifications

[BaudouinPaul]

Merci.
Le ciblage doit être fait dans la partie CSS ou HTML ? Car j'avais cru comprendre que le CSS ne gérait que la mise en forme, et non le contenu. OK pour le javascript. ça permettra en effet d'alléger le tout.

[FredVig]

En css on peut faire ça

[Contenu sponsorisé]