Toolbar - Choisir sa largeur

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Toolbar - Choisir sa largeur

Message par Ejayremy Lun 14 Juil 2014 - 12:24

Bonjour,

J'ai une question à propos de la Toolbar.
Est-il possible de choisir sa largeur afin que les logo par exemple ne soit pas collé sur la droite ? Par exemple choisir la même largeur que son forum ?

La barre ferait bien entendu la totalité de la largeur de la page mais les textes et logo de notre toolbar serait en adéquation avec la largeur que nous avons choisis pour notre forum.

J'espère avoir été clair, ce n'est pas facile a expliquer.
Merci de votre aide.


Dernière édition par Ejayremy le Sam 2 Aoû 2014 - 7:45, édité 1 fois
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Lun 14 Juil 2014 - 20:53

Tentez avec ce css

Code:
#fa_toolbar {
width: XXpx;
margin-left: auto;
margin-right: auto;
}
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par *Henry* Lun 14 Juil 2014 - 21:48

Bonsoir ...
comme vous avez déjà personnalise votre Toolbar, il y des changements multiples à effectuer dans votre CSS :
Code:
.fa_toolbar_XL_Sized {
  margin-left: auto;   /* nouvelle */
  margin-right: auto;   /* nouvelle */
  min-width: 970px;    /* ancien valeur 980px */
  width: 970px;         /* ancien valeur 100% */
}
#fa_toolbar {
  background-color: #353535;
  color: #ffffff;
  font-family: Helvetica,Verdana,Arial;
  font-size: 10px;   /* ancien valeur 16px */
  height: 30px;
  left: 0;
  z-index: 20002;
}
#fa_search #fa_textarea {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-bottom-color: -moz-use-text-color;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-style: none;
  border-bottom-width: 0;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  border-image-slice: 100% 100% 100% 100%;
  border-image-source: none;
  border-image-width: 1 1 1 1;
  border-left-color-ltr-source: physical;
  border-left-color-rtl-source: physical;
  border-left-color-value: -moz-use-text-color;
  border-left-style-ltr-source: physical;
  border-left-style-rtl-source: physical;
  border-left-style-value: none;
  border-left-width-ltr-source: physical;
  border-left-width-rtl-source: physical;
  border-left-width-value: 0;
  border-right-color-ltr-source: physical;
  border-right-color-rtl-source: physical;
  border-right-color-value: -moz-use-text-color;
  border-right-style-ltr-source: physical;
  border-right-style-rtl-source: physical;
  border-right-style-value: none;
  border-right-width-ltr-source: physical;
  border-right-width-rtl-source: physical;
  border-right-width-value: 0;
  border-top-color: -moz-use-text-color;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-style: none;
  border-top-width: 0;
  height: 24px;
  line-height: 24px;
  margin-top: 3px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  text-indent: 30px !important;
  width: 120px;      /* ancien valeur 200px */
}
Résultat calcule :
Toolbar - Choisir sa largeur Toolbar-adapt

Cordialement
Henry
*Henry*

*Henry*
Membre actif

Masculin
Messages : 2419
Inscrit(e) le : 11/04/2008

http://plauderkanal.forumieren.com
*Henry* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Lun 14 Juil 2014 - 23:14

Merci de votre aide mais ça ne fait rien. Neutral 
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Lun 14 Juil 2014 - 23:19

Un "ça ne fait rien" ne fera pas avancer la problématique.
Quel css avez vous essayé??
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Lun 14 Juil 2014 - 23:22

demeter1 a écrit:Un "ça ne fait rien" ne fera pas avancer la problématique.
Quel css avez vous essayé??
En premier lieu j'ai essayé le second CSS donné puis en actualisant en F5 et ne voyant pas de modification j'ai testé le premier mais pareil.

EDIT : Le premier code est sympa mais la barre ne va pas de part en part de la page. Elle ne s'arrête qu'à 960px que je lui ai indiqué.
Ya t'il un moyen de la faire continuer mais que je texte commence bien comme il faut a 960px ?  Smile 

Merci à vous.
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par *Henry* Lun 14 Juil 2014 - 23:46

Ré Bonsoir ...
Veuillez bien poster votre CSS personnalise pour une vérification s'il vous plaît.

Cordialement
Henry
*Henry*

*Henry*
Membre actif

Masculin
Messages : 2419
Inscrit(e) le : 11/04/2008

http://plauderkanal.forumieren.com
*Henry* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Lun 14 Juil 2014 - 23:49

*Henry* a écrit:Ré Bonsoir ...
Veuillez bien poster votre CSS personnalise pour une vérification s'il vous plaît.

Cordialement
Henry
Ajout de votre code CSS en place.
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Lun 14 Juil 2014 - 23:51

Je viens de faire un essai avec le code que je vous ai foruni et il fonctionne sur ce forum :
http://crevettes-passion.forumgratuit.org/

1/ avez vous mis une valeur à la place de XX dans cette partie ??
Code:
width: XXpx;

2/ tentez acvec celui-ci
Code:
#fa_toolbar {
width: 500px !important;
margin-left: auto!important;
margin-right: auto!important;
}

faites varier le 500px à la valeur que vous souhaitez
Ps : comme vous l'a signalé Henrie, il faudra modifier la taille des écritures dans votre css initial pour éviter un retour à laligne automatique des infos.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Lun 14 Juil 2014 - 23:53

demeter1 a écrit:Je viens de faire un essai avec le code que je vous ai foruni et il fonctionne sur ce forum :
http://crevettes-passion.forumgratuit.org/

1/ avez vous mis une valeur à la place de XX dans cette partie ??
Code:
width: XXpx;

2/ tentez acvec celui-ci
Code:
#fa_toolbar {
width: 500px !important;
margin-left: auto!important;
margin-right: auto!important;
}

faites varier le 500px à la valeur que vous souhaitez
Ps : comme vous l'a signalé Henrie, il faudra modifier la taille des écritures dans votre css initial pour éviter un retour à laligne automatique des infos.
Merci, votre est bon mais la barre est "courte", elle ne fait pas la largeur de la page. En fait le texte de votre code commence comme il faut (pour ma part j'ai mis 960px, largeur de mon cadre forum), j'aurais aimés en plus garder la barre à droite et à gauche (de part en part de la page).

merci Wink
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Lun 14 Juil 2014 - 23:58

Vous modifiez tout simplement le
Code:
width: 500px !important;
par
Code:
width: 100% !important;

Ps : faites varier le 100% si vous souhaitez avoir un écart à gauche et à droite .
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Mar 15 Juil 2014 - 0:08

Je comprends mais ce qui je souhaite c'est avoir également les barres de chaque cotés que je n'ai plus du coup :

Toolbar - Choisir sa largeur Captur13

Le rendu devrait être comme ça :

Toolbar - Choisir sa largeur Captur14
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Mar 15 Juil 2014 - 0:13

Votre image ne s'affiche pas.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Mar 15 Juil 2014 - 0:15

demeter1 a écrit:Votre image ne s'affiche pas.
Bizarre, elles sont bien uploadé sur le serveur :

https://i.servimg.com/u/f39/09/01/05/17/captur13.jpg

https://i.servimg.com/u/f39/09/01/05/17/captur14.jpg
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par demeter1 Mar 15 Juil 2014 - 0:35

Essayez avec
Code:
#fa_toolbar.content{
width: XX !important;
margin-left: auto!important;
margin-right: auto!important;
}

xx valeur en px ou en %
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Mar 15 Juil 2014 - 7:40

Je ne vois pas de changement même en 960px.
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Ven 18 Juil 2014 - 7:51

UP.
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Mar 22 Juil 2014 - 7:12

up
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA Mar 22 Juil 2014 - 7:37

Bonjour,
Rentrer la totalité en 960px hum !

#fa_toolbar {
background-color: #5c5c5c;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 13px !important;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 999;
}
#fa_right {
float: none !important;
font-size: 13px !important;
}
#fa_share {
font-size: 13px !important;
line-height: 30px !important;
margin-left: 20px;
}

Le code d'Henry est plus correct, moi c'est du bidouillage


Dernière édition par AenigmA le Mar 22 Juil 2014 - 18:52, édité 2 fois (Raison : Il manquait les !important)
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Sam 26 Juil 2014 - 7:33

AenigmA a écrit:Bonjour,
Rentrer la totalité en 960px hum !

#fa_toolbar {
background-color: #5c5c5c;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 13px !important;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 999;
}
#fa_right {
float: none !important;
font-size: 13px !important;
}
#fa_share {
font-size: 13px !important;
line-height: 30px !important;
margin-left: 20px;
}

Le code d'Henry est plus correct, moi c'est du bidouillage
Merci pour ton code, ça fonctionne très bien comme il faut. Cependant, le logo de la toolbar se situe après les infos membres.
Ya t'il moyen de laisser l'ordre de la toolbar par défaut ?

Merci encore Wink
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA Sam 26 Juil 2014 - 8:13

Bonjour,
Comme je te dis c'est du bidouillage, mais j'ai une idée bien plus simple.
Je repasse dans un moment
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Sam 26 Juil 2014 - 8:18

AenigmA a écrit:Bonjour,
Comme je te dis c'est du bidouillage, mais j'ai une idée bien plus simple.
Je repasse dans un moment
OK merci, je verrais ton message ce soir en rentrant du travail.
Merci Wink
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA Sam 26 Juil 2014 - 8:40

J'ai refait ton image du haut du body
Maintenant il suffit de remplacer

body {
background-color: #bbb;
background-image: url("https://i.servimg.com/u/f39/09/00/15/94/bg08h110.jpg");
background-position: center top;
background-repeat: repeat-x;
margin-top: 32px !important;
}
#fa_toolbar {
background-color: transparent !important;
color: #ffffff;
font-family: Helvetica,Verdana,Arial;
font-size: 16px;
height: 30px;
left: 0;
margin-left: auto;
margin-right: auto;
z-index: 20002;
width: 970px !important;
box-shadow: none;
}
.fa_toolbar_XL_Sized {
min-width: 970px !important;
width: 100%;
}

Ca doit être proche de ce que tu veux
Nul besoin de ce que j'ai mis précédemment
Laurent
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Dim 27 Juil 2014 - 0:57

Une idée intéressante mais qui ne "fonctionne" pas vraiment. en effet, mon BG est en scrolling et, quand on descend la page, le fond monte mais la toolbar en 960px reste ... du coup les côtés de celle-ci redeviennent "coupé"  Crying or Very sad 
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA Dim 27 Juil 2014 - 5:44

Bonjour,
En rajoutant cette ligne à la partie body peut être

background-attachment: fixed;

Sinon je ne pense pas que cela soit possible en l'état vu que c'est géré par un javascript. Seul un vrai codeur peut ... peut être.

Bon dimanche
Laurent
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Dim 27 Juil 2014 - 12:20

OK Laurent, merci pour toutes vos astuces et aides, c'est super sympa.  Wink 
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par AenigmA Dim 27 Juil 2014 - 13:16

As tu essayé ?
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar - Choisir sa largeur

Message par Ejayremy Dim 27 Juil 2014 - 13:19

AenigmA a écrit:As tu essayé ?
Je ne souhaite pas fixer mon BG. De plus en essayant, l'ombre de ma toolbar qui est du coup rétrécie se voit sur les cotés et donc, le fond coïncide bien mais on vois la délimitation droite/gauche a cause de cette ombre
Ejayremy

Ejayremy
Membre habitué

Masculin
Messages : 1038
Inscrit(e) le : 03/02/2006

https://ejayremy.1fr1.net/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum