Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Ven 9 Nov 2012 - 5:48
coucou ,


Voir l'effet sur cette page:
http://testdesforums.1fr1.net/h84-trois-logos-cliquables-transitions-dimensions-au-centre

Ne vous effrayez pas sur la largeur , elle s'adaptera à la résolution de votre forum clin oeil

Si vous êtes passé par cette étape:
http://www.milouze14.com/t23111-trois-logos-cliquables-simples#495451

Modifiez simplement la feuille de style clin oeil .




Pour cette procédure il faut impérativement avoir centré son logo :
Affichage/Page d'accueil/En-tête & Navigation/En-tête des pages
Position du logo :coche "Centré"

Puis supprimer l'image dans le P.A "Gestion des images":
Passes en mode avancé en cliquant sur :
Affichage/Images et couleurs/Gestion des images/Mode avançé

Général / navigation / Logo du forum :

On va passer par le template : "overall_header"

Affichage/Templates/Général/ overall_header


Allez c'est parti les ami(e)s super :

Recherchez et supprimez ceci:
Code:

<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->

Remplacez par ceci:

Code:

<!-- BEGIN switch_logo_center -->
  <div id="M14_logo">                                               
  <a href="{U_PORTAL}"title="Voir le portail">
<img src="http://i43.servimg.com/u/f43/16/03/32/63/logo111.png" id="i_logo_gauche" border="0" alt="{U_PORTAL}" vspace="1" />
  </a>
    <a href="{U_INDEX}"title="Voir l'index">
<img src="http://i43.servimg.com/u/f43/16/03/32/63/logo210.png" id="i_logo_centre" border="0" alt="{L_INDEX}" vspace="1" />
  </a>
    <a href="{U_FAQ}"title="Voir la FAQ">
<img src="http://i43.servimg.com/u/f43/16/03/32/63/logo310.png" id="i_logo_droite" border="0" alt="{U_FAQ}" vspace="1" />
</a>
</div>            
<br />
<!-- END switch_logo_center -->


Explications détaillé du code HTML:

On attribue un identifiant pour l'ensemble des logos présents:
Code:
 <div id="M14_logo">


puis on ferme la balise:
Code:
 </div>


Le logo de gauche:
On peut déposer des liens menant sur d'autres sites ou autres lieux.
Pour le tuto , j'ai déposer la variable menant au portail clin oeil
Une bulle au survol affichera "Voir le portail", rien ne vous empêche de mettre ce que bon vous semble.
Code:

 <a href="{U_PORTAL}"title="Voir le portail">


Li'mage de votre logo a positionner entre les guillemets et son identifiant
pour le positionnement dans la feuille de style:

Code:
i_logo_gauche

Le halt correspond en cas ou l image ne serait pas affichée en temps de donner une information,
si vous modifiez le lien modifié aussi ce contenu clin oeil .
Code:

<img src="http://i43.servimg.com/u/f43/16/03/32/63/logo111.png" id="i_logo_gauche" border="0" alt="{U_PORTAL}" vspace="1" />

Pour les autres logos c'est identique les ami(e)s, pas besoin de détailler plus moqueur .

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Collez ceci:

Code:

/* LE BLOC QUI CONTIENT TOUS LES LOGOS*/
#M14_logo
{
width:100%;
background:#666666;
height:150px;
cursor:pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*LE LOGO GAUCHE*/
#i_logo_gauche
{
position:relative;
float:left;
top:0;
left:48%;
width:0;
height:0;
-moz-transition-duration: 1s,1s,2s,2s;
-moz-transition-property: width,height, left, top ;
-moz-transition-timing-function:ease-out;
-webkit-transition-property: width,height, left, top ;
-webkit-transition-duration:1s,1s,2s,2s;
-webkit-transition-timing-function: ease-out;
-o-transition-property:width,height, left, top ;
-o-transition-duration: 1s,1s,2s,2s;
-o-transition-timing-function: ease-out;
}
/*LE LOGO DU CENTRE*/
#i_logo_centre
{
position:absolute;
float:left;
left:45%;
top:40px;
}
/*LE LOGO DE DROITE*/
#i_logo_droite
{
position:relative;
float:left;
top:0;
left:45%;
width:0;
height:0;
-moz-transition-duration: 1s,1s,2s,2s;
-moz-transition-property: width,height, left, top ;
-moz-transition-timing-function:ease-out;
-webkit-transition-property: width,height, left, top ;
-webkit-transition-duration:1s,1s,2s,2s;
-webkit-transition-timing-function: ease-out;
-o-transition-property:width,height, left, top ;
-o-transition-duration: 1s,1s,2s,2s;
-o-transition-timing-function: ease-out;
}
/*ON DEMANDE QU AU SURVOL QUE LE LOGO DE GAUCHE S AFFICHE*/
#M14_logo:hover #i_logo_gauche
{
top:40px;
width:96px;
height:96px;
left:2%;

}
/*ON DEMANDE QU AU SURVOL QUE LE LOGO DE DROITE S AFFICHE*/
#M14_logo:hover #i_logo_droite
{
top:40px;
width:96px;
height:96px;
left:80%;

}


Voilà, c'est tout pour le moment clin oeil .


Si vous avez un problème!!!!
Direction l'entre-aide les ami(e)s clin oeil :
http://www.milouze14.com/f108-entre-aide






Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus