Cerere cod CSS pentru Avatar la Ultimile Mesaje.

Buna Ziua!
La multi ani tuturor copiilor de 1 iunie.
Am facut acest post ca sa va cer codul CSS pentru Avatare la Ultimile Mesaje(versiunea punbb).

Gata.

Incearca:

Cod:

.mini_ava{float:left}
.mini_ava img{width:30px;height:30px;margin:8px 5px;padding:1px;border:1px solid #D5D5D5;background:white;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);box-shadow:0 2px 2px rgba(0,0,0,0.1)}
.mini_ava img:hover{border-color:#a1a1a1;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);-moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);box-shadow:0 2px 2px rgba(0,0,0,0.2)}


Am observat ca am acest cod in index_box.

Cod:

 <!-- BEGIN switch_topic_title -->
 <a href="" class="ipsUserPhoto">
                                <img src="http://invision-virus.com/forum/public/style_images/light/profile/default_large.png" alt="User image" class="ipsUserPhoto_mini">
                            </a>
 <!-- END switch_topic_title -->

Cum as putea sa fac sa apara avatarul fiecarui membru, nu doar o imagine la toti?

Elimina acel cod, nu este bun.

Adauga acest cod Javascript, amplasandu-l pe toate paginile:

Cod:

 $(function(){
        
            if(!window.localStorage) return;
        
            // Avatar par défaut
            var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
        
            // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour
            var caching_time= 24*60*60*1000;
        
            // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute
            var caching_error= 60*1000;
        
            var set_avatar= function(id) {
                $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
            };
        
            var get_avatar= function(id) {
                if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
                {
                    localStorage.setItem('d_ava'+id, default_avatar);
                    $.get('/u'+id, function (d){
                        localStorage.setItem('t_ava'+id,+new Date);
                        localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                        set_avatar(id);
                    });
                }
                return localStorage.getItem('d_ava'+id);
            };
        
            var to_replace= {};
        
            $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
                to_replace[$(this).attr('href').substr(2)]= 1;
                $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
            });
        
            for(i in to_replace)
            {
                set_avatar(i);
            };
        
        });

Apoi adaugi acest cod CSS in Foaia de stil CSS:

Cod:

 .mini_ava {
          float: left;
        }
        .mini_ava img {
          width: 40px;
          height: 40px;
          margin: 0 5px;
          border-radius: 10px;
          transition: all 2s;
          -moz-transition: all 2s;
          -webkit-transition: all 2s;
          -o-transition: all 2s;
        }
        .mini_ava img:hover
        {
          width: 80px;
          height: 80px;
        }

Daca nu merge, cauti in index_box:

Cod:

{catrow.forumrow.TOPICS}

Si adaugi dupa el:

Cod:

<!-- Column for Last Post -->
 <td class="tcr">
 <!-- Backup
 <span>
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 {catrow.forumrow.USER_LAST_POST}
 </span>
 -->
 <!-- BEGIN switch_topic_title -->
 <a href="" class="ipsUserPhoto">
        <img src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png" alt="User image" class="ipsUserPhoto_mini">
    </a>
 <!-- END switch_topic_title -->
 <ul class="last_post ipsType_small">
 <li>
 <!-- BEGIN switch_topic_title -->
 <a title="{catrow.forumrow.LATEST_TOPIC_TITLE}" href="{catrow.forumrow.U_LATEST_TOPIC}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
 <!-- END switch_topic_title -->
 </li>
 <li class="desc lighter blend_links">{catrow.forumrow.USER_LAST_POST}</li>
 </ul>
 </td>              

Urmand sa adaugi la sfarsitul template-ului:

Cod:

<style>    .tcr .ipsUserPhoto {
        float: left;
        margin-top: 3px;
    }
    .ipsUserPhoto_mini {
        height: 30px;
        width: 30px;
    }
    .ipsUserPhoto {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D5D5D5;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        padding: 1px;
    }
    .desc.lighter, .desc.lighter.blend_links a {
        color: #A4A4A4;
    }
    .ipsUserPhoto img {
    height: 40px;
    width: 40px;
}
  </style>
  
    <script type="text/javascript">
    //<![CDATA[
    var target = $('td.tcr').find('li.desc.lighter.blend_links');
    target.each(function(index){
        var UserURL = $(this).find('a.gensmall').attr('href');
        var Desc = $(this).parent().find('li a');
      
        if (Desc.text() == '') {
            Desc.text('Not yet posted');
        }
        if($.trim(UserURL) !== '') {
            var found = $(this).parent().parent().find('.ipsUserPhoto_mini');
            var caching_time = 24*60*60*1000;
            var caching_error = 60*1000;
          
            if(localStorage.getItem('avatar_date' + index) <+new Date-caching_time || localStorage.getItem('avatar_date' + index) <+new Date-caching_error) {
                $.get(UserURL, function(data){
                    var avtPrf = $('#profile_tabs p img', data).attr('src');
                    /*
                    if(avtPrf.length > 0) {
                        found.attr('src', avtPrf);
                    }*/
                    found.attr('src', avtPrf);
                    localStorage.setItem('avatar_img' + index, avtPrf);
                    localStorage.setItem('avatar_date' + index, +new Date);
                });
            } else {
                found.attr('src', localStorage.getItem('avatar_img'+ index));
            }
        };
    });
    //]]>
</script>
 

Nu intelegi, eu as vrea ca sa fie editat codul pe care l-am pus eu mai sus.

Buna ziua,

Incercati sa inlocuiti acest cod:

Cod:

<!-- BEGIN switch_topic_title -->
 <a href="" class="ipsUserPhoto">
                                <img src="http://invision-virus.com/forum/public/style_images/light/profile/default_large.png" alt="User image" class="ipsUserPhoto_mini">
                            </a>
 <!-- END switch_topic_title -->

Cu:

Cod:

<!-- BEGIN switch_topic_title -->
<div class="lastavatar">
                                {postrow.displayed.POSTER_AVATAR}<br />
</div>
 <!-- END switch_topic_title -->

Acum nu-mi mai apare.

Am sa va rog sa postati link-ul forumului actual pe care doriti sa efectuati modificarile.

http://board.power-rpg.com/




Edit: Daca se poate acum sa raspundeti ca sa pot inchide forumul, pentru a lucra la el in continuare.

Ati incercat sa urmati acest tutorial ?