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 - 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 - 13:53, édité 1 fois

roussinix
**

Masculin
Messages : 70
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 - 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'
Membre habitué(e)

Messages : 1389
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 - 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 : 70
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 - 14:06

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

Feuilla'
Membre habitué(e)

Messages : 1389
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 - 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é !

avatar

R-max
Membre habitué(e)

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

http://www.milouze14.com/
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 - 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 : 70
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 - 15:25

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

Feuilla'
Membre habitué(e)

Messages : 1389
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 - 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


avatar

R-max
Membre habitué(e)

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

http://www.milouze14.com/
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 - 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 : 70
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 - 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'
Membre habitué(e)

Messages : 1389
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 - 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 : 70
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 - 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 : 70
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 - 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'
Membre habitué(e)

Messages : 1389
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 - 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++

avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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 - 18:28

Re,

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

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

a++
avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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 - 19:41

Re, alors :

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

Wink .

a++
avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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 - 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++
avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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 - 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++
avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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 - 11:53

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

a++
avatar

Milouze14
Membre actif

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

https://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 - 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 : 70
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