Comment ajouter un gif animé "new" dans le menu de gauche ?

Soumis par arobaz le 21 avril, 2010 - 09:54

Bonjour,

Je suis novice je gère le site pour mon CE (http://cesird.free.fr) et je souhaiterais ajouter un petit gif animé new clignotant dans le menu de gauche mais j’ai aucune idée de la manière de faire.

Par avance merci de vos réponses.

Tweet
Vous devez vous identifier ou créer un compte pour écrire des commentaires

Tout dépend de ce que tu veux faire.

Tu peux modifier le fichier css du thème (minelli) pour ajouter une image en fond de la DIV sidebar-left.

Si tu veux plus de souplesse, tu peux aussi créer un bloc, avec l’image dans ce bloc, et l’affecter à la région «sidebar-left». Ceci permettra de l’ajouter / l’enlever assez facilement, sans passer par les feuilles de style.

Tout d’abord merci pour la réponse,

Par contre comme je le disais je suis novice, et l’idée de créer un bloc avec l’image dans ce bloc je n’arrive pas a comprendre et surtout a imaginer ce que ca va donner ?

Salut,

On pourrait mieux te répondre si tu nous disais à quoi correspond ce picto «new» : est-ce un picto statique que tu veux tout le temps afficher, tout le temps au même endroit ? Ou doit-il dynamiquement apparaître uniquement à côté des contenus qui sont effectivement nouveaux ?

Vincent

Formations Drupal pour WEBMASTERS, DESIGNERS et DÉVELOPPEURS.

Merci,

donc je souhaite ajouter un gif animé «new» a côté par de «les élus» car c’est une page que je viens de modifié et puis je souhaite pouvoir l’enlever par la suite.

Si je pouvais avoir une réponse aujourd’hui ce serait super.

Merci beaucoup.

@izus : je ne crois pas que ta solution convienne. Il demande comment ajouter une image dans un menu, pas dans un bloc dont on saisit le contenu manuellement.

@arobaz : il faut le faire en CSS, comme t’as suggéré vincent59. Il faudrait mettre ton gif en image de fond sur la balise <li>...</li> qui encadre «Les élus». Le problème, c’est que cette balise n’a pas de classe ou d’id particulier dans le HTML, tu vas donc avoir du mal à la cibler.

Si j’étais toi, j’utiliserais le module menu_attributes, qui permet de modifier certains attributs des éléments de menus, et notamment de leur donner une classe ou un ID. Ensuite, tu pourrais écrire dans ta CSS quelque chose comme :

li#les-elus {
  background: url(new.gif) top left no-repeat;
  padding-left: 15px;
}

Vincent

Formations Drupal pour WEBMASTERS, DESIGNERS et DÉVELOPPEURS.

Ok donc je viens d’avoir le message et je vais donc essayer de me lancer et d’essayer ta solution même si je ne comprend pas si il faut obligatoirement mettre le module menu_attributes.

Ben je t’ai expliqué pourquoi je crois que ce module est nécessaire.

Si tu penses que tu peux y arriver sans ce module, alors ne l’installe pas. Mais en regardant le HTML de ton site, je ne vois pas comment tu peux faire porter un style CSS sur une balise <li> qui n’a ni classe ni ID… Si tu trouves, s’il te plait, indique-nous la solution.

Vincent

Formations Drupal pour WEBMASTERS, DESIGNERS et DÉVELOPPEURS.

donc j’ai installé le module par contre peut tu me dire exactement ce qu’il faut que j’écrive et ou ce serait super sympa.

voilà l’adresse de mon GIF : http://cesird.free.fr/download/photos/articles/new.gif

Merci

PS : moi j’ai écris :
li#les-elus {background : http://cesird.free.fr/download/photos/articles/new.gif top left no-repeat;padding-left : 15px;} sous la ligne «Class attribute» mais ca ne marche pas !!!

Dans le menu (via menu_attributes), il faut ajouter pour la ligne correspondant à l’item «Les élus», un ID (par exemple : «les-elus» pour coller à l’exemple donné par Vincent).

Ensuite, dans le fichier CSS, il faut insérer le code donné.
Le mieux est de mettre le gif dans le répertoire du thème.

Aiie aiie aiie, je suis désolé mais je suis perdu.

il faut créer un fichier CSS ???

Tu peux utiliser le CSS du thème (minelli je pense) et modifier le fichier style.css.

Tu me dit si je me trompe mais il faut que je transfert le fichier style.css via filezilla sur mon pc ? c’est bien ça ?

Oui, c’est ça.
Pour l’ID du menu, au lieu de mettre «les élus», il vaut mieux éviter les accents et les espaces, et mettre qqc comme «les-elus», ce qui ferait dans le code :

<li class="leaf"><a href="http://cesird.free.fr/?q=node/14" id="les-elus" name="les élus">Les élus</a></li>

Et ensuite, rapatrier le fichier style.css sur ton pc, faire la modif et le renvoyer.

L’autre option est d’utiliser directement un style via Menu_attributes, et de mettre comme style :

background-url (http://cesird.free.fr/download/photos/articles/new.gif) top left no-repeat;padding-left: 15px;

Dans ce cas, pas besoin de récupérer le fichier css

regarde ce que cela donne !!! c’est presque ça je pense.

Oui, presque.
Sauf que je me suis trompé dans la syntaxe du background :

style="background: transparent url(http://cesird.free.fr/download/photos/articles/new.gif) top left no-repeat;padding-left: 15px;

ca ne marche pas

Il ne faut pas mettre le style=», mais commencer directement par background

Merci beaucoup beaucoup ca avance c’est presque ça !!!!

Pour le mettre plus a droite ?

Il faut augmenter la valeur du padding, qui doit être supérieur à la largeur de l’image (donc mettre plus de 32 pixels)

Merci beaucoup pour le temps que tu ma consacré c’est vraiment sympa.

si j’ai une autre question je peux ?

Le forum est là pour ça… d’autres peuvent répondre aussi !

Au niveau du compteur tu serais m’aider car il reste a 00000 ?

J’utilise User visits

Il vaudrait mieux ouvrir un nouveau sujet (et passer celui-ci en [Résolu]), ce sera plus facile d’orienter les réponses.

Dis-moi arobaz, est-ce que tu ne t’achèterais pas un bon bouquin sur CSS ?

Ne te vexe pas, mais il a fallu 24 messages pour t’expliquer un réglage CSS plutôt simple (et pas vraiment spécifique à Drupal). Si tu as beaucoup de questions comme ça, tu risques de passer beaucoup de temps sur le forum (sans toujours avoir beaucoup de réponses).

Vincent

Formations Drupal pour WEBMASTERS, DESIGNERS et DÉVELOPPEURS.

Je ne vexe pas, il y a aucun problème, seulement je débute donc il est vrai que j’ai du mal !!!

construction du site > bloc > ajouter un nouveau bloc

tu crées donc un bloc

tu met l’image gif dans ce bloc (comme tu l’a déjà fait sur tes pages …)
surtout n’oublies pas le format d’entrée Full HTML !!!

enregistres, puis vas dans construction du site > bloc et tu modifies la position du bloc en le mettant dans «right sidebar» par exemple

Twitter : @ismaeil_

Communauté Drupal France et francophonie

Comment ajouter un gif animé "new" dans le menu de gauche ?

Téléchargement

Navigation

Connexion utilisateur

Voir aussi