 Orange 
RocketMan
 Messages : 3086
 | Barre Hitskinienne Niveau: Intermédiaire | Par: Orange | Validé par: Orange | En date du: 4 Janvier 2010La barre bleutée au haut des prévisualisations de thèmes Hitskin vous donne envie ? Vous savez, celle-là : Prévisualisation d'un thème de Hitskin.com. Bon, le thème choisi n’à rien avoir, c’est seulement pour vous montrer comment la barre descendait avec le forum, essayez de déplacer le curseur de la barre de défilement vers le bas et constatez comment la barre reste fixe au sommet de la fenêtre. Pratique pour faciliter la navigation rapide sur votre forum, les visiteurs n’ont pas à remonter la page pour naviguer librement. Avant de poursuivre, je vous recommande d’appliquer les codes de mon tutoriel : Utiliser les variables Forumactif dans les templates. Ça pourrait vous être utile pour le contenu de votre barre Hitskinienne. - Mise en place du code
Et oui, on va commencer par mettre en place le code de base qu’il nous faudra personnaliser par la suite. Placer les codes au bon endroit ne suffit pas, il va falloir les comprendre (et oui, aussi bien vous y habituer).
- Code:
-
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: red; z-index:1000; width: 100%;" ><tr><td>
</td></tr></table>
Essentiellement, c’est un tableau (< table>) avec une rangée (< tr>) et une cellule (< td>)! J’espère que je ne vous apprends rien, notre tableau est un peu particulier, on lui a donné un style bien précis en ajoutant : style="[propriétés CSS] ". Parlons-en des propriétés, chacune ont un rôle bien précis, par exemple : c'est "position: fixed" qui fixe la barre en haut de la fenêtre, et z-index qui définit l'ordre d'affichage ; ici la barre sera par-dessus tous les autres scripts insérés ayant un z-index inférieur à 1000. Le reste n'est pas bien difficile à comprendre, left, right, top définissent la position de votre barre et width la longueur.
Donc, collez le code ci-dessous dans le template overall_header juste en dessous des lignes :
- Code:
-
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Publiez le template avec l'icône  dans la liste des templates généraux. En retournant sur votre forum, vous remarquez une petite barre rouge toute simple qui reste fixe en haut de la fenêtre de votre navigateur. Rien d'exceptionnel, mais cette barre pourra contenir du texte, des liens, des images et même d'autres tableaux ! Ce qui nous amène à...
- Personnalisation du code
Avouons que pour l'instant notre barre aussi rouge soit-elle ne sert pas à grand chose. Quoi ? Vous n'aimez pas le rouge ? Alors ça sera la première étape de notre personnalisation : modifier le fond. Reprenons notre code de base :
- Code:
-
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: red; z-index:1000; width: 100%;" ><tr><td>
</td></tr></table>
Ce qui nous intéresse ici c'est background-color nous remplacerons le "red" qui le suit par une couleur de votre choix, pour ce faire je vous recommande le Sélecteur de couleurs. Il est également possible de remplacer le background-color par background-image : url('LIEN_DE_VOTRE_IMAGE');.
Ensuite il nous faudra personnaliser son contenu, vous pouvez ajouter celui de votre choix entre < td> et < /td>. Vous pouvez y ajouter uniquement du code HTML, le BBcode n'est pas pris en charge. Des codes pour le contenu de votre barre ont été ajoutés dans la section appropriée, n'hésitez pas à les consulter :
- Barre Hitskinienne avec Logo
C'est terminé, votre barre Hitskinienne est prête à l'emploi  . |
Dernière édition par Orange le Lun 04 Jan 2010, 15:44, édité 1 fois | |
|
Kaiji 
Blanche-Neige
 Messages : 5578
| FAQ Comment peut-on modifier la hauteur de la barre ? La hauteur change automatiquement quand on met quelque chose dedans. Elle augmente aussi en mettant la balise <*br /> (Il faut enlever l'étoile * ) aux endroits voulus, cette balise permet de faire un retour à la ligne. Il y a encore un autre moyen, c'est de rajouter height: XXpx; dans le code, par exemple à côté de width: 100%; . Bien sûr, il faut remplacer les XX par les valeurs voulues. Comment placer la Barre Hitskinienne en dessous de la page ? Pour la mettre en dessous de la page, il suffit de remplacer le mot "top" (qui signifie "haut") dans le code, par le mot "bottom" (qui signifie "bas") Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml | | |
|
Lun 03 Juin 2024, 17:20 par 
