FM Design

Design and development for Forumotion forums.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Fri 08 Jun 2018, 11:02

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
See more
Top posting users this month

Top Achievers
Ange Tuteur
 
SLGray
 
Valoish
 
Luffy
 
Wilson
 
Van-Helsing
 
Niko!
 
Ace 1
 
JerriLeah7
 
Rhino.Freak
 
Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17
Keywords

FireFox  translations  fa_theme_selector  Demo  ideas  feedback  plugin  fa_night_container  beta-testers  Dutch  Mozilla  tool  Update  1  search  phpBB3  left  wio_group_legend  46  German  editor  fa_personal_emoticons_list  line-break  chatBox  recent_topics_classical  message  


About Last topic Widget

 :: Coding, Resources, and Plugins :: Coding & General Questions :: Questions Archive

View previous topic View next topic Go down

Solved About Last topic Widget

#9128
avatar
omarpop23

Gender : Male
Age : 23
Posts : 140
Points : 1164
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Sun 15 May 2016, 07:33

Can you share how to make last topic Widget look like FMdesign Wink

Solved Re: About Last topic Widget

#9129
avatar
Luffy

Gender : Male
Age : 24
Posts : 291
Points : 1967
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
View user profile https://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Sun 15 May 2016, 07:51

Hello you can do that by following the below steps:
Go to: Admin Panel > Display > Templates > Portal > mod_recent_topics
and replace the entire template with this one:
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 -->

Then go to your CSS and add this code:
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;}

That should do what you want! Wink

--------

Solved Re: About Last topic Widget

#9131
avatar
Van-Helsing

Gender : Male
Age : 43
Posts : 853
Points : 2752
Reputation : 84
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Sun 15 May 2016, 08:01

Hello,
You can also embed the css in the template to reduce the css stylesheet size by adding the widget's css in the template mod_recent_topics. Wink

Code:
        <!-- BEGIN scrolling_row -->
        {MARQUEE_JS_SRC}
<style>
        #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;}
</style>
        <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 -->

--------

Solved Re: About Last topic Widget

#9272
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4734
Points : 9906
Reputation : 2368
Location : Macungie, PA
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 15 May 2016, 12:01

I suppose I could always make a simple tutorial about it, but the codes posted above should work for you. Think


Personally, I prefer the scroll bar over the auto-scrolling, because the auto-scrolling annoys the you-know-what out of me, as I have no control over the topics shown to me other than stopping them on mouse over. It's why I changed the widget on the support forum.. Razz

--------

Ange Tuteur
Tips and Tricks • Contact Me

Solved Re: About Last topic Widget

#9311
avatar
omarpop23

Gender : Male
Age : 23
Posts : 140
Points : 1164
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Sun 15 May 2016, 14:54

thank you all for those answers, but i want to decrease space between each title and remove that arrow before the title

Solved Re: About Last topic Widget

#9314
avatar
Van-Helsing

Gender : Male
Age : 43
Posts : 853
Points : 2752
Reputation : 84
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Sun 15 May 2016, 16:24

Hello,
What is your forum link?

--------

Solved Re: About Last topic Widget

#9318
avatar
omarpop23

Gender : Male
Age : 23
Posts : 140
Points : 1164
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Sun 15 May 2016, 18:19

Solved Re: About Last topic Widget

#9940
avatar
omarpop23

Gender : Male
Age : 23
Posts : 140
Points : 1164
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Fri 20 May 2016, 08:10

up Very Happy

Solved Re: About Last topic Widget

#9947
avatar
Van-Helsing

Gender : Male
Age : 43
Posts : 853
Points : 2752
Reputation : 84
Location : Somewhere out there!
Language : English, Greek
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : punBB
View user profile http://itexperts.forumgreek.com/

PostVan-Helsing on Fri 20 May 2016, 08:37

Hello,
Replace the template mod_recent_topics with the following code:

Code:
                <!-- BEGIN scrolling_row -->
                {MARQUEE_JS_SRC}
        <style>
                #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;}
        </style>
                <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 -->
                <br/><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 />
                <!-- END switch_poster -->
             
                <!-- BEGIN switch_poster_guest -->
                {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<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 />
             
                <!--
                <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 />
                -->
                <!-- END recent_topic_row -->
                </div>
                </div>
                <!-- END classical_row -->

Then save and publish your template. I just removed some double < br / > codes. Wink

--------

Solved Re: About Last topic Widget

#19780
avatar
Guest
Guest

PostGuest on Tue 23 Aug 2016, 17:49

*** This topic will be closed soon if we don't get any feedback. @omarpop23 Is this solved / still needed? ***

Solved Re: About Last topic Widget

#19920
avatar
omarpop23

Gender : Male
Age : 23
Posts : 140
Points : 1164
Reputation : 24
Location : Egypt
Language : Arabic , English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
View user profile https://www.facebook.com/omarpop23

Postomarpop23 on Wed 24 Aug 2016, 13:50

make topic solved.
sorry for late i was very busy

i add a css code and now it worked well

i make postion: relative; of #recent_topics_classical

Solved Re: About Last topic Widget

#19921
avatar
Guest
Guest

PostGuest on Wed 24 Aug 2016, 13:52

*** Topic solved, locked and archived ***

Solved Re: About Last topic Widget

#0
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

FM Design :: Coding, Resources, and Plugins :: Coding & General Questions :: Questions Archive

 
Permissions in this forum:
You cannot reply to topics in this forum
Free forum | © phpBB | Free forum support | Report an abuse | Free forum
Terms of service | Founder tools | Tutorials | Affiliates