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.

Latest Topic Scrollbar

Go down

Tutorial Latest Topic Scrollbar

Post by Ape 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.

ACP = Admin Control Panel. Display Tab Templates Portal

Find: mod_recent_topics
Replace with:
        <!-- 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">
                    <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 -->
        <script type="text/javascript">
        <!-- 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 -->
        <!-- 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 -->

Save and publish.

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

#recent_topic_list {
        #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 }


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.

Latest Topic Scrollbar Left1212Latest Topic Scrollbar Center11Latest Topic Scrollbar Right112
Latest Topic Scrollbar Ape_b110
Latest Topic Scrollbar Ape1010

Male Posts : 19211
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

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