Latest Topic Scrollbar Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

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

    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19151
    Reputation : 1994
    Language : fluent in dork / mumbojumbo & English haha

    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.

    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.





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

    TonnyKamper likes this post