Bonjour à tous et joyeux Noel

J'aimerai rajouter plusieurs icônes dans le menu link en haut du forum pour les liens suivant :

- FaceBook
- Youtube
- Steam

J'ai trouvé une piste dans le fichier : overall_header.html

Code: Tout sélectionner

<div id="wrap"> <a id="top" class="anchor" accesskey="t"></a> <div id="page-header"> <!-- Menu top --> <div class="menu-link"> <ul> <li><a href="http://forums.phpbb-fr.com/">Demo</a></li> <li><a href="#">Your link</a></li> <li><a href="#">Your link</a></li> <li><a href="#">Lien</a></li> <li></li> <li><a href="#">Your link</a></li> </ul> </div>

Je mettrai sur mon forum les icônes à la bonne dimension, mais comment les insérer en haut en tant qu'image ? Ou si c'est plus simple dans le bandeau ou il y a PCA PCM etc ... .

Hello,

Place tes images dans le répertoire theme/images/ du style.

A l'endroit où tu veux afficher ces images/liens, ajoute ça dans le fichier :

Code: Tout sélectionner

<a href="url-de-ta-page-facebook"><img src="{T_THEME_PATH}/images/nom-de-ton-image.facebook.truc" alt="Facebook"></a> <a href="url-de-ta-page-youtube"><img src="{T_THEME_PATH}/images/nom-de-ton-image.youtube.truc" alt="Youtube"></a> <a href="url-de-ta-page-steam"><img src="{T_THEME_PATH}/images/nom-de-ton-image.steam.truc" alt="Steam"></a>

Si tu as besoin de plus de précisions sur le fichier à modifier et l'endroit ou placer la portion de code, il faudrait que tu précises où tu voudrais afficher tout ça.

Merci cabot, j'ai placé ça dans mon overall_header.html à la suite des autres liens.

J'ai rajouté des <li></li> pour décaler tout ça vers la droite de la barre des liens tout en haut :

Code: Tout sélectionner

<li><a href="http://forums.phpbb-fr.com/">Demo</a></li> <li><a href="#">Your link</a></li> <li><a href="#">Your link</a></li> <li><a href="#">Lien</a></li> <li></li> <li><a href="#">Your link</a></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li><a href="https://www.facebook.com/groups/698683070278400/" target="_blank"><img src="/images/facebook.png" title="La Team GTR3 sur Facebook" alt=""></a></li> </ul> </div>

Par contre il ne faut pas que la taille de l'image soit trop grosse : 30x30 , sinon ça augmente la taille de la barre de lien. Je ne sais pas si c'est la meilleur méthode, mais ça marche. Merci àtoi.

Hmmm... nan, c'est pas la bonne méthode. ^^

Donne le lien vers ton forum, stp, histoire de voir comment ça se présente afin de t'orienter vers quelque chose de plus propre.

Le lien du forum : http://www.team-gtr3.fr/ . Il n'est pas encore en production, les inscriptions sont désactivées.

Supprime tous les li vides.
Ajoute la classe rightside aux éléments de lien qui contiennent les images (<li class="rightside">).
Ajoute ces déclarations dans le CSS :

Code: Tout sélectionner

.menu-link ul:after { clear: both; content: ""; display: block; } .menu-link .rightside { float: right; } .menu-link .rightside img { vertical-align: middle; }

C'est good ?

Merci Cabot, ça à l'air de fonctionner, mais quand je redimensionne les images, la barre augmente aussi. Est ce possible de passer outre et de les mettre un peu plus grosse ces icones, genre 30 px ou 35 px ?

J'ai copier le code et mis en bas du fichier : pro-sub-blue.css . C'est bien là qu'il fallait le mettre ?

On peut diminuer le padding sur la div qui contient la liste, ça devrait le faire.

Dans pro-sub-blue.css, trouve :

Code: Tout sélectionner

.menu-link { border-bottom: 4px solid rgba(234, 8, 8, 0.72); border-radius: 7px 7px 7px 7px; margin: 0; padding: 10px; background-color: rgba(11, 20, 234, 0.75); }

Remplace padding: 10px; par padding: 5px 10px;.

HideShow

Beaware a écrit:J'ai copier le code et mis en bas du fichier : pro-sub-blue.css . C'est bien là qu'il fallait le mettre ?

Ouep

Merci Cabot, tu es un chef , je recrute un designer pour la team si tu veux