Barre entête fixe

1 Barre entête fixe 14/4/2010, 19:38

PAPARAZZI™
(Membre)

Merci reçus : 1

Hello,
je viens encore vous embêter un peu.
J'aimerai une barre similaire à la votre, enfin, je ne veux pas en faire une barre de navigation mais juste avoir un cadre à personnaliser pour y mettre une déclaration qui sera permanente en fait.
Et j'aimerai pouvoir la personnaliser le plus possible ( contour arrondis, couleur de fond ect ).

Mon soucis c'est que j'ai beau taper un peu partout navigation, entête etc je ne trouve pas comment faire.
Je sais qu'il faut personnaliser le template "overall_header_new" mais, je ne sais pas ou mettre le code dans celui-ci.

Merci beaucoup aux personnes qui m'aideront.

2 Re: Barre entête fixe 14/4/2010, 19:46

Final-Blonde
Staff du forum

Merci reçus : 77

Salut !

As-tu vu ce tuto dans les astuces ?

Essaie de voir ce que tu peux en faire.
Si ça ne t'aide pas plus que ça, essaie d'être plus explicite sur ce que tu cherches à faire.

3 Re: Barre entête fixe 14/4/2010, 19:49

PAPARAZZI™
(Membre)

Merci reçus : 1

Hello,
j'aimerai simplement un cadre à personnaliser qui serait collé au haut du forum comme votre barre de navigation dans lequel je pourrai mettre des informations diverses.
Mais je ne veux pas utiliser l'outil annonce de forumactif car je ne le trouve pas très esthétique ...

Merci pour ta réponse Final'

4 Re: Barre entête fixe 14/4/2010, 20:55

Final-Blonde
Staff du forum

Merci reçus : 77

Ok, mais je ne vois pas vraiment le style...
Tu voudrais que ça ce soit un cadre ouvert en permanence ou que ça s'ouvre par un bouton ? Si oui, comment, par le clic ou le hover ?

5 Re: Barre entête fixe 14/4/2010, 21:02

PAPARAZZI™
(Membre)

Merci reçus : 1

Voici un exemple de ce que je voudrais.
Barre entête fixe Exemplerouge

J'ai fais le cadre en rouge.
Une <table> dans laquelle je pourrais écrire des choses, de préférence qui serait présente sur toutes les pages.
Je sais parfaitement comment faire ce que je veux mais, je ne connais pas l'emplacement pour qu'elle face TOUTE la largeur du forum et pas seulement l'intérieur de celui-ci.

Comme je l'ai dis plus haut, j'aimerai le même style que votre barre de navigation mais, dans laquelle je mettrais des infos simples et non les différentes rubriques "Forum, entraite etc".

EDIT ZC : Je désactive le HTML de ce message, le <table> causait souci.

6 Re: Barre entête fixe 14/4/2010, 21:39

Final-Blonde
Staff du forum

Merci reçus : 77

Ok, alors si c'est un peu comme ici, voilà un exemple que tu peux ensuite personnaliser...
Rends-toi dans le template overall_header_new et après ce code :

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

On ajoute un tableau comme par exemple :

Code:: <table class="news" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="center" valign="top"><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span></td></tr></tbody></table>

Enregistre et publie.
(Si j'en ai mis autant, c'est juste pour vérifier que ça fait bien la largeur de la page)

Dans le CSS on reprend l'identifiant de deux façons :
Une simple pour le tableau en général et c'est là que tu lui donneras ses propriétés générales comme le positionnement, les arrondis et le fond, l'espacement, etc.
L'autre est le même identifiant "news" en ajoutant le "span" on donne les propriétés à ce qui est dans les "span" :

.news {position: fixed; top: 0px;
margin-left: 10px; margin-right: 10px;
padding: ??px ??px ??px ??px;
background: #code_couleur_fond url('url_image') top left repeat-x;
border: ?px solid #code_couleur_brods;
-moz-border-radius: 0px 0px ??px ??px;
-webkit-border-radius: ??px 0px ??px 0px;
border-radius: ??px 0px ??px 0px;
}
.news span {background-color: #code_couleur_fond_bouton;
margin: 3px;
padding: 3px 7px 3px 7px;
text-align: center;
color: #code_couleur_texte; font-size: 10px;
}

Le padding ainsi syntaxé va dans le sens des aiguilles d'une montre :
top right bottom left

Pour les coins arrondis ainsi, c'est aussi dans le même sens mais en commençant par :
left top > right top > right bottom > left bottom (dans l'exemple donc, juste les coins du bas qui seraient arrondis)
Les trois lignes sont pour tous les navigateurs qui lisent les coins arrondis (à part encore IE).

Dernière édition par Final-Blond le 15/4/2010, 21:16, édité 2 fois

7 Re: Barre entête fixe 14/4/2010, 22:18

PAPARAZZI™
(Membre)

Merci reçus : 1

C'est parfait, merci beaucoup.
Est ce qu'il est possible de pouvoir le cacher ou l'ouvrir à l'aide d'un bouton car le tableau est bien plus large que je ne le pensais ... ?

8 Re: Barre entête fixe 14/4/2010, 22:21

Final-Blonde
Staff du forum

Merci reçus : 77

Oui c'est possible, mais par un clic ou un hover ?

9 Re: Barre entête fixe 14/4/2010, 22:22

PAPARAZZI™
(Membre)

Merci reçus : 1

Je pense qu'un clic serait le mieux Very Happy

10 Re: Barre entête fixe 15/4/2010, 08:02

Final-Blonde
Staff du forum

Merci reçus : 77

D'accord.

Héberge dans une page HTML ce script (sans haut et bas du forum et pas pour page d'accueil), juste comme titre :
togglevisibility :

Spoiler:

Que tu vas rappeler dans le template overall-header_new avant la fermeture de la balise /head ainsi :

Code:: <script type="text/javascript" src="url_page_html"></script>

En mettant à la place de "url_page_html" l'adresse de la page HTML du script toggleVisibility.

Plus bas, à l'endroit du code, juste avant tu vas ajouter un bloc sous forme de div ou de tableau, ou bien même juste de span pour le bouton et rappeler le script pour l'ouverture, ce qui donne en tout et sans personnalisation :

Code:: <div class="infosbouton"><a href="javascript:toggleVisibility('newsbutton')">NEWS</a></div> <div id="newsbutton" onclick="javascript:toggleVisibility('newsbutton')" style="display: none; visibility: hidden;"> <table class="news" width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td align="center" valign="top"><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span><span>blablabla</span></td></tr></tbody></table> </div>

Le script du toggleVisibility ainsi installé sur ton forum, peut et servir autant de fois que tu le souhaites,
tout en sachant qu'un même attribut "id" ne peut être présent qu'une seule fois sur la même page.

EDIT : Je me suis amusée pendant la pause à mettre du style au bouton, alors voilà ce que j'ai mis dans le CSS pour exemple :

.infosbouton {background: #b4b4b4;
position: fixed; top: 0px; left: 7px;
border: 2px solid blue;
padding: 3px 10px 3px 10px;
-moz-border-radius: 13px 0px 13px 0px;
-webkit-border-radius: 13px 0px 13px 0px;
border-radius: 13px 0px 13px 0px;
font-size: 10px; font-weight: bold;
text-align: center;
}

11 Re: Barre entête fixe 15/4/2010, 20:10

PAPARAZZI™
(Membre)

Merci reçus : 1

Merci infiniment, c'est parfait.
Vraiment MERCI !

12 Re: Barre entête fixe 15/4/2010, 20:17

Final-Blonde
Staff du forum

Merci reçus : 77

T'en prie. Very Happy

Je verrouille alors.

Contenu sponsorisé

Derniers sujets

1 Barre entête fixe 14/4/2010, 19:38

2 Re: Barre entête fixe 14/4/2010, 19:46

3 Re: Barre entête fixe 14/4/2010, 19:49

4 Re: Barre entête fixe 14/4/2010, 20:55

5 Re: Barre entête fixe 14/4/2010, 21:02

6 Re: Barre entête fixe 14/4/2010, 21:39

7 Re: Barre entête fixe 14/4/2010, 22:18

8 Re: Barre entête fixe 14/4/2010, 22:21

9 Re: Barre entête fixe 14/4/2010, 22:22

10 Re: Barre entête fixe 15/4/2010, 08:02

11 Re: Barre entête fixe 15/4/2010, 20:10

12 Re: Barre entête fixe 15/4/2010, 20:17

13 Re: Barre entête fixe