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 - 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 - 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 - 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 - 16:29

    Merci.
    Taktiik
    MasculinAge : 22Messages : 2291

    le Ven 25 Nov - 16:53


    Merci pour ce tuto ;D !

    Len111
    MasculinAge : 19Messages : 98

    le Jeu 22 Déc - 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 - 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 : 31Messages : 102

    le Sam 24 Déc - 18:47

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

    le Dim 25 Déc - 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 - 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 - 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 - 15:46

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

    le Sam 10 Nov - 18:04

    merci beaucoup Very Happy



    Trych
    FémininAge : 21Messages : 79

    le Mer 14 Nov - 2:04

    Yay merci je cherche semblable dpuis longtemps *O*



    Kiharu
    FémininAge : 20Messages : 233

    le Dim 18 Nov - 22:27

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

    le Ven 1 Fév - 6:59

    Merci Very Happy



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

    le Mar 11 Juin - 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 : 86

    le Lun 24 Juin - 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 - 23:54

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

    le Mer 1 Jan - 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 : 18542

    le Mer 1 Jan - 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 : 164

    le Mer 1 Jan - 17:15

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

    le Dim 30 Nov - 20:43

    Merci pour ce tuto, c'est top !




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

    le Sam 14 Mar - 19:57

    Merci
    Litonya
    FémininAge : 17Messages : 124

    le Dim 3 Juil - 19:21

    Merci !
    Contenu sponsorisé

    Aujourd'hui à 15:01


      La date/heure actuelle est Jeu 8 Déc - 15:01