The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

scroll recent topics

3 posters

Go down

scroll recent topics Empty scroll recent topics

Post by chuckorion March 16th 2016, 9:15 pm

Please how can i put a scroll bar on recent topics widget at the portal. Like you have here.
avatar
chuckorion
Forumember

Posts : 38
Reputation : 3
Language : English

Back to top Go down

scroll recent topics Empty Re: scroll recent topics

Post by Take Notes March 16th 2016, 9:43 pm

An wrote:Here you go, change the template to the one below.

Code:
        <!-- BEGIN scrolling_row -->
            {MARQUEE_JS_SRC}
            <table class="forumline genmed" width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                            <td class="catLeft" height="25">
                                    <span class="genmed module-title">{L_RECENT_TOPICS}</span>
                            </td>
                    </tr>
                    <tr>
                            <td class="row1" style="height:{SCROLL_HEIGHT}px;">
                                <div class="marquee" align="left" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
                                    <!-- BEGIN recent_topic_row -->
                                        »&nbsp;<a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a><br />
                                        <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}&nbsp;
       
                                        <!-- BEGIN switch_poster -->
                                        <a 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 -->
                                    <!-- END recent_topic_row -->
                                </div>
                            </td>
                    </tr>
            </table>
            <script>
                $(".marquee").marquee();
            </script>
        <!-- END scrolling_row -->
        <!-- BEGIN classical_row -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <td class="catHead" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
          </tr>
          <tr>
              <td class="row1" align="left"><div id="recent_topic_list" class="gensmall">
              <!-- BEGIN recent_topic_row -->
              » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /><img src="{ICON_TIME}" alt="" />{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></td>
          </tr>
        </table>
        <!-- END classical_row -->


Add the CSS below to your stylesheet.

Code:
        #recent_topic_list {
          height:200px;
          overflow-y:auto;
        }
       
        #recent_topic_list::-webkit-scrollbar {
          width:6px;
        }
       
        #recent_topic_list::-webkit-scrollbar-track {
          background:rgba(0, 0, 0, 0.1);
        }
       
        #recent_topic_list::-webkit-scrollbar-thumb {
          background:#999;
        }

Make sure you publish the template. Wink
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

scroll recent topics Empty Re: scroll recent topics

Post by chuckorion March 16th 2016, 9:45 pm

please where do i change the template?
avatar
chuckorion
Forumember

Posts : 38
Reputation : 3
Language : English

Back to top Go down

scroll recent topics Empty Re: scroll recent topics

Post by Take Notes March 16th 2016, 9:46 pm

mod_recent_topics

But make sure you have the same template as Diana. She posted hers here:
https://help.forumotion.com/t146257-2-qs-about-latest-topics-widget
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

scroll recent topics Empty Re: scroll recent topics

Post by Ange Tuteur March 16th 2016, 10:15 pm

^^ As long as his forum version is phpbb2 it should work. Note that if it's otherwise you should post the mod_recent_topics template that's located under Admin Panel > Display > Templates > Portal.

FYI You must be logged into the forum's foundation account to access the templates. So if you don't see the templates under the Display tab you're probably not logged into the foundation account.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum