Personnalisation du menu Profil

[roussinix]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Création du orum
Lien du forum : http://testkpark.forumactif.org/

Description du problème

Bonjour,

Comme l'indique le titre, je voudrais personnaliser le menu des profils (Position du menu, couleur du fond, du texte etc...). Hors, dans le template "profile_add_body", je ne trouve que :

Code:

<!-- BEGIN switch_display_menu -->
{UCP_TABS}
<!-- END switch_display_menu -->


Rien d'autre qui corresponde à ce que je recherche. J'ai vu des exemples en phpBB2, mais rien en phpBB3.

Merci d'avance

[Feuilla']

Bonjour,
de quelle partie parlez-vous ? Si c'est le cadre lorsque l'on clique sur "Bienvenue ...", alors il est changeable par la Feuille de style CSS :

Code:

#fa_right.welcome #fa_menu ul {background-color:#000099}

Le "000099" est modifiable par un autre code couleur bien sûr.
Bonne journée !

[roussinix]

Je parle de ça :

Il faudrait que "Informations - Préférences - Signature ..." ai le même look (ou presque) que "Portail - Forum - FAQ ..." au dessus et "Enregistrer - réinitialiser" au dessous. Et si en plus, "Informations - Préférences - Signature ..." pouvait être centré comme la barre de navigation, ça serait encore mieux.

[Feuilla']

Re,
ah !
Dans cas remplacez le code par celui-ci :

Code:

#tabs a {background-color:#codedelacouleur}

Bonne journée !

[Invité]

bonjour ^^ >> hum plutôt comme ceci

Code:


#tabs a span{
background-color: #b57b00;
    color: #000!important;
    font-weight: 400;}


pour le centrage cela va être compliqué !

[roussinix]

C'est un bon début (pour le bouton actif ... il suffit de le basculer en vert)n, mais dans l'ensemble, c'est pas tout à fait ça :


Barre de menu pas centrée, boutons non sélectionnés noirs etc...

Pour info, le code des boutons du bas :

Code:

a.button1, input.button1 { color: #000000 !important; border: 1px solid #b57b00; padding: 2px 5px; background-color: #b57b00; font-weight: bold; }
a.button2, input.button2, button.button2 { color: #000000 !important; border: 1px solid #b57b00; padding: 2px 5px; background-color: #b57b00; }
a.button1, input.button1, a.button2, input.button2, button.button2 { background-image: url('http://www.roussiniere.net/SauvegardeForums/TestKparK/Fond_Btn_1.png'); }
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover { border: 1px solid #f5b204; }
a.button1:link, a.button1:visited, a.button1:active, a.button2:link, a.button2:visited, a.button2:active { padding: 2px 5px; }
a.button1:active, input.button1:active, a.button2:active, input.button2:active { background-image: url('http://www.roussiniere.net/SauvegardeForums/TestKparK/Fond_Btn_2.png');
  border: 1px solid #94ee87; }


[Feuilla']

Re,
ce code est testé et fonctionne :

Code:

#tabs a {float:center}

Bonne journée !

[Invité]

Il faudrait que "Informations - Préférences - Signature ..." ai le même look (ou presque) que "Portail - Forum - FAQ ..." au dessus et "Enregistrer - réinitialiser" au dessous. Et si en plus, "Informations - Préférences - Signature ..." pouvait être centré comme la barre de navigation, ça serait encore mieux.

il n'est nullement inscrit que les boutons doivent passé au vert , nous ne sommes pas devin.
votre demande au départ n'est pas clair (détailler).

je laisse feuilla continué son aide .1 seul intervenant est suffisant
a bientôt

[roussinix]

Merci quand même pour ton intervention, pour la couleur des boutons, ce sont des "background-image", donc selon l'utilisation/état du bouton, il y a la couleur qui change. Donc "#tabs a" répond à une situation, mais pas à toutes, c'est pourquoi j'ai précisé ma réponse dans mon intervention précédente.

PS. j'avais pas pensé à "float"

[Feuilla']

Re,
ce que je vois, c'est aussi les bords arrondis de la barre de navigation :

Code:

#tabs a {
          -moz-border-radius: 16px;
          -webkit-border-radius: 16px;
          border-radius: 16px;
}

Il faudrait que "Informations - Préférences - Signature ..." ai le même look (ou presque) que "Portail - Forum - FAQ ..." au dessus et "Enregistrer - réinitialiser" au dessous. Et si en plus, "Informations - Préférences - Signature ..." pouvait être centré comme la barre de navigation, ça serait encore mieux.

il n'est nullement inscrit que les boutons doivent passé au vert , nous ne sommes pas devin.
votre demande au départ n'est pas clair (détailler).

je laisse feuilla continué son aide .1 seul intervenant est suffisant
a bientôt

Avoir plusieurs intervenants ne me semble pas mauvais, vous auriez pu continuer à nous faire avancer. ^^
Sinon pour le bouton actuellement sélectionné, les deux codes (là et là).
À tous les deux ils devraient faire l'affaire (je viens de les tester).
Bonne journée !

[roussinix]

Alors :

Code:

#tabs a {float:center;}
/*ne donne rien*/
...
#tabs a {float:right;}
/*ne donne rien*/
...
#tabs a {float:none;}
/*ne donne rien*/
...
#tabs {float:center;}
/*ne donne rien*/
...
#tabs {float:right;}
/*Est OK (alignement à droite)*/
...
#tabs a {float:none;}
:*Donne*/


[roussinix]

...

Code:


#tabs a span{
background-color: #b57b00;
    color: #000!important;
    font-weight: 400;}


...

Ça ne donne pas le résultat escompté et merci pour les boutons arrondis, qui en plus permettent de mieux voir le défaut :

[Feuilla']

Re,
j'ai trouvé ceci qui ne laisse pas de petits bords autour :

Code:

#tabs a {background: #b57b00}
#tabs .activetab a {background-color:#b57b00}
#tabs a:hover {background-color: #b57b00}

Bonne soirée !

[Invité]

Salut roussinix et Feuilla',

il faut supprimer le float:left il te créer des cases vides sur ta droite:

Ceci devrait fonctionner:

Code:


#tabs
{
margin-top: -25px;
position: absolute;
left: 25%;
}


Il faut peut être ajuster la valeur 25%



En mettant des bordures arrondies juste sur le haut ,
je trouve cela plus désign que sur la totalité

Code:


/*Tous les onglets arrondis sur la hauteur*/
#tabs  a
{
-webkit-border-top-left-radius: 16px;
-webkit-border-top-right-radius: 16px;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}


a++

[roussinix]

Merci beaucoup, disons que c'est OK car avec des couleurs unies, ça correspond à ce que je recherche. Quand je met des textures à la place, j'ai un petit problème du fait que la texture est coupée en bas (probablement des images.png pas assez haute pour la taille de ces boutons).

Comme globalement c'est bon, je vais sans doute passer à résolu après avoir testé les propositions de "Milouze14". Juste une question : "float: none" aurait dû annuler "float: left" vu qu'il vient après le CSS de base ... non ?

[Invité]

Re,

si on reprend la css de base, il me semble qu'il faut ajouter !important

Code:

#tabs
{
float:none !important;
}

a++

[roussinix]

Ca ne change rien, le seul truc qui marche, c'est :

Code:

#tabs
{
  float:right !important;
}

avec !important ou pas, ça passe à droite, mais c'est pas ce que je veux.

Bon, là, je commence à fatiguer (je suis du matin ), donc, je testerais tout ça à tête reposée demain.

[Invité]

Re, alors :

Code:

       
        #tabs
        {
        margin-top: -25px;
        position: absolute;
        left: 25%;
        }


.

a++

[roussinix]

Code:

       
        #tabs
        {
        margin-top: -25px;
        position: absolute;
        left: 25%;
        }


Oui, ça marche sur mon écran 24" et en plein écran, mais sur un écran plus petit ... il en manque un bout à droite

[Invité]

Salut roussinix,

qu'entends tu par un petit bout à droite ?

Comme mentionné sur mon message :
https://forum.forumactif.com/t382507-personnalisation-du-menu-profil#3220513

Il faut peut être ajuster la valeur 25%

a++

[roussinix]

Déjà, avec 25%, je ne suis pas au centre pour mon écran. Pour centrer, il faut 32%, mais sur un petit écran, il manque carrément le bouton de droite.

Bon, au pire, c'est pas si grave, le plus important, c'était l'aspect des boutons et là, j'y suis arrivé. Voila le code complet :

Code:

#tabs { background-color: #595959; width:750px; } 
#tabs a span { background-color: transparent; color: #292929!important; font-weight: normal; }
#tabs a {background: #b57b00; background-image: url('http://www.roussiniere.net/SauvegardeForums/TestKparK/Fond_Btn_1.png') !important; background-repeat: repeat-x;
  -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; color: #000!important; border: 1px solid #b57b00; max-height: 20px !important; }
#tabs .activetab a {background-color: #94ee87; background-image: url('http://www.roussiniere.net/SauvegardeForums/TestKparK/Fond_Btn_2.png') !important; background-repeat: repeat-x;
  border: 1px solid #94ee87; color: #000!important; }
#tabs a:hover {background-color: #b57b00; color: #000!important; border: 1px solid #ffffc8; }


Et le résultat :


A part le texte des boutons qui est mal centré, c'est plutôt pas mal.

[Invité]

Re,
je ne vois pas la position absolute dans ta css, on ne peut pas jouer dans ce cas avec les 25%.

Remplaces:

Code:

#tabs { background-color: #595959; width:750px; } 

Par sans donner de largeur ( surtout en px ):

Code:



#tabs
{

margin-top: -25px;
position: absolute;
left: 25%;
background-color: #595959;
}




a++

[roussinix]

Oh ça ne change quasiment rien, au lieu de voir le bouton de droite disparaitre, il passe à la ligne, et l'alignement au centre n'est correct que pour des écrans ayant la même définition que le mien. Pour des écrans plus grands c'est décalé à gauche et pour des plus petits, c'est décalé à droite.

Avec

Code:

#tabs { background-color: #595959; /*width:750px;*/ margin: -25px 0 0 7px; position: absolute; left: 30%; } 


On a en plein écran :

Et avec une largeur équivalente à 800x600 :


En fait, il manque une instruction en CSS du genre "align: center;" (autre que text-align qui ne marche pas ici).

[Invité]

Re,
tu as une structure personnalisée car sur un fofo traditionnel ,
mon style fonctionne.

a++

[roussinix]

De toutes façons, avec ton excellente suggestion :

Code:

/*Tous les onglets arrondis sur la hauteur*/
#tabs  a
{
-webkit-border-top-left-radius: 16px;
-webkit-border-top-right-radius: 16px;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

C'est plus joli en alignant à gauche

Bon, merci à tous les participants et je passe en résolu.