The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum Widget Design.

View previous topic View next topic Go down

In progress Forum Widget Design.

Post by Zuke on November 9th 2014, 8:14 pm

Hey there, is there a way I can redesign the widgets, if so can you give me a code what will make them look like this!

How I want my Latest Topic Widget design to look:    http://prntscr.com/54ozus


Please try give me the nearest thing to make it look like this! Thanks!


-Luke
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

In progress Re: Forum Widget Design.

Post by Ange Tuteur on November 9th 2014, 11:52 pm

Hello Luke Spike,

This is the closest I can give you :
Go to Administration Panel > Display > Templates > Portal > mod_recent_topics Edit

Replace the template by :
Code:
<!-- BEGIN classical_row -->
<div class="module main">
<style type="text/css">
a.topic-block {
  display:inline-block;
  color:#FFF !important;
  font-size:9px;
  font-weight:bold;
  text-decoration:none;
  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
  background:#888;
  border-radius:3px;
  padding:3px;
  margin:3px;
}
</style>
 <div class="main-content" id="recentTopics">
          <h3>{L_RECENT_TOPICS}</h3>
 <!-- BEGIN recent_topic_row -->
 <a href="{classical_row.recent_topic_row.U_TITLE}" class="topic-block">{classical_row.recent_topic_row.L_TITLE}</a>
 <!-- END recent_topic_row -->
 </div>
<script type="text/javascript">
(function() {
  var a = document.getElementById('recentTopics').getElementsByTagName('A'),i;
  for (i=0; i<a.length; i++) {
    var r = Math.floor(Math.random() * 6);
    if (r==0) a[i].style.background = '#5491FC';
    if (r==1) a[i].style.background = '#BDE716';
    if (r==2) a[i].style.background = '#FF57FF';
    if (r==3) a[i].style.background = '#01FF00';
    if (r==4) a[i].style.background = '#FFEB00';
    if (r==5) a[i].style.background = '#00B8FF';
  }
})();
</script>
</div>
<!-- END classical_row -->

Save and publish Add


Then go to Modules > Forum widgets management > and edit Edit recent topics

Make sure "activate scrolling" is set to "No" and save.


Result :
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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