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.


    Bulle BD pour message (simple)

    Partagez
    avatar
    Elektra Kloo
    FémininAge : 29Messages : 156

    le Dim 29 Mar 2015 - 14:31

    Rappel du premier message :

    Bulle BD

    Aperçu

    I - CSS
    Code:

    #bulle {
        position: relative;
        color : #000000;
    background: #ffffff;/** couleur du fond (se retrouve 2 fois) **/
        font-size:16px;
    border: 5px solid #FFFFFF; /** taille de la bordure et couleur (se retrouve 2 fois) **/
    width:601px;
        min-height:100px;} /** dimensions de la cellule (du cadre) **/
    #bulle:after, #bulle:before {right: 100%; /** right pour mettre la flèche à gauche ! **/
    border: solid transparent; content: ""; position: absolute;}
    #bulle:after {border-right-color: #ffffff; /** 2e indication de couleur du fond **/
    border-width: 33px; /** grandeur de la flèche **/
    top: 50%; /** position de la flèche (se retrouve 2 fois) **/
    margin-top: -33px;} /** indication de la grandeur de la flèche (valeur négative) **/
    #bulle:before {border-right-color: #FFFFFF; /** 2e indication de la couleur de la bordure **/
    border-width: 40px; /** indication de la grandeur de la flèche +7px **/
    top: 50%; /** 2e indication de la position de la flèche **/
    margin-top: -40px; } /** indication de la grandeur de la flèche +7px (valeur négative) **/

    2 - Templates
    Rendez vous dans Affichage > Templates > Général > Viewtopic_body
    Repérer ceci
    Code:
    <div>{postrow.displayed.MESSAGE}</div>

    Mettez devant
    Code:
    <div id="bulle">

    Mettez derrière la balise "...MESSAGE}"
    Code:
    </div>

    Style tchat pour contenue rp

    Aperçu

    1 - Code pour vos messages

    Code:
    <img style="width: 62px; height: 62px;" src="URLICONSINTERLOCUTEUR" /><img style="width: 549px; height: 62px;" src="http://img15.hostingpics.net/pics/548257tchat2.png"
    <div id="bulle" style="font-family:'Aldrich'" /> blabla</div><img style="width: 4589px; height: 62px;" src="http://img15.hostingpics.net/pics/227626tchat.png" /><img style="width: 62px; height: 62px;" src="URLICONSPERSONNEL" />
    <a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By ElektraKloo sur Never-Utopia</a>

    ATTENTION NE PAS COMBINER LES DEUX SINON CELA FAIT DOUBLE BULLE


    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Elektra Kloo le Mar 31 Mar 2015 - 7:03, édité 1 fois
    avatar
    Sophie2
    FémininAge : 54Messages : 63

    le Mar 12 Jan 2016 - 12:42

    Merci.
    avatar
    Sniper Soroshiya
    FémininAge : 19Messages : 43

    le Mer 13 Jan 2016 - 14:44

    Nickel, exactement ce qu'il me fallait <3 !
    avatar
    Illiana
    FémininAge : 22Messages : 98

    le Mer 20 Jan 2016 - 10:51

    merci !



    avatar
    Equestria
    FémininAge : 21Messages : 118

    le Mer 20 Jan 2016 - 15:34

    merci
    avatar
    Be Shup's
    FémininAge : 20Messages : 33

    le Sam 23 Jan 2016 - 0:17

    merci



    avatar
    Wiss
    FémininAge : 13Messages : 53

    le Dim 31 Jan 2016 - 14:49

    Merci




    Autre signa:
    avatar
    blastrall
    MasculinAge : 24Messages : 41

    le Dim 7 Fév 2016 - 9:58

    merci bien
    avatar
    KTMiz
    MasculinAge : 19Messages : 47

    le Dim 7 Fév 2016 - 17:24

    Merci



    avatar
    Max Rénix
    MasculinAge : 23Messages : 56

    le Mer 10 Fév 2016 - 3:09

    Merci !!
    avatar
    Tahu
    MasculinAge : 16Messages : 11

    le Dim 14 Fév 2016 - 14:13

    Merci pour le tutoriel!



    avatar
    Neya
    FémininAge : 19Messages : 164

    le Lun 15 Fév 2016 - 15:38

    Merciiiii *O*
    avatar
    Little-myrt
    FémininAge : 20Messages : 41

    le Mar 16 Fév 2016 - 0:22

    merci
    avatar
    Tahu
    MasculinAge : 16Messages : 11

    le Jeu 18 Fév 2016 - 13:23

    J'ai pas compris quelque chose. Dans le code à selectionner, tous les écritaux en jaune sont à remplacés?



    avatar
    Amu
    FémininAge : 21Messages : 16

    le Ven 19 Fév 2016 - 15:31

    And I fell in love.



    Merci ! ♥






    Itsumo doori no aru hi no koto, Kimi wa totsuzen tachiagari itta, Konya hoshi wo mi ni yukou. 
    dusty scarecrow.
    avatar
    Renaissance
    FémininAge : 20Messages : 69

    le Dim 21 Fév 2016 - 9:18

    Merci :3
    avatar
    Shide
    FémininAge : 29Messages : 60

    le Dim 28 Fév 2016 - 17:52

    merci
    avatar
    miss69
    FémininAge : 34Messages : 40

    le Sam 5 Mar 2016 - 21:55

    Merci du partage
    avatar
    Ganta
    MasculinAge : 25Messages : 69

    le Lun 28 Mar 2016 - 9:56

    Merci =D
    avatar
    geen.
    FémininAge : 30Messages : 23

    le Sam 2 Avr 2016 - 10:17

    merci :)
    avatar
    Rodeuse
    FémininAge : 25Messages : 142

    le Lun 4 Avr 2016 - 7:44

    Merci du partage.
    Hop80
    MasculinAge : 29Messages : 138

    le Lun 4 Avr 2016 - 19:06

    Merci du partage
    avatar
    Hopyes
    FémininAge : 30Messages : 79

    le Mer 13 Avr 2016 - 5:42

    C'est super merci ^^
    avatar
    Morphine.
    FémininAge : 27Messages : 40

    le Lun 18 Avr 2016 - 12:39

    merci :)



    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Dim 24 Avr 2016 - 19:49

    merci Very Happy
    avatar
    ninouee
    FémininAge : 37Messages : 134

    le Mer 4 Mai 2016 - 2:58

    J'adore ton idée!



    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Aoû 2018 - 10:11