Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.aclaro que es el archivo original de la v2.3 + los cambios hechos para los VAGOS COMO YO 
Solo tenes que colocar el recent.php en /Sources
y el Recent.template.php en la carpeta de tu THEMEAcá unas Cap del BloqueY aca esta ManualEn el Recent.php reemplazar desde//Top poster week
hasta la siguiente lineamysql_free_result($request);
por//Top poster week
$starttime = mktime(0, 0, 0, date("n"), date("j")-7, date("Y"));
$starttime = forum_time(false, $starttime);
$request = db_query("
SELECT me.money, me.avatar, me.ID_MEMBER, me.memberName, me.realName, COUNT(*) as count_posts
FROM {$db_prefix}messages AS m
LEFT JOIN {$db_prefix}members AS me ON (me.ID_MEMBER = m.ID_MEMBER)
WHERE m.posterTime > $starttime
AND m.ID_MEMBER != 0
GROUP BY me.ID_MEMBER
ORDER BY count_posts DESC
LIMIT 10", __FILE__, __LINE__);
$context['top_posters_week'] = array();
$max_num_posts = 1;
$context['all_user_week']=0;
while ($row_members = mysql_fetch_assoc($request))
{
$context['top_posters_week'][] = array(
'avatar' => $row_members['avatar'],
'money' => (int) $row_members['money'],
'name' => $row_members['realName'],
'id' => $row_members['ID_MEMBER'],
'num_posts' => $row_members['count_posts'],
'href' => $scripturl . '?action=profile;u=' . $row_members['ID_MEMBER'],
'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row_members['ID_MEMBER'] . '">' . $row_members['realName'] . '</a>'
);
$context['all_user_week']++;
if ($max_num_posts < $row_members['count_posts'])
$max_num_posts = $row_members['count_posts'];
}
mysql_free_result($request);
Reemplazar desde//Top starter
hasta$members_result = db_query(
por//Top starter
$members_result = db_query("
SELECT ID_MEMBER, realName, memberName, topics,money, avatar
FROM {$db_prefix}members
WHERE topics > 0
ORDER BY topics DESC
LIMIT 10", __FILE__, __LINE__);
$context['top_starters'] = array();
$max_num_topics = 1;
$context['all_user_estarted']=0;
while ($row_members = mysql_fetch_assoc($members_result))
{
$context['top_starters'][] = array(
'name' => $row_members['realName'],
'money' => (int) $row_members['money'],
'avatar' => $row_members['avatar'],
'id' => $row_members['ID_MEMBER'],
'num_posts' => $row_members['topics'],
'href' => $scripturl . '?action=profile;u=' . $row_members['ID_MEMBER'],
'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row_members['ID_MEMBER'] . '">' . $row_members['realName'] . '</a>'
);
$context['all_user_estarted']++;
if ($max_num_topics < $row_members['topics'])
$max_num_topics = $row_members['topics'];
}
mysql_free_result($members_result);
$context['shop_richest'] = array();
$result = db_query("
SELECT ID_MEMBER, realName, memberName, money, avatar, topics
FROM {$db_prefix}members
ORDER BY money DESC, realName
LIMIT 10", __FILE__, __LINE__);
$context['all_user_money'] = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$context['shop_richest'][] = array(
'id' => $row['ID_MEMBER'],
'memberName' => $row['memberName'],
'name' => $row['realName'],
'avatar' => $row['avatar'],
'num_posts' => $row['topics'],
'money' => (int) $row['money'],
'href' => $scripturl . '?action=profile;u=' . $row['ID_MEMBER'],
);
$context['all_user_money']++;
}
$members_result = db_query(
------------------------------------------------------------------------
El bloque para el Recent.template.php, agregarlo entre los bloques del medio
/*******************************************************************/
echo'<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">User de la Semana</label>
<div class="content">';
$c = 0;
foreach ($context['top_posters_week'] as $poster){
$c++;
if($c==1){
echo'<div class="topuser">
<ul>
<li class="avatar"><img src="',$poster['avatar'],'"></li>
<li>
<span class="uinfo nick"><a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a></span>
<span class="uinfo puntos"><span class="topicon puntos"> </span> ',$poster['money'],' Puntos</span>
<span class="uinfo posts"><span class="topicon posts"> </span> ',$poster['num_posts'],' Posts</span>
</li>
<li class="star"><img src="',$settings['images_url'],'/topstar.png"></li>
</ul>
</div>';}
elseif($c>1){
if($c==2)
echo'<div class="tou">Otros Usuarios Tops: ';
echo'<a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a> (',$poster['num_posts'],')', $context['all_user_week']==$c ? '' : ', ';
}
}
echo'</div>
</div></div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">+ Puntos</label>
<div class="content">';
$c = 0;
foreach ($context['shop_richest'] as $poster){
$c++;
if($c==1){
echo'<div class="topuser">
<ul>
<li class="avatar"><img src="',$poster['avatar'],'"></li>
<li>
<span class="uinfo nick"><a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a></span>
<span class="uinfo puntos"><span class="topicon puntos"> </span> ',$poster['money'],' Puntos</span>
<span class="uinfo posts"><span class="topicon posts"> </span> ',$poster['num_posts'],' Posts</span>
</li>
<li class="star"><img src="',$settings['images_url'],'/topstar.png"></li>
</ul>
</div>';}
elseif($c>1){
if($c==2)
echo'<div class="tou">Otros Usuarios Tops: ';
echo'<a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a> (',$poster['money'],')', $context['all_user_money']==$c ? '' : ', ';
}
}
echo'</div></div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">+ Posts</label>
<div class="content">';
$c = 0;
foreach ($context['top_starters'] as $poster){
$c++;
if($c==1){
echo'<div class="topuser">
<ul>
<li class="avatar"><img src="',$poster['avatar'],'"></li>
<li>
<span class="uinfo nick"><a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a></span>
<span class="uinfo puntos"><span class="topicon puntos"> </span> ',$poster['money'],' Puntos</span>
<span class="uinfo posts"><span class="topicon posts"> </span> ',$poster['num_posts'],' Posts</span>
</li>
<li class="star"><img src="',$settings['images_url'],'/topstar.png"></li>
</ul>
</div>';}
elseif($c>1){
if($c==2)
echo'<div class="tou">Otros Usuarios Tops: ';
echo'<a class="user_nick" href="',$poster['href'],'">',$poster['name'],'</a> (',$poster['num_posts'],')', $context['all_user_estarted']==$c ? '' : ', ';
}
}
echo'</div></div>
</div>
</div>';
/*******************************************************************/
Agregar al CSS del theme ** Esto si o si lo tienen QUE HACER**
/* Bloque TABS */
.tabs {
position:relative;
min-height: 210px;
clear: both;
width:363px;
}
.tab {
margin-top:11px;
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
cursor:pointer;
}
.tab [type=radio]{
display: none;
}
.content {
position: absolute;
top: 35px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 5px;
border: 1px solid #ccc;
overflow: hidden;
margin-bottom:10px;
}
.content > *{
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
/* estilo del contenido by 002 */
.usertop{
width:340px;
margin:5px;
}
.usertop ul{
width:340px;
display:block;
list-style:none;
}
.topuser ul li{
display:block;
float:left;
padding:5px;
}
li.avatar img{
border: 1px solid #cccccc;
padding:3px;
width:65px;
height:65px;
}
li.star{padding:10px;padding-top:20px;margin-left:5px;}
li.star img{width:40px;height:40px;margin-top:20px;}
a.user_nick{
font-size:13px;
color:#0e69a3;
font-weight:bold;
}
a:hover.user_nick{
text-decoration:none;
color:#2d82b7;
}
.topicon{
padding-left:18px;
padding-top:5px;
}
.uinfo{padding:3px;display:block}
.uinfo.nick{border-bottom:1px dashed #cccccc;padding-bottom:1px;margin-bottom:5px;}
.uinfo.puntos{color:#e7d614;font-weight:bold;}
.uinfo.posts{color:#b8e714;font-weight:bold;}
.topicon.puntos{background: url('images/puntos.png') no-repeat}
.topicon.posts{background: url('images/visitas.gif') no-repeat}
.tou{
border-top:1px dashed #cccccc;
color:#757575;
font-color:11px;
width:360px!important;
padding:3px;
float:left;
}
/* Fin Bloque TABS */
-------------------------------------------------------
La imagen va en la carpeta images del theme que se esta usando, por defecto /Themes/default/images
Aclaracion, borrar los bloques de los Top Users con mas puntos, mas posts y users de la semana, ya que luego de los cambios no funcionaran correctamente.
Los cambios en el Recent.php son para el correcto funcionamiento del nuevo bloque.
Tema: Tabs animados solo con CSS (Leído 685 veces)
