Personnaliser l'affichage de la description des forums Bouton_activePersonnaliser l'affichage de la description des forums Bouton_hoverPersonnaliser l'affichage de la description des forums Fb-hoverPersonnaliser l'affichage de la description des forums 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 description des forums EmptyLun 03 Juin 2024, 17:20 par birds

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

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

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

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

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

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

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

Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

Partagez
 

Personnaliser l'affichage de la description des forums

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Personnaliser l'affichage de la description des forums Empty

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 :
Personnaliser l'affichage de la description des forums 3desc_forums2

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'
MessageSujet: Personnaliser l'affichage de la description des forums   Personnaliser l'affichage de la description des forums EmptySam 05 Juin 2010, 12:40
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 description des forums Empty
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
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Personnaliser l'affichage de la description des forums EmptyJeu 21 Juil 2011, 21:13
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Personnaliser l'affichage de la description des forums Empty
Mise à jour du sujet le 13/08/2012 par 'Christa Lostmindy
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Personnaliser l'affichage de la description des forums EmptyLun 13 Aoû 2012, 05:37
Revenir en haut Aller en bas
http://www.edspeleersaddicts.com
Edward Speleers
Edward Speleers
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



Personnaliser l'affichage de la description des forums Empty
Très utile, merci^^
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Personnaliser l'affichage de la description des forums EmptyDim 16 Déc 2012, 11:01
Revenir en haut Aller en bas
http://locked.forumactif.com/
Reader's Tale
Reader's Tale
{ Membre }
{ Membre }

Féminin Messages : 16



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




Personnaliser l'affichage de la description des forums Empty
MessageSujet: Re: Personnaliser l'affichage de la description des forums   Personnaliser l'affichage de la description des forums Empty
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

-
» Description des sous-forums s'affichant dans le cadre de la description du forum.
» personnaliser nom des sous forums
» Personnaliser la mise en page de la liste des sous forums
» - Justifier la description des forums -
» Description des forums avec des boîtes

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