Forum de support officiel
http://support.forumprod.com?sid=4d9a8d23966a7f50e3dd40a5ef533e09

[subSilver2]Mettre sa barre de navigation en haut
http://support.forumprod.com/viewtopic.php?f=26&t=1415
Page 1 sur 1

Auteur:  Vincent [ 23 Mar 2012, 07:50 ]
Sujet du message:  [subSilver2]Mettre sa barre de navigation en haut

Appliquer sa barre de navigation en haut du forum

La première partie du tutoriel vous explique comment appliquer votre barre de navigation en haut du forum avec un effet fixe si vous le voulez sur tout les thêmes dans la base de style SUBSILVER2 sauf un celui du forum de support(Avalon Blue) car dans ce thème il existe déjà une ligne de code qui génère une image de fond pour la barre de navigation.
L'autre partie consacrée au thême du forum de support,donc Avalon Blue.

Si vous avez le moindre doute,si vous pensez rater quelque chose pas de panique,utilisez votre block-note pour enregistrer votre feuille de style CSS complète avant toute modification.

Première partie:

Pour commencer il faut aller dans votre feuille de style CSS,pour ce faire:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style CSS
Puis cherchez cette ligne vers le début:
Code:
#menubar {
    margin: 0 25px; 

Il faut y ajouter ce code à la suite bien aligné:
Code:
position: absolute;
top: 0px;
width: 100%; 

Puis validez.
Pour l'effet fixe c'est à dire qu'elle reste collée à votre page web,modifiez le absolute par fixed
Vous pouvez aussi si vous le voulez ajouter une image en arrière-plan de la barre de navigation,pour ce faire ajouter à la suite de width: 100%; ce code ci-dessous:
Code:
background-image:url(adresse); 

Il faut remplacer le mot adresse par l'adrèsse de l'image.

Il va y avoir sans doute un problème,votre barre de navigation est sur la bordure de votre forum,Pas de soucis pour monter votre barre de navigation avec vos lien plus vers le haut il faut retourner sur la Feuille de style CSS puis il faut ajouter au code ci-dessus cette propriété :
margin-top: 0px; => 0 à modifier par le nombre voulu , ce code determine la marge du haut.

ImageTutoriel & modifications basées sur tous les thèmes de ForumProd.

Deuxième partie:
Réservée donc pour le thême Avalon Blue
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style CSS
Il faut chercher cette lignée:
Code:
#menubar {
    padding: 4px;
    background-image: url('http://demo.phpbb3styles.net/styles/avalonblue/theme/images/buttons.gif');
    background-repeat: repeat-x; 

Et y ajouter ceci:
Code:
position: absolute;
top: 0px;
width: 100%; 

Etant donner qu'il y a une image de background cela dépasse de la largeur de votre forum,il faut donc soit:
:arrow: Supprimer l'image en supprimant cette ligne: background-image: url('http://demo.phpbb3styles.net/styles/avalonblue/theme/images/buttons.gif');
:arrow: La modifiée en supprimant le 'http://demo.phpbb3styles.net/styles/avalonblue/theme/images/buttons.gif' par l'url de votre image.
:arrow: Laisser l'image de background mais il faudra faire jouer avec ces deux lignes:
width: 100%; il faut modifier le 100 par 95
padding:4px; il faut modifier le 4 par 3px

Dernier point l'effet fixe qui peut s'appliquer à votre barre,pour ce faire modifiez cette ligne:
position: absolute; il faut modifier le absolute par fixed

ImageTutoriel & modifications basées sur le thème du forum de support ForumProd.

J'éspère que ce petit tuto vous aidera pour votre forum.

Auteur:  skiptonick [ 23 Mar 2012, 15:20 ]
Sujet du message:  Re: [Tuto]Mettre sa barre de navigation en haut

Bonjour bon tuto, n'oubliez pas d'enregistrer votre feuille de style css en cas de mauvaise manip, c'est important^^

Auteur:  Vincent [ 23 Mar 2012, 15:25 ]
Sujet du message:  Re: [Tuto]Mettre sa barre de navigation en haut

Bonjour Merci Skip,

En effet merci de cette précision ,si vous avez le moindre doute utilisez le block note à l'avance pour l'enregistrement(je rajoute cela au tutoriel merci Skiptonick)

Auteur:  N3w2012 [ 23 Déc 2015, 01:41 ]
Sujet du message:  Re: [subSilver2]Mettre sa barre de navigation en haut

Bonsoir,

Tout d'abord, je vous remercie d'avoir partagé avec la communauté ce joli tutoriel.

J'ai exécuté votre manipulation pour avoir la barre de navigation en haut et y ajouter une image en arrière plan, et le résultat est mitigé ... surtout que finalement, ce qui m'intéresse le plus ne fonctionne pas :(

Il y a surement un moyen pour que cela fonctionne mais mes connaissances dans le domaine sont très limitées, pour pas dire inexistantes ...

Donc, pour commencer, mon forum est ici.

Et le code que j'ai placé dans le style est :


#menubar {
margin: 0 25px;  
       position: absolute;
            top: 10px;
          width: 100%;
       background-image:url(http://img15.hostingpics.net/pics/13794491140.jpg);        
}      
 

Donc, j'obtiens bien la barre de navigation en haut, c'est sympa mais l'image en arrière plan me plait beaucoup plus ... et c'est là que le problème réside !

Image

Le résultat n'est pas formidable, car l'image ne s'affiche que sur la hauteur de la barre de navigation et sur toute la largeur du forum. :sick:

Mon souhait :

Il y aurait il un moyen pour faire en sorte que l'image s'affiche à sa taille réelle ? complète quoi en fait ... ( j'espère que je me m'exprime bien, dsl. )

Merci d'avance pour votre solution.
Cordialement.

EDIT : Si il faut que j'ouvre un nouveau sujet pour que ma question soit traitée, merci de me l'indiquer et je le ferai avec grand plaisir. ( Vu que cette question concerne pleinement ce tuto, c'est pour cela que je l'ai posté à la suite de celui ci. )

Page 1 sur 1 Heures au format UTC + 1 heure [ Heure d’été ]
© phpBB Group