Ζωντανό παράδειγμα: http://dokimastikoparea.forumgreek.com/
Εικόνα: https://i.imgur.com/WXCkU.png

Με το παρακάτω κωδικό όλες η κατηγορίες σας θα φαίνονται με καρτέλες. Με προϋπόθεση να έχετε επιλεγμένο το Split categories on index : Medium στο:

Πίνακας διαχείρισης Εμφάνιση Αρχική σελίδα | Δομή και ιεραρχία Index packing

Και τώρα ξεκινάμε...

1.

Πίνακας διαχείρισης Λειτουργικές Μονάδες HTML & Javascript | Javascript codes management Create a new javascript

Κάνουμε ΤΙΚ στο κουτάκι In all the pages και ανάλογα με το τι θέμα έχουμε βάζουμε τον κωδικό εκεί:


Invision:

Κώδικας:

function tttf(n) {
var tables = document.getElementById("main-content").getElementsByTagName("table")[n].parentNode;
document.getElementById("ttid").innerHTML = tables.innerHTML;
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $(".index-box").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].parentNode.style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].previousSibling.childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});

PHPBB2:

Κώδικας:

function tttf(n) {
var tables = $("#page-body table.forumline")[n];
document.getElementById("ttid").innerHTML = "<table class='forumline' width='100%' cellspacing='1' cellpadding='0' border='0'>" + tables.innerHTML + "</table>";
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $("#page-body table.forumline").get();
var tf = document.getElementById("page-body");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
if (i==tables.length-1) {
break;
}
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + document.getElementById('page-body').getElementsByTagName('h2')[i].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});

PHPBB3:

Κώδικας:

function tttf(n) {
var tables = $("#main-content .forabg")[n];
document.getElementById("ttid").innerHTML = "<div class='forabg'>" + tables.innerHTML + "</div>";
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = $(".forabg").get();
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});

PUNBB:

Κώδικας:

function tttf(n) {
var tables = document.getElementById("main-content").getElementsByTagName("table")[n].parentNode;
document.getElementById("ttid").innerHTML = tables.innerHTML;
}
$(function() {
if (location.pathname=="/forum" || location.pathname=="/") {
var tables = document.getElementById("main-content").getElementsByTagName("table");
var tf = document.getElementById("main-content");
var ttab = document.createElement("ul");
ttab.setAttribute("id","ttcl");
for (i=0; i<tables.length; i++) {
tables[i].parentNode.style.display="none";
tables[i].parentNode.previousSibling.style.display="none";
ttab.innerHTML += "<li><a href='javascript:void(0);' onclick='tttf(" + [i] + ")'>" + tables[i].parentNode.previousSibling.childNodes[0].childNodes[0].innerHTML + "</a></li>";
tf.parentNode.insertBefore(ttab,tf);
}
var tl = document.createElement("div");
tl.innerHTML = "<div id='ttid'>Click on the above tabs to choose a category!</div>";
tf.parentNode.insertBefore(tl,tf);
}
});

Βάλτε εκεί και ένα CSS που δεν είναι και απαραίτιτο αλλά δίνει την ομορφιά του...

Κώδικας:

#ttcl {
display: block;
list-style-type: none;
margin: 10px 0px 10px 0px;
}
#ttcl li {
display: inline;
padding: 5px;
margin: 0px 0px 0px 5px;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #000000;
}
#ttid {
display: block;
background: #FFFFFF;
border-radius: 5px;
border: 1px solid #000000;
padding: 5px;
margin: 5px;
}

Απολαύστε!

*Αν έχετε PHPBB2 ή PUNBB και έχετε πειραγμένο πρότυπο της κατηγορίας, αυτό μπορεί να μην δουλέψει σωστά.