Latest Topic Scrollbar

Go down

Tutorial Latest Topic Scrollbar

Post by APE on May 26th 2018, 3:52 am

Latest Topic Scrollbar

We have often been asked how you can make a Latest Topic Scrollbar on your forum's
Well Thanks to @luffy and the help of @Draxion
We now have the codes you have all been looking for.

You must be logged in as the founder.

Templates:
ACP = Admin Control Panel. Display Tab Templates Portal

Find: mod_recent_topics
Replace with:
Code:
        <!-- BEGIN scrolling_row -->
        {MARQUEE_JS_SRC}
        <div class="module main">
        <div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
        <div class="main-content" id="comments_scroll_div">
                    <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
        <!-- BEGIN recent_topic_row -->
        » <a 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 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>
        </div>
        </div>
        <script type="text/javascript">
                $(".marquee").marquee();
        </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 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 />{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 -->

Save and publish.

CSS Files:
ACP = Admin Control Panel. Display Tab Pictures and Colors Colors CSS Stylesheet Tab

Add:
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 }

Save.

Now your done.

Any problems Please feel free to make a thread in the main forum and one of the staff will try and help you.
It may also be a great idea to post a link to this thread so we can find it faster and help you much faster.





avatar
APE
Administrator
Administrator

Male Posts : 13102
Reputation : 1387
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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