Recent topics appearance

I'd like to change the latest/recent topics appearance to something more like this:


Is it possible?

P.S. If possible, then of course take into account the forum's skin/colors and our widget's width and height - if those matters anyways when creating the code, ijs.

Hello Anzo,

Do you want something like this ?
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below and submit :

Code:

$(function(){
    
       if(!window.localStorage) return;
    
       // Avatar por defecto
        var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
    
       // Tiempo de cache, aqui 24 h * 60 m * 60 s * 1000 ms entonces un día
        var caching_time= 24*60*60*1000;
    
       // Tiempo de cache de un error, ici 60 s * 1000 ms entonces un minuto
        var caching_error= 60*1000;
    
       var set_avatar= function(id) {
            $('.mini_ava2.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= {};
    
       $('#comments_scroll_div a[href^="/u"]').each(function(){
            to_replace[$(this).attr('href').substr(2)]= 1;
            $(this).before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
    
       for(i in to_replace)
        {
            set_avatar(i);
        };
    
   });

Then add this to your stylesheet :
Administration Panel > Display > Colors > CSS stylesheet

Code:

.mini_ava2 > img {
    height: 20px;
    margin-right: 5px;
    width: 20px;
}

I don't see the difference, It's all still the same.

Do you have recent topics scrolling activated ?

No, It's disabled, should I activate it?

EDIT: I activated it and it seems to have taken a form. But, is there a way to make it work without the scrolling activated? Also, is there a way to design to background more like the img i provided in the my post?

EDIT 2: Also, one another note, Can the image before the date just like in the img i provided in my post?

Try replacing the script by :
and disable the scrolling.

Code:

$(function(){
   
      if(!window.localStorage) return;
   
      // Avatar por defecto
        var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
   
      // Tiempo de cache, aqui 24 h * 60 m * 60 s * 1000 ms entonces un día
        var caching_time= 24*60*60*1000;
   
      // Tiempo de cache de un error, ici 60 s * 1000 ms entonces un minuto
        var caching_error= 60*1000;
   
      var set_avatar= function(id) {
            $('.mini_ava2.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= {};
   
  $('.module.main:has(a[href^="/t"]) a[href^="/u"]').each(function(){
            to_replace[$(this).attr('href').substr(2)]= 1;
            $(this).before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
   
      for(i in to_replace)
        {
            set_avatar(i);
        };
   
  });

What do you mean by "the background" ?

Yea, OMG this is so cool.

One last thing: is there a way to change the appearance of the BG? like instead of plain background color to something more like this:



EDIT: also I just noticed the image of user only appear before his name and not before the whole line. Like for instance the image should come before the topic title and the user's nickname, just like in the image above.

Add this to your CSS :

Code:

.mini_ava2 {
  background:#EEE;
  border:1px solid #555;
  float:left;
  display:block;
  margin-right:6px;
  height:20px;
  width:20px;
}

.mini_ava2 img {
  height:20px;
  width:20px;
}

I can notice the changes but that's not what I meant.

I want it to look exactly like in the image above, right now it's like this:

» Jv1391 Sp #11
(IMGhere)by Jv1391 Today at 5:04 pm

While I want it like this

( IMG )» Jv1391 Sp #11
( Here)by Jv1391 Today at 5:04 pm

Try replacing your script by :

Code:

$(function(){
 
      if(!window.localStorage) return;
 
      // Avatar por defecto
        var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
 
      // Tiempo de cache, aqui 24 h * 60 m * 60 s * 1000 ms entonces un día
        var caching_time= 24*60*60*1000;
 
      // Tiempo de cache de un error, ici 60 s * 1000 ms entonces un minuto
        var caching_error= 60*1000;
 
      var set_avatar= function(id) {
            $('.mini_ava2.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= {};
 
  $('.module.main:has(a[href^="/t"]) a[href^="/u"]').each(function(){
            to_replace[$(this).attr('href').substr(2)]= 1;
            $(this).prev().prev().before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
 
      for(i in to_replace)
        {
            set_avatar(i);
        };
 
  });

Yea that worked

Now, the only thing left is that when the topic title is too long, it extends to a 2nd row (naturally) but that pushes the "By USERNAME date" to a third line which then makes it appear below the image. Is there a way to add a margin-left property to this one? so that even if the topic title is long It won't go below the image. I tried to but It's separate with </br> and not a class or an ID.

EDIT: I also mentioned this in the other post, but is there a way to customize (with CSS ofc) the background of each recent topic? Instead of the global plain background that is.

The most you could do is clip the topic title. Add this to your CSS :

Code:

.module.main a[href^="/t"] {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:top;
  width:150px;
}

For that, I am not sure. You can style the background of the widget, but that would require a bit of JS.

Thanks a lot.

About the styling, can you make the JS for it? I'll do the CSS (just tell me the class/IDs i need to use). If it's too much trouble then forget it

Administration Panel > Modules > JavaScript codes management > Create a new script
Title : Your choice
Placement : In all the pages

Code:

$(function(){$('.module.main:has(a[href^="/t"])').addClass('latestTopics')});

CSS :
Display > Colors > CSS stylesheet

Code:

.module.main.latestTopics .main-content { background:#333 }

.module.main.latestTopics is the parent selector for the latest topics widget. You can select any element inside of it.

Is there a way to style each recent topic on it's on just like in the Image? When i set a BG the whole widget takes the BG.

For instance, I want each recent topic area to have borders of It's own, just like in the image. When i added border, the whole widget got border, not only that specific area.

Are you wanting a line to separate the topics ? If so try this :

Replace your script by :

Code:

$(function(){$('.module.main:has(a[href^="/t"]) a[href^="/u"]').next().next().after('<hr class="topicsRule">').remove()});

Add to CSS :

Code:

.topicsRule { border-color:#333 !important }

You mean this script?

Code:

$(function(){$('.module.main:has(a[href^="/t"])').addClass('latestTopics')});

You can replace it, unless you want to keep it. If so, just create a new script, but with the same settings.

Yea, this is exactly what I wannet.

Only thing now, is for some reason I cannot change the background of the widget anymore. Not add specific BG for each topic area, can that be fixed with CSS?

Nvm I can edit the BG lol

I know I'm asking for a lot xD but is there a way to work on each topic BG separately and not the entire widget's?

Should be possible, remove your last script to add the horizontal rule.

Go to Administration Panel > Display > Templates > Portal > mod_recent_topics

Find :

Code:

<!-- BEGIN classical_row -->
 <!-- BEGIN recent_topic_row -->
 » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

 <!-- BEGIN switch_poster -->
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{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 -->

 {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

 <!--
 <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 -->
 <!-- END recent_topic_row -->
<!-- END classical_row -->

Replace by :

Code:

<!-- BEGIN classical_row -->
 <!-- BEGIN recent_topic_row -->
 <div class="topicRow">» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

 <!-- BEGIN switch_poster -->
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{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 -->

                {ON} {classical_row.recent_topic_row.S_POSTTIME}</div><br/>

 <!--
 <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 -->
 <!-- END recent_topic_row -->
<!-- END classical_row -->

Save and publish.


Then use CSS to style it :

Code:

.topicRow {
  border-bottom:1px solid #333;
}

The "classical row" code I have is slightly different that the one you posted, do i replace it anyways?

Code:

<!-- BEGIN classical_row -->
<div class="module main">
   <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
   <div class="main-content">
      <!-- BEGIN recent_topic_row -->
      » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{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 -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
      <!-- END recent_topic_row -->
   </div>
</div>
<!-- END classical_row -->

Replace it with this instead :

Code:

<!-- BEGIN classical_row -->
<div class="module main">
   <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
   <div class="main-content">
      <!-- BEGIN recent_topic_row -->
      <div class="topicRow">» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{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 -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}</div><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
      <!-- END recent_topic_row -->
   </div>
</div>
<!-- END classical_row -->

( modified the portion you posted above )

Nothing happened, It's still the same from before.

Did you save and publish the template ?

Yup

EDIT: Okay, I swear I edited, saved, and published the templates and It didn't work lol I copied the code just now again and did the whole thing all over and suddenly It works >_>

Thanks a bunch dude, it looks sweet.

One last tiny thing, and I know I'm bothering you with my requests lol but how can i reduce the distance between two recent topics? there is this space between topics that I'd like to know how to increase/decrease.

Anzo wrote:Yup

EDIT: Okay, I swear I edited, saved, and published the templates and It didn't work lol I copied the code just now again and did the whole thing all over and suddenly It works >_>

Thanks a bunch dude, it looks sweet.

You're welcome.

Your session may have timed out when you saved the settings. If that happens the changes aren't kept. Is this solved for you now ?

Yes, thank you a lot. Just my last question about the distance between the topics there, can that be reduced?

I didn't see that when I quoted, you ninja'd me ..!

In the index_box template, replace your classical row by :

Code:

<!-- BEGIN classical_row -->
<div class="module main">
   <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
   <div class="main-content">
      <!-- BEGIN recent_topic_row -->
      <div class="topicRow">» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{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 -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}</div>

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
      <!-- END recent_topic_row -->
   </div>
</div>
<!-- END classical_row -->

Save and publish. You'll most likely have to use margins to add spacing as I've removed the last break.

This is the content of my index_box, it doesn't have classical row:

Code:

<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
   <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="main-head">
         <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
         <table cellspacing="0" class="table">
            <thead>
               <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
               </tr>
            </thead>
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tc2">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </tbody>
         </table>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
   <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   </ul>
   <!-- BEGIN switch_delete_cookies -->
   <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Anyway, It's not necessary, the Recent topics looks pretty amazing right now. Thank you so much for your help

Whoops...I meant mod_recent_topics !