Logo cliquable dans le bandeau ?

samedi 18 juin 2011 à 09h37
par Alain

Logo de Alain

Bonjour,

Je suis nouvel utilisateur de sarka spip3.0.5 [47125] et je souhaiterais ajouter un logo cliquable dans la partie droite du bandeau, quel que soit le thème utilisé.

Quelle procédure ou méthode dois-je suivre ?

Merci d’avance.

J’utilise spip 2.1.10 [17657]


Ce sujet est verrouillé : vous pouvez consulter son fil de discussion mais vous ne pouvez plus y répondre.

Réponses

18 juin 2011 à 23h50

Alain,
Il te faut mettre un peu les mains dans le cambouis.

Je te conseille de commencer par bien repérer les dimensions en pixel de ton image, et bien repérer où tu veux qu’elle apparaisse dans le bandeau (margin, padding)

Fichier "noisettes/bandeau/inc_bandeau_haut.html"

Tu ajoutes, entre la fermeture de la première div et "#SET{logo, #LOGO_SITE_SPIP}

la ligne de code suivante, pour l’exemple d’une image de 1008 de large et 150 de hauteur.

 <!-- Image cliquable dans le bandeau -->

		<a href="http://www.adresse url que tu veux joindre quand on clique/"><img src="IMG/nom de ton ficher image.gif/jpg" title="ce que tu veux voir apparaitre dans l'info bulle quand on passe le curseur dessus" width="1008" height="150" margin-left="0" padding-top=5" padding-bottom="0" border="0"/></a>

Dans le cas d’une image de 1008 de large et 150 de haut, mais tu mets ce que tu veux comme dimensions, en n’oubliant ni le padding, ni le margin si besoin.

Tu mets dans "IMG" ton fichier image attention, tu le mets directement dans IMG, et pas dans le sous-répertoire gif ou jpg.

Tu ranges ton fichier modifié dans squelettes/noisettes/bandeau.

Tu peux avoir à faire des ajustements pour les cotes, il te faut bien compter le nombre de pixels que tu veux cliquables, et que ça corresponde bien à ton image. Mais c’est très simple, il faut seulement être minutieux.
Tu peux même mettre plusieurs images cliquables vers des adresses URL différentes, il suffit de mettre une ligne de code par image, en prenant bien soin des différentes cotes (dimensions, margin, padding).

Bonne continuation

Pétarel

19 juin 2011 à 21h01

Bonjour Pétarel !

Merci pour vos précieux conseils. J’ai procédé comme vous me l’avez indiqué, cependant j’ai un problème au niveau du positionnement du logo dans le bandeau.

Le logo apparaît en haut à gauche du bandeau, et je n’arrive pas à l’en déplacer, même en agissant sur les arguments margin et padding.

Voici ce que j’ai écrit (j’ai remplacé juste sur le forum les balises ">" par "()" sinon le texte n’apparaît pas) :

Image cliquable dans le bandeau

( a href="http://www.monsite.fr") (img src="IMG/monimage.jpg" title="vers mon site" width="89" height="63" margin-left="822" margin-top="95" border="0" )(/a)

malgré cela pas moyen de le faire bouger d’un pixel.

Il y a sûrement quelque chose que j’oublie mais quoi ??

merci d’avance !

19 juin 2011 à 23h08

Alain,
Il faudrait que tu donnes une URL pour qu’on puisse voir un peu...

Mais je pense que c’est parce que tu n’as pas mis de "padding".
Essaye en mettant padding-left="822" et tu supprimes margin.

Pétarel

20 juin 2011 à 18h10

Bonsoir,

le problème est que mon site tourne en local sur easyphp, je ne peux donc donner d’adresse.

J’ai essayé en supprimant margin et en le remplaçant par padding-left="822", mais toujours pareil, le logo reste pour une raison inconnue en haut à gauche.

Merci pour ton aide !

20 juin 2011 à 20h10

Alain,
Mets ton animation flash dans un « div » que tu positionnera comme dans l’exemple suivant :

code de : noisettes/bandeau.html :

[(#REM) <!-- Bandeau Haut --> ]
[(#CONFIG{sarkaspip_bandeau/haut, 1}|=={1}|?{' '})
	<INCLURE{fond=noisettes/bandeau/inc_bandeau_haut}{id_rubrique}{lang}>
]

[(#REM) <!-- Bandeau bas --> ]
[(#CONFIG{sarkaspip_bandeau/bas, 0}|=={1}|?{' '})
	<INCLURE{fond=noisettes/bandeau/inc_bandeau_bas}{id_rubrique}{lang}>
]

[(#REM) <!-- Bandeau chemin --> ]
[(#CONFIG{sarkaspip_bandeau/chemin, 1}|=={1}|?{' '})
	<INCLURE{fond=noisettes/bandeau/inc_bandeau_chemin}{id_rubrique}{lang}>
]


[(#REM) <!-- Animations Flash PG --> ]
 
 <div style="position: absolute; top: 6%; left: 38%">
      <object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
        id="sponsors_bandeau"
        width="250" height="100"
      >
        <param name="movie" value="http://www.asc-annemasse.com/spip/IMG/swf/sponsors_bandeau.swf">
        <param name="bgcolor" value="#6262A4">
        <param name="quality" value="high">
        <param name="seamlesstabbing" value="false">
        <param name="allowscriptaccess" value="samedomain">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
          name="sponsors_bandeau"
          width="250" height="100"
          src="http://www.asc-annemasse.com/spip/IMG/swf/sponsors_bandeau.swf"
          bgcolor="#6262A4"
          quality="high"
          seamlesstabbing="false"
          allowscriptaccess="samedomain"
        >
          <noembed>
          </noembed>
        </embed>
      </object>
</div>

Si ça peut aider ...

Philippe

20 juin 2011 à 20h12

c’est pas beau positionnera sans le "s" !!!!!!!!!!!!!!!!!!!!!

20 juin 2011 à 21h00

Merci beaucoup Pétarel et Philippe !!!

Grâce à vos deux propositions j’ai réglé mon problème ! Il suffisait de mixer vous deux propositions et voilà c’est bon !!

Merci encore !!!

m