[Solved] Recent Topics Code

Hi,

I was wondering how to make a recent topics widget like the one on this forum because it looks really cool.

Regards,

Ultron

Hi,

I have another question. I've been playing around with codes to show avatars before the recent posts like on this forum but it makes my forum lag and the avatars stretch out. Could someone tell me how they coded the avatars on here to show before the recent posts on the forum?

Regards,

Ultron

Just go in administration panel -> Portal & Widgets -> Forum widgets managment.
Activate that and add recent topic widget.

Zyon, I want to have avatars next to the recent topics like the widget here.

That is in javascript (I think), i don't know that code, sorry. Wait Nep. He know

Change mod_recent_topics template with following code.

Code:

[panda=html]  
    <!-- BEGIN scrolling_row -->
    <div class="module main">
     <div class="main-head"><div class="h3">Recent Topics</div></div>
        <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; overflow: visible;">
            <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
                <!-- BEGIN recent_topic_row -->
                <li class="clearfix">
                    <!-- BEGIN switch_poster -->
                    <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                        <img src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini"
                           style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);
                                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">
                    </a>
                    <!-- END switch_poster -->
                    <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                        <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                           onmouseout="document.getElementById('comments_scroll_container').start();" class="ipsType_small" style="font-size: 12px;"
                           href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE} - criado em {scrolling_row.recent_topic_row.S_POSTTIME}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}
                        </a>
                        <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                            <!-- BEGIN switch_poster -->
                            <a onmouseover="document.getElementById('comments_scroll_container').stop();"
                               onmouseout="document.getElementById('comments_scroll_container').start();"
                               href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}
                            </a>
                            <!-- END switch_poster -->

                            <!-- BEGIN switch_poster_guest -->
                            {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->

                             - {scrolling_row.recent_topic_row.S_POSTTIME}
                        </p>
                    </div>
                </li>
                <!-- END recent_topic_row -->
     </ul>
    </div>
    </div>

    <script type="text/javascript">
    //<![CDATA[
    $(function(){
     div_marquee('mod_recent_topics', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
    });
    //]]>
    </script>
    <!-- END scrolling_row -->

    <!-- BEGIN classical_row -->
    <div class="module main">
     <div class="main-head"><h3>Recent Topics</h3></div>
     <div id="mod_recent_topics" class="main-content _sbcollapsable" style="margin: 0px; overflow: visible;">
            <ul class="ipsList_withminiphoto" style="margin: 0px !important;">
                <!-- BEGIN recent_topic_row -->
                <li class="clearfix">
                    <!-- BEGIN switch_poster -->
                    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="ipsUserPhotoLink left">
                        <img src="http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini"
                           style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);
                                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">                
                    </a>
                    <!-- END switch_poster -->
                    <div class="list_content" style="margin-left: 40px; word-wrap: break-word;">
                        <a href="{classical_row.recent_topic_row.U_TITLE}" class="ipsType_small" style="font-size: 12px;"
                           title="{classical_row.recent_topic_row.L_TITLE} - criado em {classical_row.recent_topic_row.S_POSTTIME}">{classical_row.recent_topic_row.L_TITLE}</a>
                        <p class="desc ipsType_smaller" style="color: rgb(119, 119, 119);">
                            <!-- BEGIN switch_poster -->
                            <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" style="font-size: 11px !important;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                            <!-- END switch_poster -->

                            <!-- BEGIN switch_poster_guest -->
                            {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                            <!-- END switch_poster_guest -->

                            &nbsp;- {ON} {classical_row.recent_topic_row.S_POSTTIME}
                        </p>
                    </div>
                </li>
                <!-- END recent_topic_row -->
     </ul>
    </div>
    </div>
    <!-- END classical_row -->
    <script type="text/javascript">
    //<![CDATA[
    $(function () {
        /* DOM chached for fast execution! */
        var oTarget = $('#mod_recent_topics').find('ul.ipsList_withminiphoto > li');

     oTarget.each(function () {
            oThis = $(this); /* DOM chached for fast execution! */
            var load_container = oThis.children('a');
     var UserURL = load_container.attr('href');
            var def_img = "http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"; /* In case request profile errors! */
            var sHtml = '<img src="' + def_img + '" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini" ' +
                        '    style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255);' +
                       '        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">';
            var UserIMG = sessionStorage.getItem(UserURL); /* Gets the avatar saved in local storage (Fastest!)*/

            /* If avatar alread saved, then no request member profile! */
            if(UserIMG) {
                load_container.children('img').attr('src', UserIMG);
            } else {
                /* if not, then only request per session!!! */            
                load_container.load(UserURL + ' #profile_tabs p img', function() {
                    var imgTag = load_container.children('img');
                  
                   if (imgTag.length == 0) {
                        load_container.append(sHtml);
                        /* Saves the default avatar in local storage */
                        sessionStorage.setItem(UserURL, def_img);
                    } else {
                        imgTag.attr('class','ipsUserPhoto ipsUserPhoto_mini');
                        imgTag.css({ 'width' : '30px', 'height' : '30px', 'border' : '1px solid rgb(213, 213, 213)', 'padding' : '1px',
                           'background' : 'none repeat scroll 0% 0% rgb(255, 255, 255)', 'box-shadow' : '0px 2px 2px rgba(0, 0, 0, 0.1)' });
                        /* Saves the member avatar in local storage */
                        sessionStorage.setItem(UserURL, imgTag.attr('src'));
                    }
                });
            }
     });
    });
    //]]>
    </script>

Thanks, this looks cool.

So is this solved?

can i have recent topics and top poster and most viewed topic on below the logo ?

forum version phpbb3 ?

any help ?

Thanks waiting for ur response

is posible on the phpbb3 with help jquery editing

unleashed wrote:can i have recent topics and top poster and most viewed topic on below the logo ?

forum version phpbb3 ?

any help ?

Thanks waiting for ur response

Like this?
But it's only for phpbb and punbb...

Solved