Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Widget Actualités

Aller en bas

Widget Actualités

Message par BaudouinPaul le Jeu 1 Nov 2018 - 20:51

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 Razz

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

BaudouinPaul

Messages : 22
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Widget Actualités

Message par FredVig le Ven 2 Nov 2018 - 11:19

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.




Dernière édition par FredVig le Ven 2 Nov 2018 - 11:47, édité 1 fois

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Widget Actualités

Message par BaudouinPaul le Ven 2 Nov 2018 - 11:43

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 Very Happy

BaudouinPaul

Messages : 22
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Widget Actualités

Message par FredVig le Ven 2 Nov 2018 - 11:57

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

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Widget Actualités

Message par BaudouinPaul le Ven 2 Nov 2018 - 12:07

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.

BaudouinPaul

Messages : 22
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Widget Actualités

Message par FredVig le Ven 2 Nov 2018 - 14:18

En css on peut faire ça

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 2162
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Widget Actualités

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum