C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Personnaliser l'affichage de la description des forums

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com/
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Personnaliser la description des forums


Informations générales

Description :
Voici un tutoriel qui vous permettra de personnaliser l'affichage de la description de vos forums. Deux méthodes possibles : via les templates, ou via la création/modification d'un forum dans le panneau d'administration.

Démo :
Cliquez pour un aperçu

Testé sur :
Non renseigné

Crédits :
Proposé par Furase le 5/06/10 | Validé par Hαrιcoow

Mise(s) à jour :
Mise à jour le 13/08/2012 par 'Christa

Le tutoriel


Bonjour à tous !

Dans ce tutoriel, je vais vous expliquer comment agrémenter la description de vos forums.
Deux méthodes sont possibles, mais je vais surtout détailler celle qui consiste à modifier les templates, car pour la seconde avec les bases en CSS et HTML vous devriez être capable d'y arriver sans moi.

Vous trouverez à la fin de ce tutoriel un rappel de quelques balises CSS qui pourront vous être utiles, ainsi que quelques conseils qui pourront peut-être vous aider.

Avant de commencer, vous devez savoir qu'en utilisant la méthode qui consiste à modifier le template TOUTES vos descriptions de forums seront modifiées de la même façon. La seconde méthode vous permettra de modifier chaque description individuellement, mais elle est plus longue à mettre en place. Vous pouvez naturellement combiner les deux. Tout dépend de ce que vous voulez faire. Réfléchissez-y avant de commencer à coder pour vous simplifier la tâche.

1ère Méthode : en modifiant le template


Vous devez être fondateur pour pouvoir éditer les templates

Il faut tout d'abord aller chercher dans le template la fonction qui gère l'affichage de la description des forums. Pas de panique, en suivant mes instructions vous y arriverez en moins de deux minutes sans avoir besoin de vous arracher les cheveux.

Pour accéder à vos templates, rendez vous sur votre Panneau d'administration, onglet Affichage puis dans le menu Templates » Général, et ouvrez le template index_box. Cherchez cette ligne :
Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
Pensez à utiliser la fonction de recherche (raccourci clavier : ctrl+f) pour aller plus vite.

Pour modifier toutes nos descriptions de catégories en un tournemain via le CSS, il faut appliquer une nouvelle classe CSS à notre description. Tant qu'à faire, on va carrément transformer le <span> en <div> pour éviter de trop compliquer le code. Remplacez la ligne ci-dessus par celle-ci :
Code:
<div class="genmed DescForum">{catrow.forumrow.FORUM_DESC}</div>
J'ai utilisé le nom DescForum mais vous pouvez évidemment en mettre un autre. Le tout est de s'en souvenir.


Cela fait, enregistrez puis publiez votre template.

Il ne vous reste plus qu'à vous amuser avec le CSS pour agrémenter vos descriptions comme il vous plaira. Pour cela, rendez vous toujours dans votre panneau d'administration, onglet Affichage puis dans le menu Images et Couleurs » Couleurs et accédez à l'onglet Feuille de style CSS. Vous devez définir la classe que vous avez appliquée à vos descriptions, comme ceci :
Code:
.DescForum {
    /* votre CSS ici */
}

2ème Méthode : en modifiant directement la catégorie


Pour cette méthode... rien d'exceptionnel. Dans votre panneau d'administration, onglet Général puis dans le menu Forum » Catégories et forums, allez sur votre catégorie, et entourez la description d'une balise div à laquelle vous aurez appliqué une classe.
Code:
<div class="DescForum2"> votre description </div>
Il ne vous reste plus qu'à créer votre style dans le CSS, enregistrer, et vous verrez apparaître votre mise en forme.

Cette méthode vous permet de mettre un style différent pour chaque forum, mais elle est assez longue à mettre en place. Je vous recommande de ne l'utiliser que si vous en avez vraiment besoin, sinon préférez la première méthode.

Conseils


Comme je l'ai dit précédemment, rien ne vous empêche d'utiliser les deux méthodes en même temps. C'est très intéressant si vous décidez que toutes vos descriptions doivent avoir des points communs dans leur présentation.

Par exemple, si vous voulez que toutes vos descriptions aient la même largeur et les mêmes marges sans avoir à les répéter, vous le précisez dans ce qui correspond sur mon tutoriel à .DescForum. Et dans .DescForum2 et suivantes vous précisez ce qui sera propre à chaque forum, ou groupe de forums selon ce que vous voulez faire.

Une autre note, qui va dans le même sens que le point précédent : pensez à rassembler le plus de valeurs communes possible plutôt que de les réécrire plusieurs fois.
Rappel : vous pouvez regrouper des styles dans le css en les séparant par une virgule. Tout ce qui sera contenu dans les accolades sera commun à tous les styles énoncés.

Par exemple :
Code:
/* propriétés communes aux trois classes MaClasse1, MaClasse2 et MaClasse3 */
.MaClasse1, .MaClasse2, .MaClasse3 {
    margin:5px;
    padding:5px;
    height:100px;
}


Je vous mets un exemple :


Pour cet exemple, j'ai défini dans mon .DescForum la largeur de ma description et les marges extérieures (pour qu'elle ne colle pas au titre - même si sur mon exemple ça ne se voit pas puisque mes titres sont courts - et qu'elle soit centrée dans ma case). Dans .DescForum2 et .DescForum3 (les deux ensemble) j'ai défini l'arrondi de mes bordures et la hauteur. Et dans chacune des .DescForumX (X=2 et X=3) j'ai précisé le style de ma bordure (la couleur), et l'arrière plan.

A vous à présent de faire vos combinaisons. Et le meilleur conseil que je puisse encore vous donner c'est : faites des tests !
Et ayez une idée du résultat que vous voulez obtenir avant de commencer, quitte à devoir faire un dessin. Si vous ne savez pas ce que vous voulez atteindre... vous risquez de chercher longtemps !

Quelques propriétés CSS utiles


Pour les bordures :
border : bordure. Ajoutez son style, sa largeur et sa couleur à la suite (border est la méga-propriété)
    solid : ligne continue simple
    double : ligne continue double (n'apparaît que pour une largeur >= 3px)
    dotted : pointillés
    dashed : tirets
    ... et d'autres
Exemple : border : 1px dashed #990000 ;

Pour arrondir les angles : Ajoutez ces trois propriétés, en leur donnant une valeur en pixels (elles font chacune effet sur certains navigateurs et pas sur d'autres, d'où la nécessité de les mettre toutes les trois)
    -moz-border-radius : XXpx
    -webkit-border-radius : XXpx
    border-radius : XXpx

Rappel: vous pouvez choisir à quel coin doit s'appliquer la propriété en utilisant une écriture de ce genre :
border-radius : XXpx XXpx XXpx XXpx
Les quatre valeurs correspondent, dans l'ordre, au rayons du coin supérieur gauche, coin supérieur droit, coin inférieur droit et coin inférieur gauche (dans le sens des aiguilles d'une montre en partant du coin supérieur gauche).


Gérer le fond en CSS :
background : (méga-propriété) image, position et répétition de l'image en question, couleur, par exemple :
background: #COULEURFOND url('image-fond') top center no-repeat;

Je pense avoir dit l'essentiel. J'espère que j'ai réussi à être claire et que ce tutoriel vous sera utile.
Fu'


Furase -
MessageSujet: Personnaliser l'affichage de la description des forums   Sam 05 Juin 2010, 12:40
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
avatar
Blanche-Neige
Blanche-Neige

Féminin Messages : 5576



FAQ


Q
J'ai bien modifié les templates comme indiqué, mais il ne se passe rien !

R
Est-ce que tu as bien pensé à publier ton template ? Sinon, n'oublies pas qu'il faut que tu déclares la propriété CSS dans ta feuille de style, comme ceci par exemple :
Code:
.descriptions-categories {
   bacgkround: #COULEURFOND url('IMAGE-FOND') top center no-repeat;
   border : 2px solid #COULEURBORDURE;
   -moz-border-radius : XXpx;
   -webkit-border-radius : XXpx;
   border-radius : XXpx;
}


Q
Bonjour, je voudrais que l'encadré prenne aussi l'icône de catégorie | le dernier message posté | les statistiques de messages, comment faire ?

R
Ce n'est pas le sujet de ce tutoriel, celui ci consiste simplement à améliorer l'apparence du texte de description des forums, il te faudra faire une demande d'aide pour obtenir cet effet, s'il n'est pas abordé dans un tutoriel adéquat Wink


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Jeu 21 Juil 2011, 21:13
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Mise à jour du sujet le 13/08/2012 par 'Christa Lostmindy



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Lun 13 Aoû 2012, 05:37
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.edspeleersaddicts.com
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



Très utile, merci^^


Edward : "You are the person I dremt to have as a fan!"
Me : "And you are the person I dremt to have as a friend!"
Edward : "God bless you!"
Me : "And you, because you are the most beautiful heart I never met!"
Edward : "And I return words to you because you are the same as I am, right?"
Me : "I think so... We were naturally made to meet though!"
Edward : "Destiny..."
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Dim 16 Déc 2012, 11:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://locked.forumactif.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 16



Merci ♥
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Mer 30 Jan 2013, 09:47
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Personnaliser l'affichage de la description des forums   
Revenir en haut Aller en bas
 

Personnaliser l'affichage de la description des forums

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

 Sujets similaires

-
» Personnaliser l'affichage de la description des forums
» Personnaliser l'affichage des sous-forums
» Personnaliser l'affichage des sujets
» Besoin d'aide pour placer la variable "Modérateur d'un forum" dans une description de forums.
» Texte en dessous de l'image dans la description des forums

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Les Forums et Catégories-

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 | Contact | Signaler un abus | Forum gratuit