Personnalisation du menu Profil

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

Résolu Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 8:11

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


Dernière édition par roussinix le Sam 28 Nov 2015 - 13:53, édité 1 fois

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu profil

Message par Feuilla' le Ven 27 Nov 2015 - 13:18

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. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 13:52

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.

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu profil

Message par Feuilla' le Ven 27 Nov 2015 - 14:06

Re,
ah ! Surprised
Dans cas remplacez le code par celui-ci :
Code:
#tabs a {background-color:#codedelacouleur}
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par R-max le Ven 27 Nov 2015 - 14:50

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é !


R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 15:11

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; }

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu profil

Message par Feuilla' le Ven 27 Nov 2015 - 15:25

Re,
ce code est testé et fonctionne : Smile
Code:
#tabs a {float:center}
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par R-max le Ven 27 Nov 2015 - 15:40

la demande de depart a écrit: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



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 15:51

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. Very Happy

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

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu profil

Message par Feuilla' le Ven 27 Nov 2015 - 16:04

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;
}
Wink
@R-max a écrit:
la demande de depart a écrit: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 ( et ).
À tous les deux ils devraient faire l'affaire (je viens de les tester).
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 16:32

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*/


scratch

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 17:16

@R-max a écrit:...
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 :

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu profil

Message par Feuilla' le Ven 27 Nov 2015 - 17:35

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 !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Ven 27 Nov 2015 - 18:13

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++


Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 18:19

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 ?

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Ven 27 Nov 2015 - 18:28

Re,

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

Code:
#tabs
{
float:none !important;
}

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Ven 27 Nov 2015 - 19:39

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 Very Happy ), donc, je testerais tout ça à tête reposée demain. Wink

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Ven 27 Nov 2015 - 19:41

Re, alors :

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

Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Sam 28 Nov 2015 - 7:04

@Milouze14 a écrit:
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

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Sam 28 Nov 2015 - 7:19

Salut roussinix,

qu'entends tu par un petit bout à droite ?

Comme mentionné sur mon message :
http://forum.forumactif.com/t382507-personnalisation-du-menu-profil#3220513
Il faut peut être ajuster la valeur 25%


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Sam 28 Nov 2015 - 8:10

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. Very Happy

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Sam 28 Nov 2015 - 8:19

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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Sam 28 Nov 2015 - 10:42

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

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par Milouze14 le Sam 28 Nov 2015 - 11:53

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

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation du menu Profil

Message par roussinix le Sam 28 Nov 2015 - 13:52

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 Very Happy

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

roussinix
**

Masculin
Messages : 64
Inscrit(e) le : 21/08/2015

http://testkpark.forumactif.org/
roussinix a été remercié(e) par l'auteur de ce sujet.

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


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