Trois logos cliquables transitions dimensions gauche et droite

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

Trois logos cliquables transitions dimensions gauche et droite
Voir l'effet sur cette page:
http://testdesforums.1fr1.net/h83-trois-logos-cliquables-transitions-dimensions

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:
https://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;

width:0;
height:0;
-moz-transition-duration: 2s,2s;
-moz-transition-property: width,height ;
-moz-transition-timing-function:ease-out;
-webkit-transition-property: width,height ;
-webkit-transition-duration: 2s, 2s;
-webkit-transition-timing-function: ease-out;
-o-transition-property:width,height ;
-o-transition-duration: 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:right;

width:0;
height:0;
-moz-transition-duration: 2s,2s;
-moz-transition-property: width,height ;
-moz-transition-timing-function:ease-out;
-webkit-transition-property: width,height ;
-webkit-transition-duration: 2s, 2s;
-webkit-transition-timing-function: ease-out;
-o-transition-property:width,height ;
-o-transition-duration: 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
{

width:96px;
height:96px;
left:15px;

}
/*ON DEMANDE QU AU SURVOL QUE LE LOGO DE DROITE S AFFICHE*/
#M14_logo:hover #i_logo_droite
{
width:96px;
height:96px;
right:15px;

}


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 :
https://www.milouze14.com/f108-entre-aide





-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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