[html]<div id="port-block1"></div>
<style>#port-block1 {display:none!important}</style>[/html]

ПЕРЕНОС ИНФОРМАЦИИ О РАЗДЕЛЕ В ОКОШКО, ПОЯВЛЯЮЩЕЕСЯ ПРИ НАВЕДЕНИИ
Скрипт трансформирует раздел в иконку. Информация о последнем сообщении, названии раздела, описании, количеству тем и постов появляется только при наведении. Идея для использования: категория в виде полки с книгами, по наведению - "титульник этой книги".

https://i.gyazo.com/8efc7a6509982dd4f5a6ca95984e37cc.gif

Автор скрипта: @Emerael
Демо

CSS

В Администрирование - Свой Стиль без тегов <style>

Код:
<style>
    .category-info .tc2:before {
        content: 'Тем: ';
    }
    .category-info .tc3:before {
        content: 'Постов: ';
    }
    .category thead {
        display: none;
    }
    
    .category .tc2, .category .tc3, .category .tcr, .category .tcl .tclcon {
        display: none;
    }
    .punbb .main .category-info > * {
        width: auto;
        text-align: left;
    }

    .category tr {
        display: inline-block;
    }
    
    .category-info {
        background: aliceblue;
        padding: .5em;
        z-index: 9999;
        display: none;
    }
    .category-info.visible {
        display: block;
    }
</style>
JS

В Администрирование - HTML-низ

Код:
<script>
        const hint = document.createElement('div');
        hint.classList.add('category-info');
        const main = document.querySelector('#pun-main');
        main.append(hint);
        document.querySelectorAll('.category tbody tr').forEach(el => {
            el.querySelector('.tcl').addEventListener('mouseenter', (e) => {
                hint.innerHTML = '';
                hint.classList.add('visible');
                const hintContent = [];
                el.querySelectorAll('.tc2, .tc3, .tcr, .tcl .tclcon')
                    .forEach(cell => {
                        const newEl = document.createElement('div');
                        newEl.innerHTML = cell.innerHTML;
                        newEl.className = cell.className;
                        hintContent.push(newEl);
                    });
                hint.append(...hintContent);
                hint.style.position = 'fixed';
                const {left, top, height} = el.getBoundingClientRect();
                hint.style.top = (top + height) + 'px';
                hint.style.left = left + 'px';
                main.addEventListener('mouseleave', (ev) => {hint.innerHTML = '';hint.classList.remove('visible')});
            });
        });
</script>