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
» Vos partenaires dans le footer
Sam 10 Nov 2018, 09:39 par FredR

» Mettre votre © Copyright dans le footer de votre forum
Sam 10 Nov 2018, 09:25 par FredR

» Effet pour vos sous-forums
Sam 10 Nov 2018, 06:13 par FredR

» Pour faire des beaux titres de sous-forums
Sam 10 Nov 2018, 05:55 par FredR

» Bouton ''Sélectionner le contenu'', pour les codes
Sam 10 Nov 2018, 05:41 par FredR

» Modifier l'apparence du titre des topics
Sam 10 Nov 2018, 05:28 par FredR

» Début d'un sujet/Fond pour sujet important
Sam 10 Nov 2018, 02:45 par FredR

» Previsualiser le premier message d'un sujet
Ven 09 Nov 2018, 12:49 par FredR


Partagez | 
 

Tags de modération

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 2912



Tags de modération


Informations générales

Description :
Bonjour ! Smile

Dans ce tutoriel, je vous montrerai comment apprendre à faire des tags de modération (un peu comme sur CSSActif). Si vous ne voyez pas ce que je veux dire, jetez un oeil sur la démo

Démo :
Voici un exemple

Testé sur :
Tous les navigateurs

Crédits :
Proposé par Basil Hawkins le 12/06/2010 | Validé par Basil Hawkins

Mise(s) à jour :
Mise à jour le 03/10/2012 par Espeon

Le tutoriel



Le CSS


Commençons d'abord par définir une classe et à lui appliquer des fonctions de base.

Je vais donc créer une classe "corbeille" avec un fond gris clair et une bordure gris foncé.

Pour cela, rendez-vous dans Panneau d'Administration > Affichage > Couleurs > Feuilles de style CSS et placez-y le code suivant :
Code:
.corbeille {
    background-color: #DDDDDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
}

Ce qui donne pour l'instant :
Corbeille !


Rajoutons une image


Bon, je vous l'accorde, ce tag reste pour l'instant très basique. Mais maintenant nous allons lui appliquer une image de fond, la positionner, etc. :
Corbeille !

Code:
.corbeille {
    background-image: url('URL_DE_VOTRE_IMAGE'); /*--- Image de la corbeille ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/
    background-color: #DDDDDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
}

Le code, commenté, parle de lui-même Wink

Ou encore...:
 

Bon, on a mis une image, mais le texte est par-dessus et on ne la voit pas entièrement. On va y remédier en rajoutant une marge interne à gauche.
Et pour l'image qui est "mangée" en haut et en bas ? Et bien ça va être l'occasion de voir une propriété bien particulière, j'ai nommé min-height :

Corbeille !

Code:
.corbeille {
    background-image: url('URL_DE_VOTRE_IMAGE'); /*--- Image de la corbeille ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/
    background-color: #DDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
    padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/
    min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/
}

Kesako ça min-height ?


Pour commencer, j'imagine que vous connaissez déjà les propriétés width et height qui permettent de définir respectivement la largeur et la hauteur d'un élément de type bloc.

Pour que mon image s'affiche entièrement (ce qui serait plus joli, avouez le), il faut que mon bloc qui la contient soit plus grand. On aurait donc tendance à fixer cela avec un height: 60px; par exemple.

Oui mais voilà, si jamais j'ai un modérateur très bavard qui veut écrire un message de 10 lignes, mon bloc va être trop petit ! Inversement, je ne peux pas fixer une hauteur énorme, alors que ce n'est pas nécessaire dans la plupart des cas. Concrètement, je voudrais que le bloc s'adapte à la taille du contenu, mais avec une hauteur minimale de 60 pixels (pour que notre image soit visible).

Et beh ça tombe bien, parce-qu'en CSS ça existe : ce sont les propriétés min-width et min-height qui fixent respectivement une largeur et une hauteur minimales au bloc.

Dans notre exemple, seul min-height nous intéresse, c'est pour cela que nous l'avons utilisé !



Les choix de valeurs de marge et de hauteur sont un choix à faire qui dépendent surtout des dimensions de l'image. Concrètement, si le résultat n'est pas concluant chez vous, n'hesitez pas à changer les valeurs de padding-left et min-height à votre sauce car, au final, ce sont vos tags de modération dont il s'agit !


C'est tout !


Et voilà, c'est terminé pour le CSS !

Après, vous pouvez ajouter vous-même votre touche personnelle, le principe de ce tutoriel étant de vous laisser personnaliser au maximum ces tags de modération (rajouter des marges internes, changer la taille du texte, la police, ...). Smile

La mise en place


Ne vous inquiétez pas, je vous libère bientôt. xD

Pour pouvoir utiliser votre tag sur votre forum, il suffit tout simplement de créer une <div> avec la class du tag de modération, comme ceci :
Code:
<div class="corbeille">Votre message de modération indiquant le corbeillage de ce topic, par exemple</div>
Veillez bien entendu à ce que le HTML soit activé dans les messages ! Sinon ça ne fonctionnera pas...

Maintenant, vous saurez modérer vos forums avec classe. Cool
MessageSujet: Tags de modération   Sam 12 Juin 2010, 09:33
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
Est-il possible de définir automatiquement le texte qui sera écrit dans le tag ?

R
Non, il faut le réécrire à chaque fois (paresseux va !).


Q
Comment définir la longueur du tag afin d'éviter que celui-ci ne soit pas aussi long que le cadre du forum?

R
Il suffit d'ajouter les codes suivants au tag en modifiant la valeur 100 pour la valeur désirée.
Code:
margin-left: 100px;
margin-right: 100px;


Q
Est-il possible de créer plusieurs tags ?

R
Oui, il suffit pour cela de faire plusieurs classes. Donc de refaire le tutoriel plusieurs fois en changeant à chaque fois le nom de la classe et l'image selon ce que l'on veut.


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: Tags de modération   Mer 03 Aoû 2011, 09:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://serialdesigner.forumactif.fr/
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



Tutoriel très bien expliquer, je vais de suite l'installer sur mon fofo !




MessageSujet: Re: Tags de modération   Lun 02 Avr 2012, 11:12
Revenir en haut Aller en bas
Invité
Invité




Citation :

Est-il possible de définir automatique le texte qui sera écrit dans le tag ?


Non, il faut le réécrire à chaque fois (paresseux va !).

Si si Kaiji, avec un générateur de tag.
MessageSujet: Re: Tags de modération   Lun 02 Avr 2012, 16:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://gothiqua.wix.com/pixenart
avatar
{ Membre }
{ Membre }

Masculin Messages : 104



Moi je l'emploi sur mon forum c'est tres utile ! Merci.


MessageSujet: Re: Tags de modération   Mar 03 Avr 2012, 10:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.yowa.fr.nf/
avatar
{ Membre actif }
{ Membre actif }

Masculin Messages : 349



Merci,

J'avais déjà fait quelques chose un peu pareil, mais celui-ci est plus court Smile
MessageSujet: Re: Tags de modération   Mar 10 Avr 2012, 14:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.creaillusionfantasy.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 238



Merci pour ce tuto

Amicalement


MessageSujet: Re: Tags de modération   Mar 10 Avr 2012, 15:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hp-fanfiction.forumpro.fr
avatar
{ Membre }
{ Membre }

Féminin Messages : 17



Je cherchais à faire ce genre de choses depuis un moment. Merci beaucoup.
MessageSujet: Re: Tags de modération   Dim 29 Avr 2012, 07:21
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://fandebeauceron.lebonforum.com
avatar
{ Membre }
{ Membre }

Masculin Messages : 23



Simple et super pratique, merci beaucoup
MessageSujet: Re: Tags de modération   Lun 09 Juil 2012, 22:52
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tvd-rpg.forumgratuit.be/
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



Super et un grand merci
MessageSujet: Re: Tags de modération   Sam 14 Juil 2012, 05:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ff-games.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 29



Merci Wink
MessageSujet: Re: Tags de modération   Ven 27 Juil 2012, 08:37
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Masculin Messages : 27



Merci Wink
MessageSujet: Re: Tags de modération   Ven 27 Juil 2012, 10:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pensionjulietta.1fr1.net
avatar
{ Membre }
{ Membre }

Féminin Messages : 51



Salut, très simple j'ai bien l'intention de le mettre sur mon forum, seulement je me demandais où on pouvait trouver ce genre d'images ^-^
MessageSujet: Re: Tags de modération   Lun 27 Aoû 2012, 19:40
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



03/10/2012 - Tutoriel revu et mis à jour


MessageSujet: Re: Tags de modération   Mer 03 Oct 2012, 09:28
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 intéressant, merci beaucoup^^


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: Tags de modération   Mer 10 Oct 2012, 06:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
{ Membre }
{ Membre }

Masculin Messages : 12



merci
MessageSujet: Re: Tags de modération   Dim 14 Juil 2013, 08:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://you-can.forumactif.com/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 13



Merci beaucoup Smile
MessageSujet: Re: Tags de modération   Mer 14 Aoû 2013, 23:02
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.generation-city.com
{ Membre }
{ Membre }

Masculin Messages : 4



Comment décaler l'image??
MessageSujet: Re: Tags de modération   Mer 13 Mai 2015, 20:09
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Tags de modération   
Revenir en haut Aller en bas
 

Tags de modération

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

 Sujets similaires

-
» Tags de modération
» Tags de modération (messages)
» Installer plusieurs logiciels en une seule opération
» Chasse aux oeufs ( Place Longueuil ) au profit d'Opération Enfant Soleil
» [Résolu] Recupération données sur DVD RW

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

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 | Informatique et Internet | Outils pour Webmestres