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

Nouveau messagepar Beaware » 27 Déc 2015 à 13: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 ... .
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar cabot » 27 Déc 2015 à 17: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. :)
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

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

Nouveau messagepar Beaware » 27 Déc 2015 à 17: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.
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar cabot » 27 Déc 2015 à 19: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.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

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

Nouveau messagepar Beaware » 27 Déc 2015 à 22:13

Le lien du forum : http://www.team-gtr3.fr/ . Il n'est pas encore en production, les inscriptions sont désactivées.
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar cabot » 28 Déc 2015 à 09: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 ? :)
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

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

Nouveau messagepar Beaware » 28 Déc 2015 à 18: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 ?
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée

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

Nouveau messagepar cabot » 28 Déc 2015 à 19: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;.

Hide
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 :)
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26797
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

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

Nouveau messagepar Beaware » 28 Déc 2015 à 20:42

Merci Cabot, tu es un chef :D , je recrute un designer pour la team si tu veux :lol:
Image
Avatar de l’utilisateur
Beaware
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 07 Nov 2015 à 20:43
Localisation: Vendée


Connexion  •  M’enregistrer

cron