How to make this design of the widgets

How to make this design for some of the widgets like: Latest topics and some personal widgets? I mean each topic to be in such round row cell.

Hello @sunshine_222,

Go to Administration Panel > Display > Portal > mod_recent_topics

Replace the entire template with the following code.

Code:

<!-- BEGIN scrolling_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catLeft" height="25">
 <span class="genmed module-title">{L_RECENT_TOPICS}</span>
 </td>
 </tr>
 <tr>
 <td class="row1" align="left" id="comments_scroll_div">
 <!-- BEGIN recent_topic_row -->
 <a class="recentTopic" onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a>

 <!--
 <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
 -->
 <!-- END recent_topic_row -->
 </td>
 </tr>
</table>

<script type="text/javascript">
//<![CDATA[
$(function(){
 div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}', 'genmed');
});
//]]>
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catHead" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
 </tr>
 <tr>
 <td class="row1" align="left"><span class="gensmall">
 <!-- BEGIN recent_topic_row -->
 <a class="recentTopic" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>

 <!--
 <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 -->
 </span></td>
 </tr>
</table>
<!-- END classical_row -->

Save and publish.


Then go to Display > Colors > CSS stylesheet

Paste the codes below and submit.

Code:

.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}
.recentTopic:hover {
background-color: #D8DEDE;
}
.recentTopic {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

Thank you very much, Ange Tuteur, it really works! But is it possible to combine it somehow with this script, so my new topics could be numbered with these colored buttons?

http://s1036.photobucket.com/user/a1tinhgia3/media/image/list.gif.html

the script

in AP/Display/Templates/General/overall_header

this code

Code:

   <td valign="top" width="{C1SIZE}">
                                  <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                  </div>
                              </td>

should be replaced by this

Code:

   <td valign="top" width="100%">
                                  <div id="center">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                  </div>
                              </td></tr><tr>

after that in AP/Display/Templates/Portal/mod_recent_topics
all should be replaced by this

Code:

   <style>
    div.title {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-align:center;
    }
    </style>
    <!-- BEGIN classical_row -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
    <thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
    <div class="ist">Latest Topics</div>
    </th></tr></thead>
    <tr>
    <td style="padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
    <table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">

    <tr><td class="catHead" colspan="2" width="50%">
    <div class="title"><font color="black">Topic</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">History</font></div>
    </td>
    <td class="catHead" colspan="1" width="25%">
    <div class="title"><font color="black">Written by</font></div>
    </td></tr>

    <tr valign="top">
    <td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://illiweb.com/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="50%">

    <!-- BEGIN recent_topic_row -->
    <a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

    <!-- END recent_topic_row -->
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <span class="gensmall">
    <!-- BEGIN recent_topic_row -->
    <img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
    {ON} {classical_row.recent_topic_row.S_POSTTIME}
    <br><!-- END recent_topic_row -->
    </span>
    </td>
    <td style="border-top: 0px none; padding: 0px; line-height: 17px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
    <!-- 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 -->
    <!-- BEGIN recent_topic_row -->
    <img src="http://www.birazkisisel.com/wp-content/plugins/wp-favorite-posts/img/star.png">
    <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
    <br><!-- END recent_topic_row -->

    </td>
    </tr></table></td></tr></tbody></table>
    <!-- END classical_row -->

Please, try to help me somehow!

So, you want to number the topics in latest topics ? If so, try this :

Go to Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the homepage

Code:

$(function() {
  for (var i=0, f=1, a=document.getElementsByTagName('A'); i<a.length; i++) {
    if (/recentTopic/.test(a[i].className)) {
      var n = document.createElement('SPAN');
      n.innerHTML = f, n.className = 'topicNumber topic-'+f;
      a[i].insertBefore(n, a[i].firstChild);
      f++;
    }
  }
});

Then go to Display > Colors > CSS stylesheet

Paste the code below :

Code:

.topicNumber {
  color:#FFF;
  background:#999;
  border-radius:3px;
  display:inline-block;
  padding:1px 3px;
  margin-right:3px;
}
.topicNumber.topic-1 { background:#F60 }
.topicNumber.topic-2 { background:#F60 }
.topicNumber.topic-3 { background:#0C0 }
.topicNumber.topic-4 { background:#0C0 }
.topicNumber.topic-5 { background:#06F }
.topicNumber.topic-6 { background:#06F }
.topicNumber.topic-7 { background:#C3C }
.topicNumber.topic-8 { background:#C3C }

To color the numbers use the following code :

Code:

.topicNumber.topic-# { background:#C3C }

and change the # to the number of the topic.

Thank you, Ange Tuteur!
But there are few problems:

- The colours in the script has 3 symbols (#F60), while in the drawing programs they are with 6. How to choose the exact colour?

- Is it possible to use these coloured buttons from the script - http://s1036.photobucket.com/user/a1tinhgia3/media/image/list.gif.html,
instead of this one - http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png

- I've put the script, but it doesn't work.

#F60 is shorthand hex for #FF6600

Put the placement of your script to "In all the pages", I noticed that something on your homepage is causing an error. I can't pinpoint what it is though.

Is it possible than to add our little buttons like these to replace this icon?
http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png

>#F60 is shorthand hex for #FF6600
Am I right, that there're appearing #??? like this, only when the symbols are doubled?

Yes, I have problems in the forum with the scripts of the toolbar and the position of the main menu. It's still didn't fix. I've already post my request for help.

I've marked "In all the pages" and now it works!

One more question, how to remove the little icon, in case, that I don't want to leave it there?

Find this in your CSS :

Code:

.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}

and replace it with this :

Code:

.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 2px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9;
}

Thank you, it works, but the coloured "buttons" are not centered in the vertical. How to fix it?

Try adding this to your CSS :

Code:

.recentTopic { padding:3px !important }
.topicNumber { text-shadow:none }

Thank you very much, Ange Tuteur! You're great! Now all works perfectly!

Solved => Archived