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

Zuke
Forumember

Male Posts : 375
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

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 :

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

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