"Messages & sujets" indiqués au-dessus du "dernier message posté" Bouton_active"Messages & sujets" indiqués au-dessus du "dernier message posté" Bouton_hover"Messages & sujets" indiqués au-dessus du "dernier message posté" Fb-hover"Messages & sujets" indiqués au-dessus du "dernier message posté" 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
» Structure de Qui Est En Ligne (1)
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
"Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

Partagez
 

"Messages & sujets" indiqués au-dessus du "dernier message posté"

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://kobehs.chocoforum.net
Liliana
Liliana
{ Membre actif }
{ Membre actif }

Féminin Messages : 997



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty

"Messages & sujets" indiqués au dessus du "dernier message posté"


Informations générales

Description :
Comment placer les statistiques du nombre de sujets et de messages dans la même case que l'info sur le "dernier message posté" ? C'est ce que vous allez apprendre à faire dans ce tutoriel.

Démo :
Sans mise en forme
Avec mise en forme

Testé sur :
Non renseigné

Crédits :
Proposé par Liliana le 14/05/10 | Validé par Haribot' ♪

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

Le tutoriel


Vous trouverez un complément à ce tutoriel dans l'article Modifier l'emplacement du nombre de sujets & messages d'un forum
Vous devez être fondateur pour pouvoir modifier les templates de votre forum

Ce tutoriel vous aidera à créer un petit effet assez sympa, qui change de l'affichage habituel des forums. Au lieu des traditionnelles cases "messages" et "sujets" que nous voyons sur la plupart des forums - ou bien les "contient X messages dans X sujets" qui commencent à se répandre partout, votre forum pourra essayer de se distinguer par cet effet. Suffit juste de lire attentivement le tutoriel =)

Suppression des colonnes de statistiques (messages & sujets)


Dans la mesure où l'on va placer les statistiques ailleurs, les deux colonnes qui contiennent ces valeurs deviennent obsolètes. La première étape sera donc de s'en débarrasser.

Pour ceci, rendez-vous tout d'abord sur votre panneau d'administration, onglet Affichage, puis dans le menu Templates » Général et éditez le template index_box.

Cherchez, puis supprimez les lignes de code suivantes :
Code:
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
Le titre de la colonne "Sujets"
Code:
<th nowrap="nowrap" width="50">{L_POSTS}</th>
Le titre de la colonne "Messages"

Ce n'est pas tout, on a retiré le titre des deux colonnes mais les colonnes en elles-mêmes sont toujours là. Plus bas dans le code de votre template, cherchez, puis supprimez ce bout de code :
Code:
<td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
Attention aux erreurs d'inattention, vous devez supprimer deux cellules, n'oubliez pas le </td> final par exemple.

Remarquez les variables {catrow.forumrow.TOPICS} et {catrow.forumrow.POSTS}, nous les réutiliserons plus tard, ce sont elles qui affichent respectivement le nombre de sujets et le nombre de messages des forums.

A ce stade, vous allez donc vous retrouver avec une seule case restante : celle des derniers sujets postés. Ces manipulations nous ont donc permis - pour l'instant - de passer de ceci à celà. Chouette non ?

Replacer les statistiques


Maintenant, il faut remettre les "messages" et "sujets" en place. Et pour cela nous avons besoin des deux variables mentionnées plus haut, à savoir {catrow.forumrow.TOPICS} (le nombre de sujets) et {catrow.forumrow.POSTS} (le nombre de messages)

Dans le code de votre template (toujours index_box), il faut donc localiser l'endroit où nous voulons mettre ce code, soit juste au-dessus de "dernier message posté". Le bout de code concerné est donc celui-ci :
Code:
<td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>

Il suffit donc de rajouter nos statistiques à cet endroit pour avoir la base de notre effet et de personnaliser le texte comme on le souhaite (on peut remplacer 'messages' par autre chose par exemple).
Code:
<td class="row3 over" align="center" valign="middle" height="50">
 <div class="gensmall sujets_messages">Messages : {catrow.forumrow.POSTS} | Sujets : {catrow.forumrow.TOPICS}</div>
 <div class="gensmall derniers_sujets">{catrow.forumrow.LAST_POST}</div>
 </td>
Vous pouvez constater que j'ai placé les statistiques dans une balise <div> à laquelle sont attribuées deux classes : gensmall et sujets_messages. J'ai aussi modifié le <span> qui englobait la variable {catrow.forumrow.LAST_POST} pour en faire un <div> et je lui ai rajouté la classe derniers_sujets. Ceci nous permettra non seulement de récupérer la mise en forme "de base" du texte telle que vous l'avez définie dans votre panneau d'administration (grâce à la classe gensmall), mais aussi de spécifier une mise en forme personnalisée plus tard grâce à un peu de CSS !

Vous pouvez enregistrer et publier votre template Wink
A présent, vous devez avoir ceci : clic. C'est pas super beau, mais on va arranger cela Wink

C'est plus joli avec du CSS !


En effet, c'est plus joli avec du CSS, nous allons donc personnaliser tout cela. Faites donc chauffer vos cerveaux =) Déjà, il faut ouvrir la feuille CSS de votre forum : dans l'onglet Affichage de votre panneau d'administration, sélectionnez le menu Images et couleurs » Couleurs, puis l'onglet Feuille de style CSS. Souvenez-vous, à l'étape précédente nous avons attribué à nos <div> deux nouvelles classes : .sujets_messages et .derniers_sujets (le point qui précède ces noms de classe signifie, justement, qu'il s'agit de classes en notation CSS). Vous allez donc devoir les déclarer dans votre CSS et les personnaliser selon vos préférences :

Code:
.sujets_messages {
 padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

 /* après on peut rajouter ce qu'on veut : une bordure, une image de fond ... */
 border: 1px solid #000000;
 background-image: url('http://img411.imageshack.us/img411/4715/sanstitre3ex.png');
}


.derniers_sujets {
 margin-top: 3px; /* pour faire un léger espace entre la ligne des "messages & sujets" et "dernier message posté" */
 padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

 /* après on peut rajouter ce qu'on veut : une bordure, une image de fond, des coins arrondis un peu originaux... */
 border: 1px dashed #000000;
 background-image: url('http://img411.imageshack.us/img411/4715/sanstitre3ex.png');
 border-radius:0 10px 0 10px;
 -moz-border-radius:0 10px 0 10px;
 -webkit-border-radius:0 10px 0 10px;
}
Tous les effets que vous souhaitez. ^^
Au final, ça donnera quelque chose comme ça : cliic (bon, mon exemple est pas du plus bel effet, mais ça peut rendre mieux avec d'autres codes et d'autres personnalisations Wink)
MessageSujet: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 13 Mai 2010, 21:05
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
FAQ


Q
Serait-il possible de remplacer "Derniers Messages" par d'autes mots ?

R
Dans le template index_box, remplace simplement la variable {L_LASTPOST} par le texte que tu veux.


Q
Je voudrais savoir si on pouvait le mettre à gauche ?

R
Ce n'est pas le sujet de ce tutoriel Wink Mais la réponse est oui.


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: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 21 Juil 2011, 21:17
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
Ptite_Perle
Ptite_Perle
{ Membre }
{ Membre }

Féminin Messages : 241



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Coucou

Merci pour le tuto, j'ai réussi, mais j'avais pas les mêmes codes, écrit pareil, donc j'ai bidouillée lol

Le résultat est bien; mais il n'est pas en dessous de dernier message, mais à droite.

Amicalement
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 01 Mai 2012, 10:17
Revenir en haut Aller en bas
pamina
pamina
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Pour toute question concernant ce tutoriel, merci d'ouvrir un sujet dans la section Aide CSS & xHTML.
Merci de ta compréhension. Very Happy
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 01 Mai 2012, 13:49
Revenir en haut Aller en bas
http://hollywood-ramdam.lebonforum.com/
Kaileen
Kaileen
{ Membre }
{ Membre }

Féminin Messages : 103



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour ce tutoriel !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyDim 13 Mai 2012, 05:36
Revenir en haut Aller en bas
http://cicatrices.rpg-dynasty.net/
Wohlfram
Wohlfram
{ Membre }
{ Membre }

Féminin Messages : 14



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour ce tutoriel!
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptySam 30 Juin 2012, 09:43
Revenir en haut Aller en bas
Niowky
Niowky
{ Membre }
{ Membre }

Masculin Messages : 167



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour le tutoriel Lilia' ♥
Très simple et facile à comprendre !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptySam 07 Juil 2012, 09:28
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Tutoriel corrigé et mis à jour le 12/08/2012
(les templates de FA ont tendance à changer au fil du temps ^^')
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyDim 12 Aoû 2012, 08:22
Revenir en haut Aller en bas
http://undisclosed-desires.forumactif.com/
Eira*
Eira*
{ Membre }
{ Membre }

Féminin Messages : 7



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour ce tutoriel !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 06 Sep 2012, 09:18
Revenir en haut Aller en bas
bipaya
{ Membre }
{ Membre }

Masculin Messages : 26



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 20 Sep 2012, 06:54
Revenir en haut Aller en bas
http://...
Leelewine
Leelewine
{ Membre }
{ Membre }

Féminin Messages : 74



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour ce magnifique tuto, j'adore, c'est super bien expliqué ! Laughing
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 16 Oct 2012, 06:29
Revenir en haut Aller en bas
http://www.edspeleersaddicts.com
Edward Speleers
Edward Speleers
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Super tuto merci
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyLun 17 Déc 2012, 08:14
Revenir en haut Aller en bas
http://www.css-actif.com/
Kaïzer
Kaïzer
{ Membre }
{ Membre }

Masculin Messages : 15



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour le partage ! "Messages & sujets" indiqués au-dessus du "dernier message posté" 577704309
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyVen 01 Mar 2013, 19:00
Revenir en haut Aller en bas
http://www.theoriginalvampires.com
LuxAeterna
LuxAeterna
{ Membre }
{ Membre }

Féminin Messages : 28



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci beaucoup pour ce tuto !!! cheers
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptySam 11 Mai 2013, 12:28
Revenir en haut Aller en bas
Guns
Guns
{ Membre }
{ Membre }

Féminin Messages : 4



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci d'avoir pris la peine de faire ce tuto Smile
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMar 21 Mai 2013, 06:46
Revenir en haut Aller en bas
http://once-upon-a-time.forumactif.org/
Nessie
Nessie
{ Membre }
{ Membre }

Féminin Messages : 41



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
super !! ça fonctionne très bien, c'est absolument facile comme tout, merci énormément pour ce tuto Very Happy
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMer 05 Juin 2013, 08:07
Revenir en haut Aller en bas
http://ride-to-live.forumgratuit.ch/
Mimiko
Mimiko
{ Membre }
{ Membre }

Féminin Messages : 10



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
merci
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyJeu 05 Sep 2013, 07:09
Revenir en haut Aller en bas
http://toothless.forumactif.fr/
Toothless
Toothless
{ Membre }
{ Membre }

Féminin Messages : 7



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyMer 25 Déc 2013, 20:53
Revenir en haut Aller en bas
http://www.pma.com/
SvenO
{ Membre }
{ Membre }

Masculin Messages : 7



"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Merci pour ce tuto Liliana !
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" EmptyLun 24 Fév 2014, 09:43
Revenir en haut Aller en bas
Contenu sponsorisé




"Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
MessageSujet: Re: "Messages & sujets" indiqués au-dessus du "dernier message posté"   "Messages & sujets" indiqués au-dessus du "dernier message posté" Empty
Revenir en haut Aller en bas
 

"Messages & sujets" indiqués au-dessus du "dernier message posté"

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

 Sujets similaires

-
» "Messages & sujets" indiqués au-dessus du dernier message
» "Messages & Sujets" indiqués au dessus de "Derniers message" - Problème
» Problème avec ce code : "Messages & Sujets au dessus du dernier message" | Résolu :)
» Bouton ' Pas de nouveau message ' au dessus de ' Derniers messages '
» Bouton ' Pas de nouveau message ' au dessus de ' Derniers messages '

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 | Informatique et Internet | Internet