Может кому пригодится , только цветовую схему исправите на свою и будет вам счастье. 
Код
<STYLE>
/* ===== Контейнеры переключателей слева ===== */
.switchDigitBox,
.pagination,
ul.switches.forum-pages {
display: flex;
gap: 4px; /* расстояние между кнопками */
justify-content: flex-start; /* выравнивание по левому краю */
align-items: center;
margin: 6px 0;
padding-left: 1px; /* отступ от левой границы */
}
/* ===== Общие стили для всех кнопок ===== */
.switch,
a.switchDigit,
a.switchBack,
a.switchNext,
.switchActive {
font-size: 12px;
font-weight: 600;
min-width: 36px;
height: 36px; /* фиксированная высота для всех */
line-height: 36px; /* вертикальное выравнивание текста */
padding: 0 10px; /* горизонтальные отступы */
border-radius: 6px;
text-align: center;
color: #a64ca6;
background: #fff;
border: 1px solid rgba(166, 76, 166, 0.3);
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 0.15s ease;
box-sizing: border-box;
position: relative;
}
/* ===== Левая и правая стрелки ===== */
a.switchBack::before {
content: "⬅";
margin-right: 4px;
font-size: 14px;
}
a.switchNext::after {
content: "➡";
margin-left: 4px;
font-size: 14px;
}
/* ===== Активная кнопка ===== */
a.switchDigit.active,
.switchActive {
background: linear-gradient(135deg, #b66cb6, #702070);
color: #fff;
border: 2px solid #fff;
font-weight: 700;
box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 0 6px rgba(255,255,255,0.25);
}
/* Расширенный вертикальный фон для активной */
a.switchDigit.active::before,
.switchActive::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: linear-gradient(135deg, #b66cb6, #702070);
border-radius: 6px;
z-index: -1;
}
/* Hover эффекты для всех кнопок */
a.switchDigit:not(.active):hover,
a.switchBack:hover,
a.switchNext:hover {
background: #f2e6f9;
color: #a64ca6;
transform: translateY(1px);
}
/* Нажатие */
a.switchDigit:active,
a.switchBack:active,
a.switchNext:active {
transform: translateY(2px);
}
/* Неактивные кнопки */
.swchItemInactive,
a.switchDigit.inactive {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
/* Информация о страницах */
.pagesInfo {
font-size: 12px;
color: #666;
padding: 0 4px;
}
</STYLE>
И небольшой скрипт , который скрывает спец символ и добавляет кнопку назад и вперед вместо обычного символа. 
Код
<script>
document.addEventListener("DOMContentLoaded", function() {
function updateButtons() {
// Левая кнопка (Назад)
document.querySelectorAll("a.switchBack").forEach(btn => {
if (btn.dataset.modified) return; // чтобы не трогать повторно
btn.innerHTML = "Назад";
btn.style.fontWeight = "600";
btn.style.fontSize = "12px";
btn.style.color = "#a64ca6";
btn.dataset.modified = "true";
});
// Правая кнопка (Вперед)
document.querySelectorAll("a.switchNext").forEach(btn => {
if (btn.dataset.modified) return;
btn.innerHTML = "Вперед";
btn.style.fontWeight = "600";
btn.style.fontSize = "12px";
btn.style.color = "#a64ca6";
btn.dataset.modified = "true";
});
}
// Первичный запуск
updateButtons();
// Наблюдатель за динамическими изменениями (если подгрузка контента)
const observer = new MutationObserver(updateButtons);
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
Там можете добавь от себя что -то . 
И все это желательно вставлять на страницу в шаблон "вид материалов" у себя .
