Latest topics (a new system) Is it possible can be like this ?

Hi,
Recent topics (a new system) Is it possible can be like this ?
10 topics in the left and the other 10 topics in the right.
For example,


This idea is very important to me, Thanks.

What do you mean?

what he is trying to put actually 20 links with the last topics but 10 on a side and 10 on another side

I belive is posible..

Richard E wrote:what he is trying to put actually 20 links with the last topics but 10 on a side and 10 on another side

I belive so posible..

Exactly, but how ?

...The left and the right side is the same

robot_boy18 wrote:...The left and the right side is the same

That was only an example.
My idea is 20 links with the last topics (10 on a side and 10 on another side).

I don't think it's possible...Btw it will slow your forum loading speed

The author of this topic PM'd me to try this for him. So i did.

It would be very differcult with the current layout of the recent topics system in that tutorial. So i had to design my own template.

So first off you'll need to change your mod_recent_topics template to this:

Code:


<!-- BEGIN scrolling_row -->
<div class="module main">
   <div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
   <div class="main-content" id="comments_scroll_div">
      <!-- BEGIN recent_topic_row -->
      » <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
      <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY} 

      <!-- 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}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
      <!-- END switch_poster -->

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

      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
      <!-- END recent_topic_row -->
   </div>
</div>

<script type="text/javascript">
//<![CDATA[
$(function(){
   div_marquee('comments_scroll_div', '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>{L_RECENT_TOPICS}</h3></div>
   <div class="main-content">
            <div class="genrt">
          <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3">
            <tbody>
              <tr style="background-color: #666; color: #FFF; font-weight: bold; padding: 3px; text-align: center;"><td>Topics</td><td>Topics</td></tr>
              <!-- BEGIN recent_topic_row -->

            <tr class="rtrow">
              <td>» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a> </td><td class="topics2" style="text-align: center"> </td>
            </tr>
      <!-- END recent_topic_row -->

              </tbody></table></div>
   </div>
</div>
<!-- END classical_row -->


Please note, that this is NOT as heavily styled as the previous template. If you want it to look good, you have to do that yourself. This will look very basic, i am only providing the HTML and some simple styling to be able to do this feature.
ALSO, since the OP only wants the topic titles, then that is all i have provided. But yes, it is possible to insert the times and author in to it.

You can style it in CSS with the class name of 'rtrow' for the table rows.
And class of 'genrt' for the whole thing.
Also feel free to change the styling wthin the HTML.

Next you must choose 20 topics for your recent topics widget to show. I say this because thats what the OP wanted. If you want different change it, and then change the Javascript.

Here is the javascript:

Code:


$(function() {
var row=$('.rtrow').get();
var x=$('.topics2').get();
 for (i=10;i<row.length;i++) {
    var element=row[i];
    var td=x[i-10];
    $(td).html(element);
}
});

Tested and works.
Also, im sure you've guessed you had to have followed the recent topics new system tutorial first.

It works very good!!

- How i remove Latest topics head ?



- I believe that the topic should be in one line instead of two lines:


by using this code:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
but where i put this code in your template ?


- how i put border between topics like this ?




Thanks LGforum.

For your first question try this as the template instead:

Code:


       
        <!-- BEGIN classical_row -->
        <div class="main">
          <div class="main-content">
                    <div class="genrt">
                  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3">
                    <tbody>
                      <tr style="background-color: #666; color: #FFF; font-weight: bold; padding: 3px; text-align: center;"><td>Topics</td><td>Topics</td></tr>
                      <!-- BEGIN recent_topic_row -->
       
                    <tr class="rtrow">
                      <td>» <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a> </td><td class="topics2" style="text-align: center"> </td>
                    </tr>
              <!-- END recent_topic_row -->
       
                      </tbody></table></div>
          </div>
        </div>
        <!-- END classical_row -->

(i didn't test this since i have uninstalled it on my board.)

for your second question. Not really much you can do. If the topic title is too long to fit on one line then... well its too long to fit on one line.
Though removing the outer box, (which you have asked in your first question) will increase the overall width and hopefully solve this issue.

for the third question. the rows can be styled in the CSS using the class of rtrow.

So like this:

Code:


.rtrow {
 border-bottom: 1px dotted #000;
}


- About remove Latest topics head: It Works fine now.
- but about border between topics: The code doesn't work.
- and about the topic should be in one line instead of two lines:
As i said, this code was good in the Previous template.

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

but I tried using it with your template, and it works very good but the Profile in posts is not correct. So i want the right place to add this code, or by JavaScript.

here with the code, The topic title in one line :


and here without using it, The topic title in two lines :


As you see, it works very good but the Profile in posts is not correct. So i want the right place to add this code, or by JavaScript ?

Code:


.genrt .rtrow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px dotted #000;
}


Try that in your CSS instead then.

Still doesn't work, the topic title nor border.

I have made some changes and it works very good now!

But still there one problem, when i get a private message (popup) i find that the 20 topics in one side (left side) but it works again when i make refresh.
I think another javascript code is needed ?

Does anyone have any solutions to this problem ?

How To Add This Code?????????