 Fenix Rojo |
"> | 
| Amnel | |
|
 Comprimir las categorias en cajas - 1/5/2013, 5:07 pm
Los colores son solo una sugerencia, ustedes lo pueden cambiar al color que quieran, a como les agrade mas. El código JS es este: Módulos  HTML & JAVASCRIPT Gestion de códigos Javascript Colocar : En todos los temas - Código:
function copyright(){var a=$(".icon-home")[0];a&&(a.innerHTML=a.innerHTML.replace(/Home/g,"Copyright © CPortada 2013. All right reserved"))};
function switch_id() {
$("#forumscat .switch").click(function() {
document.getElementById("forumscat").style.display = "none";
document.getElementById("forum_infos").style.display = "block"
});
$("#forum_infos .switch").click(function() {
document.getElementById("forumscat").style.display = "block";
document.getElementById("forum_infos").style.display = "none"
});
}
$(function() {
var x=$("#left .module:eq(0) .inner")[0];x&&(x.innerHTML=x.innerHTML.replace(/,/g," "));
$('.forabg:first').before('<div id="forumscat"><div id="head">Your Tittle Forums</div><div class="inner"></div></div><div class="clear"></div><div class="clear"></div>');
$('ul.forums li.row:has("dl.icon[style*="read"]") .hierarchy').prepend('<b class="old">Old</b>');
$('ul.forums li.row:has("dl.icon[style*="unread"]") .hierarchy').prepend('<b class="new">New</b>');
$('ul.forums li.row dd.lastpost').each(function() {
$(this).html($(this).html().split(" ").join(""));
});
$('ul.forums li.row dd.lastpost:has("span a[href*="/u"]")').addClass('note');
$('ul.forums li.row dd.lastpost').not('.note').html('<span>Never <br><br></span>');
$('ul.forums li.row').each(function() {
var a = $(this).find('.hierarchy').html();
var b = $(this).find('dd.topics').text().split(" ")[0];
var c = $(this).find('dd.posts').text().split(" ")[0];
var d = $(this).find('dd.lastpost span').html();
$(this).replaceWith('<div id="forums" class="row3"><div class="head"><h3 class="hierarchy">'+a+'</h3></div><div class="desc"></div><div class="forum_stats"><span>'+b+' Topics / '+c+' Posts</span><div class="desc"></div><span>'+d+'</span></div></div>');
});
$('#main-content').each(function() {
$(this).find('#forumscat .inner').append($(this).find('ul.forums #forums'));
});
$('.forabg').remove();
});
$(function() {
$("#forumscat .switch").click(function() {
$('#forumscat').fadeOut('fast');
$('#forum_infos').fadeIn('fast');
});
$("#forum_infos .switch").click(function() {
$('#forumscat').fadeIn('fast');
$('#forum_infos').fadeOut('fast');
});
}); Y el código CSS: Visualización Imágenes y colores Hojas de estilo CSS Colors: - Código:
#forums {
background: #EEE;
width: 250px;
border: 1px solid#DDD;
float: left;
margin: 0 2px 5px;
padding: 5px;
}
.head {
text-align: center;
}
.desc {
border-bottom: 1px solid silver;
clear: both;
margin-bottom: 5px;
margin-left: -6px;
margin-right: -6px;
margin-top: 3px;
}
.forum_stats {
text-align: center;
font-size: 1.1em;
}
.old {
background: #EEE;
border: 1px solid #DDD;
padding: 5px 3px;
position: relative;
border-radius: 2px 2px 0 0;
float: left;
top: 1px;
margin-top: -5px;
}
.new {
background: #EEE;
border: 1px solid #DDD;
padding: 5px 3px;
position: relative;
border-radius: 2px 2px 0 0;
float: left;
top: 1px;
color: #CC4612;
margin-top: -5px;
}
.linklist.navlinks {
border-bottom: 0;
}
#forumscat {
background: #eaffd1;
border: 1px solid #68a324;
padding-left: 16px;
border-radius: 3px;
}
#forumscat .inner {
overflow: auto;
width: 100%;
}
#head {
background: #5b8d22;
padding: 6px 5px;
margin: 0 -1px 0 -17px;
margin-top: -5px;
border-radius: 3px 3px 0 0;
margin-bottom: 10px;
color: white;
text-align: center;
font-size: 1.3em;
box-shadow: inset 0 5px 10px #68a324;
}
|
| Permisos de este foro: | No puedes responder a temas en este foro.
Código [IMG] está Activado Código HTML está Activado
|
|
|
Linear Mode
