Personnaliser l'affichage de la liste des groupes Bouton_activePersonnaliser l'affichage de la liste des groupes Bouton_hoverPersonnaliser l'affichage de la liste des groupes Fb-hoverPersonnaliser l'affichage de la liste des groupes Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Personnaliser l'affichage de la liste des groupes EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Personnaliser l'affichage de la liste des groupes EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Personnaliser l'affichage de la liste des groupes EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Personnaliser l'affichage de la liste des groupes EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Personnaliser l'affichage de la liste des groupes EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Personnaliser l'affichage de la liste des groupes EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Personnaliser l'affichage de la liste des groupes EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Personnaliser l'affichage de la liste des groupes EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
SSD interne Crucial SSD P3 1To NVME à 49,99€
49.99 € 59.99 €
Voir le deal

Partagez
 

Personnaliser l'affichage de la liste des groupes

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://forum.forumactif.com
Tech
Tech
{ Membre actif }
{ Membre actif }

Masculin Messages : 1378



Personnaliser l'affichage de la liste des groupes Empty

Personnaliser l'affichage de la liste des groupes


Informations générales

Description :
Vous en avez marre des [] entre les noms de groupes ? Vous souhaitez présenter la liste des groupes de votre forum de façon plus originale ? Qu'à cela ne tienne, on vous explique tout dans ce tutoriel !

Si vous appliquez ce tutoriel, les changements de couleur et ajouts de groupes par le panneau d'administration ne se répercuteront plus sur votre qui est en ligne : vous devrez faire la mise à jour à la main dans vos templates.

Démo :
Regardez le QEEL de CSSActif par exemple

Version FA:
PhpBB2

Crédits :
Proposé par Tech le 29/11/2009 | validé par Tech

Mise(s) à jour :
Mise à jour le 01/07/2012 par 'Christa Lostmindy

Le tutoriel


Première étape, accédez à votre panneau d'administration et cliquez sur l'onglet Affichage puis dans le menu Templates » Général. Dans la liste, sélectionnez le template index_body

Cherchez cette partie du template :
Code:
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
C'est elle qui affiche la liste de vos groupes.

Vous notez la présence de deux variables de template (le texte en majuscules entre crochets) :
{LEGEND}, qui affiche Légende, tout simplement
{GROUP_LEGEND} qui affiche la liste de vos groupes

Pour pouvoir retirer les crochets ou personnaliser l'affichage des groupes plus en détail, vous allez devoir tout coder vous même, supprimez donc la variable {GROUP_LEGEND}.

Ce qui vous donne donc :
Code:
<tr>
      <td class="row1"><span class="gensmall">{LEGEND} : </span></td>
</tr>

Maintenant à la place de ce que vous avez supprimé, il faut ajouter ceci :
Code:
<a href="LIEN du GROUPE"><span style="color: #COULEUR;">NOM du GROUPE</span></a>
Répétez cette ligne autant de fois que vous avez de groupes sur votre forum.

» Pour trouver le lien du groupe, vous cliquez sur le groupe qui se trouve dans la légende d'origine et vous copiez l'adresse.
Cela peut donner ceci : http://www.css-actif.com/g1-administrateurs
Vous pouvez aussi simplifier le code en n'utilisant que cette partie : /g1- (en changeant le chiffre avec le bon identifiant du groupe bien sûr), ça marche aussi bien.

» A la place de #COULEUR, mettez la couleur de votre groupe. Pour la trouvez, rendez vous dans votre panneau d'administration, onglet Utilisateurs et groupes, puis dans Administration des groupes. Pour chaque groupe, cliquez sur le petit rouage jaune à côté et copiez la valeur dans le champ Couleur des membres du groupe

Quand vous avez tout rempli, les couleurs, les noms et les liens, vous aurez quelque chose comme ceci :
Code:
<tr>
   <td class="row1"><span class="gensmall">{LEGEND} : ~
      <a href="/g5-"><span style="color: #FF5900;">Fondateur</span>
      ~
      <a href="/g2-"><span style="color: #26A0BF;">Administrateurs</span></a>
      ~
      <a href="/g4-"><span style="color: #701649;">Codeurs</span></a>
      ~
      <a href="/g2-"><span style="color: #7FB015;">Modérateurs</span></a>
      ~
      <a href="/g3-"><span style="color: #000000;">Membres</span></a>
   </span></td>
</tr>
» Dans cet exemple, vous voyez un petit symbole ~ entre chaque ligne, qui permet de séparer chaque groupe, mais vous pouvez aussi utiliser un saut de ligne (balise < br / >) ou d'autres symboles.

» Si vous voulez retirer le nom Légende aussi, enlevez simplement cette partie :
Code:
{LEGEND} : 

Et je rappelle :
Si vous appliquez ce tutoriel, les changements de couleur et ajouts de groupes par le panneau d'administration ne se répercuteront plus sur votre qui est en ligne : vous devrez faire la mise à jour à la main dans vos templates.


Bonne chance !
MessageSujet: Personnaliser l'affichage de la liste des groupes   Personnaliser l'affichage de la liste des groupes EmptyDim 29 Nov 2009, 09:38
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Personnaliser l'affichage de la liste des groupes Empty
FAQ


Q
Et si à la place du nom du groupe, je veux appliquer une image, comment je fais ?

R
C’est simple, il suffit de remplacer cette partie :
Code:
<span style="color: #COULEUR;">NOM DU GROUPE</span>
Par ceci
Code:
  <img src="URL_IMG" alt="" />


Q
Et si je veux séparer les groupes par une image, comment je fais ?

R
Entre chaque groupe, rajoutez simplement votre image :
Code:
  <img src="URL_IMG" alt="" />
(Cela revient à remplacer les symboles ~ de l'exemple par votre image)


Q
Et si je veux ajouter un a :hover à mon image, c’est possible ?

R
Oui, il suffit d’ajouter cette propriété dans le code CSS, après avoir appliqué une classe à votre image par exemple.


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Personnaliser l'affichage de la liste des groupes   Personnaliser l'affichage de la liste des groupes EmptyVen 22 Juil 2011, 08:07
Revenir en haut Aller en bas
 

Personnaliser l'affichage de la liste des groupes

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Personnaliser la mise en page de la liste des sous forums
» Comment déplacer les groupes du QEEL (et les groupes seulement)? [Résolu]
» Ou le personnaliser ?
» Message personnaliser ? x_X'
» Personnaliser infobulle

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Footer-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit