AccueilRechercherS'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.

Le Deal du moment : -22%
Borne de jeu d’arcade Street Fighter 2 – ...
Voir le deal
272 €

    Bulle BD pour message (simple)

    Elektra Kloo
    Elektra Kloo
    FémininAge : 32Messages : 156

    le Dim 29 Mar 2015 - 20: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 - 13:03, édité 1 fois
    -_Izusa_-
    -_Izusa_-
    FémininAge : 19Messages : 4

    le Sam 31 Mar 2018 - 12:41

    merci
    Uria
    Uria
    FémininAge : 35Messages : 5

    le Jeu 14 Jan 2021 - 17:27

    bjr

    Bel aperçu ! merci
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Jan 2021 - 10:22