Pro-Sub-Blue

[Pro-Sub-Blue] Ajouter un icone lien dans menu link - Pro-Sub-Blue

[Pro-Sub-Blue] Ajouter un icone lien dans menu link

par Beaware » 27 déc. 2015 à 12:19

Bonjour à tous et joyeux Noel :D

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 ... .
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par cabot » 27 déc. 2015 à 16:13

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. :)
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27150
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par Beaware » 27 déc. 2015 à 16:32

:D 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.
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par cabot » 27 déc. 2015 à 18:48

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.
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27150
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par Beaware » 27 déc. 2015 à 21:13

Le lien du forum : http://www.team-gtr3.fr/ . Il n'est pas encore en production, les inscriptions sont désactivées.
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par cabot » 28 déc. 2015 à 08:24

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 ? :)
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27150
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par Beaware » 28 déc. 2015 à 17:24

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 ?
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par cabot » 28 déc. 2015 à 18:57

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

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 :)
Avatar du membre
cabot
Equipe site
Equipe site
Messages : 27150
Enregistré le : 13 févr. 2011 à 19:42
Localisation : Rarement sur la plaque
Contact :

Re: [Pro-Sub-Blue] Ajouter un icone lien dans menu link

par Beaware » 28 déc. 2015 à 19:42

Merci Cabot, tu es un chef :D , je recrute un designer pour la team si tu veux :lol:
Avatar du membre
Beaware
Posteur habitué
Posteur habitué
Messages : 220
Enregistré le : 07 nov. 2015 à 19:43
Localisation : Vendée
Contact :