Создать виджет - HTML - Список разделов: Боковая панель - Шаблон (код внизу)
HTML:
<div data-widget-id="11" data-widget-key="forum_menu_dostup" data-widget-definition="html">
<h3 class="block-minorHeader">Меню быстрого доступа</h3>
<div class="block-body block-row">
<div class="rfq-menu">
<a class="rfq-btn" href="http://forum.rodina-rp.com/forums/526/"><span>Правила проекта</span></a>
<a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Жалобы.77/"><span>Жалобы Центральный округ</span></a>
<a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Жалобы.56/"><span>Жалобы Южный округ</span></a>
<a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Северный-округ.112/"><span>Жалобы Северный округ</span></a>
<a class="rfq-btn" href="http://forum.rodina-rp.com/index.php?forums/Восточный-округ.154/"><span>Жалобы Восточный округ</span></a>
<a class="rfq-btn" href="https://forum.rodina-rp.com/forums/261/"><span>Жалобы Западный округ</span></a>
<a class="rfq-btn" href="https://forum.rodina-rp.com/forums/332/"><span>Жалобы Приморский округ</span></a>
<a class="rfq-btn" href="https://forum.rodina-rp.com/forums/380/"><span>Жалобы Федеральный округ</span></a>
<a class="rfq-btn" href="https://forum.rodina-rp.com/forums/481/"><span>Жалобы Москва</span></a>
</div>
</div>
</div>В extra.less
HTML:
.p-sideNav.is-active {
width: 300px
}
.dataList-cell.dataList-cell--action.dataList-cell--action:hover {
background: #000
}
.p-body-sidebar .rfq-menu {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0px 0px
}
.p-body-sidebar .rfq-btn {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 8px;
background: #141416;
border: 1px solid #e54545;
color: var(--xf-textColorEmphasized, #fff);
text-decoration: none;
font-weight: 600;
font-size: 13px;
line-height: 1.28;
transition: border-color .14s ease,background-color .14s ease,filter .14s ease
}
.p-body-sidebar .rfq-btn span {
display: block;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.28;
text-align: center
}
.p-body-sidebar .rfq-btn:hover {
border-color: #ff5a5a;
background: #16171a;
filter: brightness(1.02)
}
.p-body-sidebar .rfq-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(229,69,69,0.35)
}
@media (max-width: 420px) {
.p-body-sidebar .rfq-btn {
padding:9px 10px;
font-size: 13.5px
}
}