How to make this design of the widgets
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
Re: How to make this design of the widgets
Hello @sunshine_222,
Go to Administration Panel > Display > Portal > mod_recent_topics
Replace the entire template with the following code.
Save and publish.
Then go to Display > Colors > CSS stylesheet
Paste the codes below and submit.
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
}
Re: How to make this design of the widgets
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://illiweb.com/fa/pbucket.gif
the script
in AP/Display/Templates/General/overall_header
this code
should be replaced by this
after that in AP/Display/Templates/Portal/mod_recent_topics
all should be replaced by this
Please, try to help me somehow!

http://illiweb.com/fa/pbucket.gif
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://illiweb.com/fa/pbucket.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://illiweb.com/fa/pbucket.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://illiweb.com/fa/pbucket.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://illiweb.com/fa/pbucket.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!
Re: How to make this design of the widgets
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
Then go to Display > Colors > CSS stylesheet
Paste the code below :
To color the numbers use the following code :
and change the # to the number of the topic.
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.
Re: How to make this design of the widgets
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://illiweb.com/fa/pbucket.gif,
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.
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://illiweb.com/fa/pbucket.gif,
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.
Re: How to make this design of the widgets
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.
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.
Re: How to make this design of the widgets
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?

One more question, how to remove the little icon, in case, that I don't want to leave it there?
Re: How to make this design of the widgets
Find this in your CSS :
and replace it with this :
- 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;
}
Re: How to make this design of the widgets
Thank you, it works, but the coloured "buttons" are not centered in the vertical. How to fix it?
Re: How to make this design of the widgets
Try adding this to your CSS :
- Code:
.recentTopic { padding:3px !important }
.topicNumber { text-shadow:none }
Re: How to make this design of the widgets
Thank you very much, Ange Tuteur!
You're great! Now all works perfectly!

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum