Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Effets Divers
Ceci est un code crée suite à la Demande de Clarisse, ici.
Les effets
La boîte "glisse" pour s'ouvrir.
Les contenus internes ne sont pas fournis!
Vous pouvez changer l'image de la crois ou alors simplement mettre un texte!
Le code
Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> overall_header :
Juste après ça:
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
- Code:
<div id="target_po">
<div id="bouton_po">
<a href="#target_po">Aide</a>
</div>
<div id="tableau_po"><div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
<div id="tableau_po_interne">
<h1 class="titre_po">
Titre Contenu
</h1>
Contenu
</div>
</div>
</div>
Le CSS:
- Code:
/********** DÉBUT BOUTON **********/
/* Mise en forme du bouton */
#bouton_po {
/* Position */
position: fixed;
bottom: 0px;
right: 20px;
z-index: 900;
/* Taille */
width: 65px;
height: 25px;
padding: 5px;
/* Couleur de fond puis de texte */
background-color: #B7B7B7;
color: black;
text-align: center;
/* Bordure */
border: 2px solid black;
border-bottom: 0px solid;
transition: all ease 0.5s;
}
/* Mise en forme du bouton au passage de la souris */
#bouton_po:hover {
background-color: #D8D6D6;
transition: all ease 0.5s;
}
/* Mise en forme du lien dans le bouton */
#bouton_po a, #bouton_po a:hover {
color: black;
letter-spacing: 0px;
text-decoration: none !important;
transition: all ease 0.5s;
}
/* Effet sur le lien au passage de la souris */
#bouton_po:hover a, #bouton_po:hover a:hover {
color: black;
letter-spacing: 3px;
text-decoration: none !important;
transition: all ease 0.5s;
}
/* Mise en forme du contenu */
#tableau_po {
visibility: hidden;
/* Position du contenu */
position: fixed;
bottom: 0px;
right: 20px;
z-index: 999;
/* Hauteur de base pour l'effet. */
width: 0px;
height: 0px;
/* Couleur de fond puis de texte */
background-color: #B7B7B7;
color: black;
/* Bordure */
border: 2px solid black;
transition: all ease 0.5s;
}
/* Apparition du contenu au click sur le bouton */
#target_po:target #tableau_po {
visibility: visible;
/* Taille du contenu */
width: 401px;
height: 556px;
transition: all ease 0.5s;
}
/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
margin: 3px;
}
/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
text-decoration: none !important;
}
#tableau_po .fermer a {
color: black;
transition: all ease 0.5s;
}
#tableau_po .fermer a:hover {
color: white;
transition: all ease 0.5s;
}
/* Pour un overflow: auto */
#tableau_po_interne {
/*taille*/
height: 535px;
width: 390px;
margin: auto;
overflow: auto;
}
/* Mise en forme des titres dans le contenu */
h1.titre_po {
width: 100%;
border: 0px solid;
margin: 0px;
margin-bottom: 10px;
background: none;
font-weight: normal;
text-align: center;
border-bottom: 1px solid black;
font-size: 15pt;
}
/********** FIN BOUTON **********/
Changer la croix / ce qui permet de fermer l'aide
Le code correspondant est celui-ci:
- Code:
<div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
Le code CSS correspondant est celui-ci:
- Code:
/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
margin: 3px;
}
/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
text-decoration: none !important;
}
#tableau_po .fermer a {
color: black;
transition: all ease 0.5s;
}
#tableau_po .fermer a:hover {
color: white;
transition: all ease 0.5s;
}
