Résolu Mettre une flèche New ponctuellement

Bonjour j'ai trouvé des renseignements pour mettre une petit flèche sur un post de 2014 ... de  stormalo .... 

Mais moi ce que je voudrais, c'est mette cette petit flèche par exemple dans mon menu de gauche devant certains nouveaux articles 

jj'ai donc crée un nouveau module comme indiqué en 2014 mais cela ne fonctionne pas si je veux le mettre ponctuellement devant un nouveau sujet que je veux mettre en exergue , comme si dessous 

y a t'il une personne super géniale comme d'habt quand je suis dans la mouise qui pourrait me donner ce renseignement, cela serait super sympa  

Merci d'avance 

Bonne soirée  ... 

Uluru ou Maryline 

Bonsoir Uluru,

Je ne pense pas être super géniale, mais voici comment je procéderais.

Pour réaliser ce que tu souhaites, il faut bien sûr intervenir dans le css ce qui risque d'être un peu lourd à gérer puisque le module en question est destiné aux derniers articles donc, modifications à faire au fur et à mesure des éditions d'articles.

Quoiqu'il en soit, il faut déjà trouver le sélecteur de l'article et pour ce faire (avec Google Chrome) :

- clic droit sur le titre de l'article concerné qui se trouve dans le module,

- dans la fenêtre qui s'ouvre cliquer sur "inspecter" puis ensuite encore clic droit sur le code html qui apparaîtra grisé puis Copy -> Copy selector.

Coller le code obtenu qui ressemble à celui ci-dessous dans le css (Apparence -> Modifier le thème -> Ajouter du css) :

#module_menu_contenuXXXXXXXXX > div > ul > li:nth-child(1) > a

et y ajouter ce qui est en rouge ce qui donne :

#module_menu_contenuXXXXXXXXX> div > ul > li:nth-child(1) > a > a:after {
position: absolute;
content: url('url de l'image gif');
}

D'après ce que j'ai pu constater, si tu veux mettre en avant d'autres articles par exemple le n° 4 de la liste, il te suffira de reprendre les mêmes codes en remplaçant le (1) par (4) etc...

Bon codage ! 

2014 c'est loin  

Bonsoir Ulru et Colette95

Sinon cibler le lien à mettre en exergue en utilisant uniquement le numéro final de l'url de l'article , le codage est ainsi indépendant de l'évolution de la liste :

.module_menu_type_lastarticles a[href*="num"]:after {content: url(adresse image) }

@ Uluru > pour "Hommage a nos soldats",  remplacer num par 149383576

Note: cet exemple de code ne fonctionne qu'avec le module derniers articles.-

Bonjour à vous Colette et Stormalo 

waouhhhhhhhhhhhhhh   merci pour la réponse de vous deux !   je vais essayer cela ... pas aujourd'hui car hôpital !   mais je reviens vous tenir au courant demain 

pour le moment cela me parait   ouftiiiiiiiii   un peu kafkaïen   liol 

Sormalo, je vois que vous êtes allé sur mon blog,merci à vous pour m'avoir conseillé il y a 2 ans au moins, de mettre un ascenseur pour le menu et faire des boutons sous l’entête avec des tableaux pour caler tous mes tubes et autres ! Comme nous sommes trois sur le blog et que je gère tout, cela m'a sauvé, je ne sais si je l'avais fait à l'époque, je vous ai remercié de vos conseils bien sur, mais pas pour la finalité !  et c'est génial  .... merci vraiment 

Depuis grâce à vous, j'ai un blog parfait et je fais même des design avec leurs consignes pour des amies. Et aujourd’hui avec mon cancer ou j ne bouge guère de chez moi, c'est une occupation géniale pour me vider la tête. 

http://fdreamcreations.eklablog.com/

http://lepetitmondedemai2.eklablog.com/

aider est la meilleure des choses !   merci à vous 

merci en tous les cas de tout coeur à vous deux   bonne journée  et a demain 

Maryline   

Bonjour stormalo, bonjour Uluru,

@stormalo. Intéressant cette comparaison de codes. Cependant après essai, il y a évidemment du pour et du contre dans l'utilisation de ceux-ci.

Pour ceux que tu préconises (je n'y aurais pas pensé  car je ne connais pas suffisamment le html de la plateforme) :

.module_menu_type_lastarticles a[href*="num"]:after {content: url(adresse image) }

mais si, comme l'indique Uluru :

Mais moi ce que je voudrais, c'est mette cette petit flèche par exemple dans mon menu de gauche devant certains nouveaux articles.

Il faut donc dans ce cas précis qu'elle récupère pour chacun d'eux leur n°.

Avec les miens :

#module_menu_contenuXXXXXXXXX> div > ul > li:nth-child(1) > a > a:after {
content: url('url de l'image gif');
}

Il y a juste à faire un copier/coller du code et changer le n° situé entre () correspondant à l'ordre d'apparition des articles dans le module.

Alors, c'est à voir en fonction de l'utilisation que l'on souhaite en faire et la facilité d'application qui s'ensuit. 

Note: Ce code peut s'appliquer également à d'autres modules. 

PS J'ai supprimé "position: absolute;" qui en définitive ne servait à rien. 

Voilà pour mes petites comparaisons !... 
Bien amicalement car c'est toujours un plaisir d'échanger avec toi.  

Bonsoir Colette95, 

Nos deux codes arrivent probablement au même résultat affiché ( je n'ai pas testé) et je pense que l'on peut en écrire d'autres. Bien sûr le choix sera à faire comme toujours en fonction de l'utilisation souhaitée, des habitudes de paramétrage et de maintenance etc.

La structure de nos blogs est faite de modules html quasiment tous bâtis sur le même principe, avec quelques variantes. Je pratique beaucoup le clic droit pour "Examiner l'élément" et tester directement sur la page (avec Firefox). Pour les sélecteurs je me réfère souvent à cette page de Papasti

Je n'avais pas vu que la demande était de mettre l'image 'avant' des liens, l'illustration montrant des images 'après' ces liens.

Avec le code que j'ai proposé il suffit de remplacer :after par :before, et l'image se placera comme demandée, avant les liens.

Voir cette illustration
http://ekladata.com/cQNLI1--nCPWFLX52Wc2THxByeA/Illustration-Uluru.png

obtenue avec ce css :

/* ➀ avec before */
.module_menu_type_lastarticles a[href*="149386864"]:before {content: url(http://ekladata.com/YXafo3HuFYmU-oEl_LDPVN6FMIc/0043.gif) }

/* ➁ avec after */
.module_menu_type_lastarticles a[href*="149383576"]:after {content: url(http://ekladata.com/YXafo3HuFYmU-oEl_LDPVN6FMIc/0043.gif) }

Pour appliquer ça à d'autres modules il faut remplacer .module_menu_type_lastarticles par un autre sélecteur (peut être un #module_menu_contenuXXXXXXXXX)               

----------------------------------------------

Dans l'attente souhaitons a Uluru pour parfaire son moral, de pouvoir participer à des réponses sur le forum ; ça distraira encore plus l'esprit et on découvre beaucoup en aidant.

  .

Bonjour stormalo, 

Dans ce que j'avais souligné dans la demande de Uluru :

Mais moi ce que je voudrais, c'est mette cette petit flèche par exemple dans mon menu de gauche devant certains nouveaux articles.

cela ne concernait pas le fait que l'image soit placée devant ou après l'article car j'avais compris la même chose que toi (selon sa copie d'écran jointe à sa requête) mais plutôt la pluralité.

D'où petite comparaison de nos codes pour une utilisation plus facile. 

PS Au moins maintenant Uluru a tous les éléments nécessaires et y'a plus qu'à...

Bonne journée et à bientôt pour de nouveaux échanges.  

Coucou tous les deux !   

Merci merci de tout cœur pour les renseignements !   vais essayer de comprendre ...car pour le moment  waouhhhhhhhhhhhh

. ce que je n'arrive pas à trouver c'est votre fichu numéro   lol  et même dans inspecter !  #module_menu_contenuXXXXXXXXX>   ?????   

du coup j'ai cherché dans les CSS et HTML  rien vu moi ...

si je fais clic droit effectivement je vais dans inspecter !    mais comme c'est la première fois que je fais cela, pour le moment comprends rien !!!!!! 

 <li id="module_menu151443682" class="module_menu module_menu_type_html" data-id="151443682">   ETC  

cela me sélectionne bien les modules que je veux et basta  ! 

Bon je viens de faire mes 3 piqûres et suis fatiguée tout de suite aprés!   je revois cela demain ...  

En tous les cas, je vous remercie de tout mon coeur !!!!   vraiment merci ... vous êtes des amours tous les deux !   je reviens, demain sera un autre jour  

Bonne soirée à tous les deux !!!!!   excusez moi pour aujourd'hui ... 

et je me permets de vous embrasser tous les deux pour exprimer mon bonheur face à votre aide généreuse 

Maryline  

Coucou Uluru,

Voici le n° de ton module : #module_menu_contenu152069658 

et... surtout prends tout le temps qu'il te faut pour bien comprendre ce que tu fais. En attendant repose-toi bien. 

Coucou je ne vous oublie pas ....  mais j'ai des soucis avec un blog que j'ai fait et je n'arrive pas à m'en sortir  ... 

je voulais mettre mon design hiver !  pas pu ...  

alors je reviens dés jeudi, car absente toute la journée de demain  

mercii encore de tout mon coeur 

Bonne soirée et bonne nuit à tous les deux 

Maryline