-
Résolu Mettre une flèche New ponctuellement
Mercredi 14 Novembre 2018 à 16:50 Uluru
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
Mercredi 14 Novembre 2018 à 19:22 Colette95
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 !
Mercredi 14 Novembre 2018 à 22:14 stormalo
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 149383576Note: cet exemple de code ne fonctionne qu'avec le module derniers articles.-
Jeudi 15 Novembre 2018 à 07:53 Uluru
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
Jeudi 15 Novembre 2018 à 15:13 Colette95
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.Jeudi 15 Novembre 2018 à 21:58 stormalo
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.pngobtenue 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.
.
Vendredi 16 Novembre 2018 à 07:14 Colette95
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.
Vendredi 16 Novembre 2018 à 15:18 Uluru
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
Vendredi 16 Novembre 2018 à 15:52 Colette95
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.
Mardi 20 Novembre 2018 à 17:22 Uluru
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
Ce sujet est verrouillé. Vous ne pouvez donc pas poster de nouvelles réponses.