AccueilDernières imagesRechercherS'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 :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal
Le deal à ne pas rater :
Jeux, jouets et Lego : le deuxième à -50% (large sélection)
Voir le deal

    Demande de présentation de méssage

    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mer 5 Nov 2014 - 22:17

    Ma demande



    Bonjour ou Bonsoir. Je poste ici ma commande de présentation de message afin de donner de la cohérence a mon forum jusqu'au bout.

    Schéma(s) et Eléments
    Schémas : https://www.zupimages.net/up/14/45/yxk3.jpg
    Tailles des éléments : Bonne question. 930px de large pour la totale et 200*400 pour l'avatar
    Version de votre forum :PHPBB3


    Ressources
    Aucune

    Autres précisions ?
    J'aimerais que l'avatar cache le profil (et si possible si l'avatar est trop petit que le vide soit comblé par une couleur) et qu'il y ai un effet sympa pour fait apparaitre le profil au passage de la souris; Et biensur l'espace pour la signature en bas


    Merci infiniment



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Sam 8 Nov 2014 - 10:23

    un petit up Wink
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Lun 10 Nov 2014 - 18:32

    up Wink
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Sam 15 Nov 2014 - 9:53

    up
    merci bien



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Lun 17 Nov 2014 - 18:49

    up Wink
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Dim 23 Nov 2014 - 10:51

    tres pris mais je suis encore vivant et notre comade est toujours en cours Wink
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Jeu 27 Nov 2014 - 21:42

    tadam je suis encore vivant pour faire mon up en retard



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Dim 30 Nov 2014 - 8:42

    up merci bien



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mer 3 Déc 2014 - 16:56

    coucou
    je suis toujours vivant ainsi que le sujet

    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Dim 7 Déc 2014 - 15:25

    coucou je suis encore vivant pour un up
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mar 9 Déc 2014 - 12:26

    up
    merci



    Demande de présentation de méssage Sans_t14
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Mar 9 Déc 2014 - 13:05

    Bonjour Gladou :)

    Je me permet de lui répondre avant que sa commande ne sois totalement validé, pour lui proposer deux LS qui doit être ce qu'il recherche :)

    - Cacher le profil sous l'avatar (dévoilé en hover).
    -Profil "moderne" avec effet hover.

    Je te souhaite bon courage :)

    Amicalement Rozenbrez.

    PS: Encore désolé d'avoir poster avant validation, mais comme le codage qu'il souhaite est déjà disponible en LS, je me suis permise pour lui éviter d'attendre encore longtemps ^^
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mar 9 Déc 2014 - 13:32

    Coucou
    merci de ta réponse
    tous dabord sache qe depuis le temps j'ai deja tester ces codes ci Wink que j'aime beaucoup mai qui malheureusement ne traitent qu'une parti de mon probleme
    je m'explique
    ces codes mettent en forme la parti profile/avatar or en plus de ca ce que j'aurais aimé c'est modifier l'apparence des messages au complet (colonne profil + titre+ plus corps du messages+ espaces signature fin tout le tralala qu'on voie dans le sujet) parce que https://i.servimg.com/u/f59/15/54/63/32/fofo10.png ça c'est pas très joli
    fin je sais pas si c'est compréhensible ce que je dis scratch

    merci encore de ta réponse



    Demande de présentation de méssage Sans_t14
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Mar 9 Déc 2014 - 13:41

    De rien ^^

    Tes explications son toutes à fait compréhensible ^^ Mais ton schéma n'est pas assez explicite à mon goût. Sur ton schéma tu ne montre que le profil affiché dans les messages ^^ Il faudrait peut être - après tout dépend du codeur - de faire un schéma plus conséquent, expliquant mieux ce que tu souhaite :)

    En tous les cas bonne chance pour ta demande :)
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Dim 21 Déc 2014 - 18:21

    Salut Gladou,
    Tu es toujours là ? Tu as vu le dernier message de Roz ?



     
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Dim 21 Déc 2014 - 18:24

    oui oui désolé c'est pour ça que j'ai pas encore posté je suis en train d'essayer de vous faire un autre schéma un peu plus précis Wink
    désolé je vous le mettrais dés que j'ai fini



    Demande de présentation de méssage Sans_t14
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 1 Jan 2015 - 7:31

    Salut, je viens aux nouvelles, est-ce que tu as réussi à refaire un schéma?



    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mar 6 Jan 2015 - 18:48

    Coucou
    Désolé pour le retard j'avais pas de quoi écrire
    Alors voici le schéma
    http://www.pixenli.com/images/1420/1420565656085259400.jpg

    et voici ce à quoi on aimeraient que ça ressemble pour que ça soit a peu prés en rapport avec ce qu'on à déjà
    https://www.never-utopia.com/t50892-pirate-s-life

    j'espère que ça vous va?

    merci
    Glad



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Jeu 8 Jan 2015 - 17:43

    petit up
    et au passage j'en profite pour dire que je viens de vir une demande identique à la mienne (mis a part le coté des profil) ici : https://www.never-utopia.com/t53184-demande-de-mise-en-page-des-postes-messages

    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Sam 10 Jan 2015 - 18:01

    up
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Mar 13 Jan 2015 - 10:34

    et un petit up
    merci



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Dim 18 Jan 2015 - 9:13

    up
    merci beaucoup



    Demande de présentation de méssage Sans_t14
    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Sam 24 Jan 2015 - 15:53

    up
    merci


    Edit

    coucou
    Pour le moment j'ai trouvé ceci qui me convient parfaitement dans le style. Seul modif a apporte c'est de tout retourner pour avoir le profile a gauche et non a droite comme ici
    voici le forum test http://euxetnous.forumactif.org/


    viewtopic_body

    Code:
        <script type="text/javascript">//<![CDATA[
        var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
        $(function(){

            if(typeof(_atc) == "undefined") {
                _atc = { };
            }

            _atc.cwait = 0;
            $('.addthis_button').mouseup(function(){
                if ($('#at15s').css('display') == 'block') {
                    addthis_close();
                }
            });
        });

        var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
        showHiddenMessage = function(id)
        {
            try
            {
                var regId = parseInt(id, 10);
                if( isNaN(regId) ) { regId = 0; }
             
                if( regId > 0)
                {
                    $('.post--' + id).toggle(0, function()
                {
                    if( $(this).is(":visible") )
                    {
                      $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                    }
                    else
                    {
                      $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                    }
                });
                }
            }
            catch(e) { }
         
          return false;
        };

        //]]>
        </script>

          <div class="repondre"><!-- BEGIN switch_user_authpost -->
                <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a> 
                <!-- END switch_user_authpost -->

                <!-- BEGIN switch_user_authreply -->
                <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
                <!-- END switch_user_authreply -->
          </div>

        <div class="titre-sujet">{TOPIC_TITLE}</div>
              <!-- BEGIN postrow -->
        <!-- BEGIN displayed -->
        <div class="forum">
                <div class="post">
                    <div class="row">
                        <div class="bubble">
                            <div class="arrow-shape"></div>
                            <div class="post-content">
                      {postrow.displayed.MESSAGE}
                      <!-- BEGIN switch_signature -->
                          {postrow.displayed.SIGNATURE_NEW}
                      <!-- END switch_signature -->
                      </div>
                            <div class="last-edit">{postrow.displayed.EDITED_MESSAGE}</div>
                        </div>
                        <div class="colonne-droite">
                            <div class="online">
                              {postrow.displayed.ONLINE_IMG}
                            </div>
                            <div class="profil">

                                {postrow.displayed.POSTER_AVATAR}
                                <div class="infos-profil">
                                    <div class="pseudo-rang">
                                        {postrow.displayed.POSTER_NAME}
                                        <br/>{postrow.displayed.RANK_IMAGE}
                                <br/>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG}
                                    </div>

                                    <div class="infos-custom">
                                        <!-- BEGIN profile_field -->
                                {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                <!-- END profile_field -->
                                {postrow.displayed.POSTER_RPG}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mess-info">
                        {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                         
                    </div>
                </div>
            </div>
              <!-- END displayed -->
              <!-- END postrow -->
         
        <div class="titre-sujet2">
         


        <!-- BEGIN topicpagination -->
         
          <div class="pagination">
              <p class="paging">{PAGINATION}</p>
          </div>
              <!-- END topicpagination -->
         

          <div class="main-foot clearfix">
              <p class="h2">
                <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> 
                {L_MESSAGE} [{PAGE_NUMBER}]
              </p>
              <p class="options">
                <input type="hidden" name="t" value="{TOPIC_ID}" />

                <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
                <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

                <!-- BEGIN viewtopic_bottom -->
                {S_TOPIC_ADMIN}
                <!-- END viewtopic_bottom -->
              </p>
          </div>
        </div>
        <!-- BEGIN promot_trafic -->
        <div class="main" id="ptrafic_close" style="display:none">
          <div class="main-head clearfix">
              <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
              <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p>
          </div>
        </div>
        <div class="main" id="ptrafic_open" style="display:''">
          <div class="main-head clearfix">
              <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
              <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p>
          </div>
          <div class="main-content clearfix">
              <!-- BEGIN link -->
              » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
              <!-- END link -->
          </div>
        </div>
        <!-- END promot_trafic -->

        <!-- BEGIN switch_forum_rules -->
        <div class="main" id="forum_rules">
          <div class="main-head clearfix">
              <p class="h2">{L_FORUM_RULES}</p>
          </div>
          <table class="main-content frm">
              <tr>
                <!-- BEGIN switch_forum_rule_image -->
                <td class="logo">
                    <img src="{RULE_IMG_URL}" alt="" />
                </td>
                <!-- END switch_forum_rule_image -->
                <td class="rules entry-content">
                    {RULE_MSG}
                </td>
              </tr>
          </table>
        </div>
        <!-- END switch_forum_rules -->

        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}
        <!-- END switch_user_logged_in -->

        <!-- BEGIN switch_image_resize -->
        <script type="text/javascript">
        //<![CDATA[
        $(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
        //]]>
        </script>
        <!-- END switch_image_resize -->

        <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

    le css

    Code:
    .post{
          background-color:#F5F5F5;
          border-style: none !important;
          font-weight: normal;
        }

        .paged-foot clearfix{
          background: #cbceff;
                    color: #fff;
        }

        .options{
        float:right;
          text-align:right;
       
        }

                .forum {
                    width: 900px;
          margin-right:auto;
          margin-left:auto;
                    font-weight: normal;
                }
                .titre-sujet {
                    font-size: 25px;
                    background: #cbceff;
                    color: #fff;
                    text-align: center;
                    padding: 5px;
                    font-variant:small-caps;
          margin-bottom:10px;
                }

        .titre-sujet2 {
                    font-size: 15px;
                    background: #cbceff;
                    color: #fff;
                    text-align: center;
                    padding: 5px;
                    font-variant:small-caps;
          margin-bottom:10px;
                }

                .bubble {
                    float: left;
                    width: 660px;
                    padding: 10px;
                    background: white;
                    color: #676767;
                    position: relative;
                    border: 2px solid #CCCACB;
                    margin-bottom: 10px;
                    font-family:'Josefin Sans', sans-serif;
                    font-size: 13px;
                    font-weight: normal;
                }
                .arrow-shape {
                    overflow: hidden;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    right: -20px;
                    top: 50px;
                }
                .arrow-shape:after {
                    content: "";
                    position: absolute;
                    width: 70%;
                    height: 70%;
                    left: -50%;
                    background: white;
                    border: 2px solid #CCCACB;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                }
                .colonne-droite {
                    float: right;
                    position: relative;
                }
                .profil {
                    width: 200px;
                    height: 400px;
                    overflow: hidden;
                    position: relative;
                }
             
                .profil > img {
                    width: 100%;
                }
             
                .infos-profil {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: #60f987;
                    text-align: center;
                    transition: all 1s;
                    min-height: 40px;
                    max-height: 30px;
                }
                .infos-profil:before {
                    content: "";
                    position: absolute;
                    background: url('http://image.noelshack.com/fichiers/2015/03/1421505961-img.png') no-repeat;
                    left: 0;
                    right: 0;
                    top: -50px;
                    height: 50px;
                }
                .infos-custom {
                    width: 90%;
                    margin: auto;
                    margin-bottom: 15px;
                    max-height: 180px;
                    overflow: auto;
                }
                .pseudo-rang {
                    position: relative;
                    top: -12px;
                    font-weight: 700;
                    text-transform: uppercase;
                }
                .profil:hover .infos-profil {
                    max-height: 225px;
                }
                .last-edit {
                    margin-top: 15px;
                }
                .post-content {
                    min-height: 360px;
                    font-weight: normal;
                }
                .row {
                    position: relative;
                    font-weight: normal;
                }
                .row:after {
                    content: "";
                    display: block;
                    clear: both;
                    font-weight: normal;
                }
                .mess-info {
                    margin-bottom: 5px;
                }
                .online {
                    position: absolute;
                    top: 15px;
                    right: -3px;
                    z-index: 5;
                }
             
              .pagination{
              position:relative;
        background: #cbceff;
                    color: #fff;}
        .repondre{
        position:relative;
          width:100%
            height:20px;
        }



    Demande de présentation de méssage Sans_t14
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 25 Jan 2015 - 14:09

    Me revoilà :)

    Dis nous si avec ce CSS là tu obtiens ce que tu veux :)
    Code:
    .post {
        background-color: #F5F5F5;
        border-style: none !important;
        font-weight: normal;
    }

    .paged-foot clearfix {
        background: #cbceff;
        color: #fff;
    }

    .options {
        float: right;
        text-align: right;
    }

    .forum {
        width: 900px;
        margin-right: auto;
        margin-left: auto;
        font-weight: normal;
    }

    .titre-sujet {
        font-size: 25px;
        background: #cbceff;
        color: #fff;
        text-align: center;
        padding: 5px;
        font-variant: small-caps;
        margin-bottom: 10px;
    }

    .titre-sujet2 {
        font-size: 15px;
        background: #cbceff;
        color: #fff;
        text-align: center;
        padding: 5px;
        font-variant: small-caps;
        margin-bottom: 10px;
    }

    .bubble {
        float: right;
        width: 660px;
        padding: 10px;
        background: white;
        color: #676767;
        position: relative;
        border: 2px solid #CCCACB;
        margin-bottom: 10px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 13px;
        font-weight: normal;
    }

    .arrow-shape {
        overflow: hidden;
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        top: 50px;
    }

    .arrow-shape:after {
        content: "";
        position: absolute;
        width: 70%;
        height: 70%;
        right: -50%;
        background: white;
        border: 2px solid #CCCACB;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .colonne-droite {
        float: left;
        position: relative;
    }

    .profil {
        width: 200px;
        height: 400px;
        overflow: hidden;
        position: relative;
    }

    .profil > img {
        width: 100%;
    }

    .infos-profil {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #60f987;
        text-align: center;
        transition: all 1s;
        min-height: 40px;
        max-height: 30px;
    }

    .infos-profil:before {
        content: "";
        position: absolute;
        background: url('http://image.noelshack.com/fichiers/2015/03/1421505961-img.png') no-repeat;
        left: 0;
        right: 0;
        top: -50px;
        height: 50px;
    }

    .infos-custom {
        width: 90%;
        margin: auto;
        margin-bottom: 15px;
        max-height: 180px;
        overflow: auto;
    }

    .pseudo-rang {
        position: relative;
        top: -12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .profil:hover .infos-profil {
        max-height: 225px;
    }

    .last-edit {
        margin-top: 15px;
    }

    .post-content {
        min-height: 360px;
        font-weight: normal;
    }

    .row {
        position: relative;
        font-weight: normal;
    }

    .row:after {
        content: "";
        display: block;
        clear: both;
        font-weight: normal;
    }

    .mess-info {
        margin-bottom: 5px;
    }

    .online {
        position: absolute;
        top: 15px;
        right: -3px;
        z-index: 5;
    }

    .pagination {
        position: relative;
        background: #cbceff;
        color: #fff;
    }

    .repondre {
        position: relative;
        width: 100%;
        height:20px;
    }

    Gladou
    Gladou
    MasculinAge : 29Messages : 114

    Lun 26 Jan 2015 - 20:08

    Cool c'est juste parfait! merci infiniment



    Demande de présentation de méssage Sans_t14
    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Avr 2024 - 2:48