Forum de support officiel

Forum d'entraide et support officiel des forums Forumprod.com


Heures au format UTC + 1 heure [ Heure d’été ]



Poster un nouveau sujet Répondre au sujet  [ 4 messages ] 
Auteur Message
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 23 Mar 2012, 07:50 

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.


Haut
  Profil 
 
Membre super
Membre super

Inscription: Déc 2010
Messages: 1779
Points: 295
Localisation: Larochelle/Lagord
Sexe: Masculin
Age: 52
Forum: http://pub-forum.forumprod.com
Posté: 23 Mar 2012, 15:20 

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


Haut
  Profil Site Internet 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 23 Mar 2012, 15:25 

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)


Haut
  Profil 
 
Membre habitué
Membre habitué

Inscription: Nov 2015
Messages: 15
Points: 66
Sexe: Masculin
Forum: http://1-aus.forumprod.com/forum.php
Posté: 23 Déc 2015, 01:41 

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. )


Haut
  Profil 
 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Modérateur:

Aideurs

Permissions de ce forum:

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers
Poster un nouveau sujet Répondre au sujet  [ 4 messages ] 


Créer un forum | © phpBB | Entraide & support | Forum gratuit