Membres connectés récemment
[PhpBB2] Modifier la toolbar
2 participants
Page 1 sur 1 • Partagez
- Version du forum :PhpBB2
- Templates modifiés :oui
- Navigateur :Chrome
Bonsoir,
Je viens faire appel à vous pour une aide concernant la toolbar au niveau des messages/notifications. Le cadre qui contient le "vous avez reçu un message...." est large alors que j'aimerai qu'il soit plus petit, et la croix de suppression qu'elle soit à côté et non en dessous.
Ce que j'ai sur mon forum : https://www.zupimages.net/up/19/46/3vju.bmp
Ce que je veux avoir : https://www.zupimages.net/up/19/46/bjlr.bmp
Je vous passe la partie que j'ai codé pour la toolbar :
Et j'en profite pour une autre question, je n'arrive pas à modifier la couleur des liens bleus dans la toolbar, au niveau bienvenue.
exemple : https://www.zupimages.net/up/19/46/348h.bmp
Merci de votre attention :)
Je viens faire appel à vous pour une aide concernant la toolbar au niveau des messages/notifications. Le cadre qui contient le "vous avez reçu un message...." est large alors que j'aimerai qu'il soit plus petit, et la croix de suppression qu'elle soit à côté et non en dessous.
Ce que j'ai sur mon forum : https://www.zupimages.net/up/19/46/3vju.bmp
Ce que je veux avoir : https://www.zupimages.net/up/19/46/bjlr.bmp
Je vous passe la partie que j'ai codé pour la toolbar :
- Code:
#fa_toolbar #fa_right #notif_list li.see_all {background-color: #06070A!important;}
#fa_toolbar #fa_right #notif_list li.see_all a {color:#1A2A16!important; font:bold!important;}
#fa_toolbar #fa_right #notif_list li.unread {background:#14211D!important;}
#fa_toolbar #fa_right #notif_list {background:#14211D!important;}
#fa_toolbar #fa_right #notif_list li .contentText a {color:#650A1C!important;font:bold!important;font-size: 10px!important;}
#fa_toolbar #fa_right #notif_list li .content {color:#06070A!important;font:bold!important;font-size: 10px!important;}
ul#notif_list { }
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications { background-color: #06070A!important;}
#fa_right.welcome #fa_menu #fa_welcome {background-color: #06070A!important;}
#fa_menulist a {color:#1A2A16!important;}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:hover {
text-decoration: none ; color: #9B5D6F;
}
#fa_usermenu {
font-family: Tahoma;
font-size: 11px!important;
color:#1A2A16;
}
ul#fa_menulist {
background-color: #06070A; /* Couleur de fond */
border-width:2px;
border-style:solid;
border-color:#06070A;
height: 300px;
}
div#fa_toolbar {
background-color: #06070A; /* Couleur de fond */
border-radius: 0 0 10px 10px; /* Arrondis les bords de la toolbar */
box-shadow: 0 0 5px #000000; /* Affiche une ombre */
margin: auto; /* Centre la toolbar */
width: 98%; /* Modifie la longueur de la toolbar */
opacity: .8;
text-shadow: 0px 0px 1px #000000;
font-family: Tahoma;
font-size: 11px!important;
border-width:2px;
border-style:solid;
border-color:#06070A;
}
div#fa_toolbar div, div#fa_toolbar span {
margin: 0 15px; /* Repositionne correctement le contenu de la toolbar */
}
div#fa_right {
font-size: 11px!important;
}
span#fa_share {display:none!important;}
div#fa_search {display:none!important;}
Et j'en profite pour une autre question, je n'arrive pas à modifier la couleur des liens bleus dans la toolbar, au niveau bienvenue.
exemple : https://www.zupimages.net/up/19/46/348h.bmp
Merci de votre attention :)
Coucou Alex,
alors pour remédier au placement de la petite croix, on va procéder ainsi:
La c.s.s de Forumactif donne un float right , donc en gros dans l'inconnu.
On va garder la largeur de cette dernière, c'est à dire:
Le style:
Pour la couleur des liens côté "Bienvenue", ceci devrait fonctionner:
Je vois que tu cumules pas mal de style comme ceci:
Pourquoi, ne pas compresser tout cela ?
Autre exemple:
Une fois compressé:
alors pour remédier au placement de la petite croix, on va procéder ainsi:
La c.s.s de Forumactif donne un float right , donc en gros dans l'inconnu.
On va garder la largeur de cette dernière, c'est à dire:
- Code:
2.4em
Le style:
- Code:
#fa_toolbar #fa_right #notif_list li a.delete{float:none!important;position:absolute!important;margin-left: -2.4em!important;}
Pour la couleur des liens côté "Bienvenue", ceci devrait fonctionner:
- Code:
#fa_menulist li a:first-child {color:#1A2A16!important;}
Je vois que tu cumules pas mal de style comme ceci:
- Code:
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications { background-color: #06070A!important;}
#fa_right.welcome #fa_menu #fa_welcome {background-color: #06070A!important;}
Pourquoi, ne pas compresser tout cela ?
- Code:
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications,#fa_right.welcome #fa_menu #fa_welcome { background-color: #06070A!important;}
Autre exemple:
- Code:
span#fa_share {display:none!important;}
div#fa_search {display:none!important;}
Une fois compressé:
- Code:
span#fa_share,div#fa_search {display:none!important;}
Bonjour Phil
Merci pour ton aide, j'ai testé et pour la couleur des liens c'est nickel, et pour l'autre soucis, ce n'est pas encore ça. La croix est un peu collé sur le pseudo. Et j'ai testé en mettant un pseudo plus long, et il ne s'affiche pas. il disparaît alors qu'il faudrait qu'il se mette en dessous. Voir exemple ci-dessus :
https://www.zupimages.net/up/19/46/hf13.bmp
C'est des petits détails mais ils sont pénibles.
merci pour les codes compressés !
bon dimanche.
Merci pour ton aide, j'ai testé et pour la couleur des liens c'est nickel, et pour l'autre soucis, ce n'est pas encore ça. La croix est un peu collé sur le pseudo. Et j'ai testé en mettant un pseudo plus long, et il ne s'affiche pas. il disparaît alors qu'il faudrait qu'il se mette en dessous. Voir exemple ci-dessus :
https://www.zupimages.net/up/19/46/hf13.bmp
C'est des petits détails mais ils sont pénibles.
merci pour les codes compressés !
bon dimanche.
Re Phil,
J'ai finalement réussi à régler le soucis en cherchant dans le css et ça concernait cette partie :
J'ai modifié la taille et ça rend ce que je souhaite. Du coup, le problème est réglé et je te remercie de ton aide
J'ai supprimé le mp du coup
Bonne soirée et bon début de semaine
J'ai finalement réussi à régler le soucis en cherchant dans le css et ça concernait cette partie :
- Code:
#fa_toolbar #fa_right #notif_list li .contentText a {color:#650A1C!important;font:bold!important;font-size: 11px!important;}
#fa_toolbar #fa_right #notif_list li .content {color:#06070A!important;font:bold!important;font-size: 11px!important;}
J'ai modifié la taille et ça rend ce que je souhaite. Du coup, le problème est réglé et je te remercie de ton aide
J'ai supprimé le mp du coup
Bonne soirée et bon début de semaine
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum