AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Tags de Modérations

    Partagez
    Jay ~
    MasculinAge : 23Messages : 90

    le Dim 12 Sep 2010 - 11:58

    Hello,

    Je suis de retour cette fois ci pour un nouveau tutoriel qui ne semble pas être ici. Cela concerne évidemment le CSS xD. Ce sont comme le titre l'inqique des tags de modérations. Cela ne vous parle pas, en gros, c'est ça.

    Spoiler:



    Et c'est ce que je vais vous apprendre à faire. Avant de commencer, vous avez besoin de la couleur que vous prendrez pour le fond (Plein de Jolies Couleurs ici) et une image de type iconographique. Commençons donc petit à petit. Je vais vous donner le code puis vous expliquerais en détail.

    Code:

    .corbeille {
        background-image: url('http://www.dzvet.net/forum/images/corb.png'); /*--- 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: #B09F91; /*--- Couleur de fond ---*/
        border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/
        color: #000000; /*--- Couleur du texte ---*/
        padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/
        min-height: 60px; /*--- On donne une taille minimale de 60px au tableau ---*/
    }

    Tout d'abord, on donne un nom à notre "div". Qu'est ce que c'est ? Eh bien, c'est ce qui nous permettra de donner forme à notre tag une fois son CSS terminé. Ici, le nom de la div est corbeille.
    Ensuite, nous mettons une image en bakground à notre div. L'on peut choisir de la mettre au milieu, à gauche ou à droite. A gauche est le style par défaut.
    Après, on définit la couleur de fond &avec un code couleur composé d'un # et de 6 chiffres ou lettres.
    On détermine si l'on veut que la bordure soit en "solid", "dashed", "dotted"..... Le style "solid" est le style par défaut. On définit la couleur du texte et l'espacement de l'image par rapport à la bordure.

    Voilà, ce n'est sans doute pas très clair mais vous copiez coller ce code dans votre CSS, vous le personnalisez et ce doit être bon. Ensuite dans votre message vous mettez

    Code:

    <div class="nomdevotrediv">Votre Texte</div>
    et vous aurez ce que vous aurez fait.

    Si vous avez la moindre question, je suis disponible et je vous répondrais Wink.

    Bonne journée.





    Je Suis Iron Luffy ♣
    Redemption
    MasculinAge : 23Messages : 196

    le Jeu 4 Nov 2010 - 20:01

    Se serait possible de faire un widget avec justement quelques bouton de modération qui s'écrirait automatiquement en cliquant dessus.

    Exemple un bouton Corbeille.

    Hop un message dans la réponse rapide :

    TOPIC ENVOYE A LA CORBEILLE SOUS 48H !

    C'est possible en js ?
    xetla
    MasculinAge : 27Messages : 10

    le Mer 5 Oct 2011 - 3:07

    Merci à toi, très bon tuto !

    Je précise tout de même qu'il faut autoriser le HTML dans les messages pour que cela fonctionne.

    Pour ce faire :
    PA / Général / Messages et E-Mails / Configuration
    Autoriser le HTML => Oui

    Sun01
    FémininAge : 23Messages : 24

    le Ven 25 Nov 2011 - 16:29

    Merci.
    Taktiik
    MasculinAge : 22Messages : 2291

    le Ven 25 Nov 2011 - 16:53


    Merci pour ce tuto ;D !

    Len111
    MasculinAge : 20Messages : 98

    le Jeu 22 Déc 2011 - 3:55

    Je siffle de joie!!!! Merci infiniment, mais serais t'il possible de mettre des bordure comme se code la:
    Code:
    .ombre1 {
          -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius:20px;
    -moz-box-shadow: 0px 0px 10px #00D4FE;
      box-shadow: 0px 0px 10px #00D4FE;
    -webkit-box-shadow: 0px 0px 10px #00D4FE;
    }
    S'est une ombre, et je voudrai savoir si on peut en mettre une !!



    Statax_
    MasculinAge : 24Messages : 32

    le Ven 23 Déc 2011 - 19:35

    Très pratique merci ! Je ne suis pas bien sur mais le code général doit être inscrit dans la feuille de CSS ?
    Flitzz
    MasculinAge : 32Messages : 102

    le Sam 24 Déc 2011 - 18:47

    Merci beaucoup c'est justement ce que je cherchais
    Flitzz
    MasculinAge : 32Messages : 102

    le Dim 25 Déc 2011 - 4:49

    @Statax_ a écrit:Très pratique merci ! Je ne suis pas bien sur mais le code général doit être inscrit dans la feuille de CSS ?

    Salut Statax, oui tu dois coller et modifer à ta guise le "code" avec toutes les variantes dans ta feuille de style CSS.

    *****
    J'ai une question, quel ligne de code je dois ajouter pour que mon texte soit centré en haut et en bas dans le cadre ?

    merci.
    Celska
    FémininAge : 21Messages : 37

    le Mer 27 Juin 2012 - 15:02

    Merci beaucoup, c'était exactement ce dont j'avais besoin ! oo



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    swananas
    FémininAge : 21Messages : 32

    le Ven 27 Juil 2012 - 18:09

    Ahhhh génial ce tutoriel, je me demandais justement comment on faisait ! Very Happy
    Laetitia
    FémininAge : 34Messages : 88

    le Jeu 8 Nov 2012 - 15:46

    merci pour le tuto
    Chucky'
    MasculinAge : 19Messages : 80

    le Sam 10 Nov 2012 - 18:04

    merci beaucoup Very Happy



    Trych
    FémininAge : 21Messages : 80

    le Mer 14 Nov 2012 - 2:04

    Yay merci je cherche semblable dpuis longtemps *O*



    Sacagawea
    FémininAge : 21Messages : 236

    le Dim 18 Nov 2012 - 22:27

    Merci pour ce tutoriel ! Depuis le temps que je me demandais comment en avoir ! Very Happy
    Léoshadow
    MasculinAge : 18Messages : 47

    le Ven 1 Fév 2013 - 6:59

    Merci Very Happy



    Mon texte Very Happy
    Kiwi SuperStar
    FémininAge : 25Messages : 88

    le Mar 11 Juin 2013 - 13:39

    Vraiment chouette ce tuto :)
    Cela va me permettre d'éclaircir le code de ma fiche de présentation Very Happy
    Merci Jay :3
    FeliceFelicis
    FémininAge : 26Messages : 87

    le Lun 24 Juin 2013 - 18:31

    Étrangement ça ne fonctionne pas D:  Sacre-bleu!  Enfin, merci pour le code!  Je trouverai certainement un moyen pour que sa «marche» (j'dois avoir fait une erreur stupide c'est comme de rien!)
    rederst
    FémininAge : 27Messages : 12

    le Sam 14 Sep 2013 - 23:54

    merci infiniment pour ce tuto
    Patou972
    FémininAge : 38Messages : 165

    le Mer 1 Jan 2014 - 0:37

    Bonjour, tout d'abord merci beaucoup pour ce tuto...j'ai un problème, j'ai besoin de 3 tags alors le premier fonctionne parfaitement mais les deux autres ne s'affichent pas et je ne sais pas pourquoi. Pourriez-vous m'aider s'il vous plaît ?
    Neva
    FémininAge : 25Messages : 18553

    le Mer 1 Jan 2014 - 11:17

    @Patou972 a écrit:Bonjour, tout d'abord merci beaucoup pour ce tuto...j'ai un problème, j'ai besoin de 3 tags alors le premier fonctionne parfaitement mais les deux autres ne s'affichent pas et je ne sais pas pourquoi. Pourriez-vous m'aider s'il vous plaît ?

    Salut,

    N'oubliez pas de créditer le ou les codes utilisé(s) et si vous avez un souci pour utiliser/personnaliser un code vous devez ouvrir un topic dans cette section.

    Pense à lire le topic contenant les règles de la section. Ils rappellent les nformations à donner pour que les aideurs puissent te donner un coup de main



     
    Patou972
    FémininAge : 38Messages : 165

    le Mer 1 Jan 2014 - 17:15

    pardon, excuses-moi, je vais faire plus attention
    Siiu
    FémininAge : 20Messages : 26

    le Dim 30 Nov 2014 - 20:43

    Merci pour ce tuto, c'est top !




    Siiu.2015 always listen Soul music
    Caine Lornan
    MasculinAge : 35Messages : 78

    le Sam 14 Mar 2015 - 19:57

    Merci
    Litonya
    FémininAge : 15Messages : 135

    le Dim 3 Juil 2016 - 19:21

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Fév 2017 - 21:29