Rappel du premier message :
Navigation rapide
code HTML et CSS
Le code HTML est à mettre dans les annonces.
PA=>général=>messages et emails =>annonces
Pour les paramètres de l'annonce, vous choisissez :
> Activer les annonces : Oui
> Affichage des annonces : Toutes les pages
> Défilement : Désactiver
Puis vous mettez créez une annonce et y mettez ce code :
Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
Personnalisation
Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.
© Never-Utopia
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
Navigation rapide
| Difficulté | Facile,il ne reste qu'à personnaliser |
| Outils | Aucun |
| Résultat | Avoir une navigation rapide pratique et discrète |
| correction du CSS | Sparrow-style |
| Crédit | © Never-Utopia |
code HTML et CSS
Le code HTML est à mettre dans les annonces.
PA=>général=>messages et emails =>annonces
Pour les paramètres de l'annonce, vous choisissez :
> Activer les annonces : Oui
> Affichage des annonces : Toutes les pages
> Défilement : Désactiver
Puis vous mettez créez une annonce et y mettez ce code :
- Code:
<div class="widget_flottant">
<span class="widget_flottant3">
<a href="http://l-anneau-des-dragons.1fr1.net/" class="postlink"><span style="font-size: 18px; line-height: normal; text-decoration: underline; font-weight: bold;">Index</span></a></br></br>
<u>Info</u></br>
<a href="lien" class="postlink"><strong>Règlement</strong></a></br>
<a href="lien" class="postlink"><strong>Backgroud</strong></a></br>
<a href="lien" class="postlink"><strong>Races jouables</strong></a></br>
<a href="lien" class="postlink"><strong>Compétences</strong></a></br>
<a href="lien" class="postlink"><strong>Modèle de fiche</strong></a></br>
<a href="lien" class="postlink"><strong>Cadre de topic</strong></a></br></br>
<u>HRP</u></br>
<a href="lien" class="postlink"><strong>Administration</strong></a></br>
<a href="lien" class="postlink"><strong>Taverne</strong></a></br>
<a href="lien" class="postlink"><strong>Archive</strong></a></br></br>
<u>RP</u></br>
<a href="lien" class="postlink"><strong>RP-1</strong></a></br>
<a href="lien" class="postlink"><strong>RP-2</strong></a></br>
<a href="lien" class="postlink"><strong>RP-3</strong></a></br>
<a href="lien" class="postlink"><strong>RP-5</strong></a></br>
<a href="lien" class="postlink"><strong>RP-6</strong></a></span>
<span class="widget_flottant2"><img src="http://i44.servimg.com/u/f44/15/54/03/92/anneau10.gif" border="0" alt="" />
</span>
</div>
Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
- Code:
.widget_flottant
{
z-index: 999;
position:fixed;
top: 50px;
right: 0px;
width: 0px;
height: 100px;
transition: 1s;
-webkit-transition: 1s;
color: #dfdfdf;
font-size: 12px;
font-family: 'verdana';
}
.widget_flottant:hover
{
width: 150px;
height: 361px;
transition: 1s;
-webkit-transition: 1s;
}
.widget_flottant3
{
display:block;
text-align: center;
margin: 0px;
height: 361px;
overflow: hidden;
background: #7F7F7F;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 2px #000000 solid;
}
.widget_flottant2
{
position: relative;
float:left;
display:block;
margin: 0px;
overflow: hidden;
width: 33px;
height: 175px;
left: -33px;
top: -320px;
background-image: url(http://img15.hostingpics.net/pics/621948navrap.png);
background-repeat: no-repeat;
}
.widget_flottant a {
color: #c4c4c4!important;
}
.widget_flottant a:hover {
color: #ffffff!important;
}
Personnalisation
Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.
| Nom du sujet | .code { CSS: ???; } |
| Lien | https://www.never-utopia.com/t41098-code-css |
| Réaliser par | Shinomix |
© Never-Utopia
