HTML:
<xf:css>
.block.quick-access-menu .button.button--link {
display: block;
min-width: 230px;
max-width: 330px;
margin: 5px auto;
}
</xf:css>
<div class="block quick-access-menu"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader"><xf:fa icon="fa-list-alt" /> Меню быстрого доступа</h3>
<div class="block-body block-row">
<a class="button button--link" href="#">Правила форума</a>
<a class="button button--link" href="#">Правила проекта</a>
<a class="button button--link" href="#">Сервер</a>
</div>
</div>
</div>
Если вы используете этот код для виджета, то за каждый блок (кнопку) отвечает вот эта строка:
HTML:
<a class="button button--link" href="#">Сервер</a>
Стили к этим кнопкам применяются через класс
button button--link. Чтобы задать разные стили для каждой кнопки, просто добавьте к ним дополнительные классы, например:
b1,
b2,
b3.
HTML:
<a class="button button--link b1" href="#">Правила форума</a>
<a class="button button--link b2" href="#">Правила проекта</a>
<a class="button button--link b3" href="#">Сервер</a>
А в шаблон
extra.less добавьте нужные стили:
CSS:
.b1 {
background: red;
}
.b2 {
background: green;
}
.b3 {
background: blue;
}
Если хотите, чтобы все кнопки были одного цвета, просто добавьте один и тот же класс, например
b1, ко всем:
HTML:
<a class="button button--link b1" href="#">Правила форума</a>
<a class="button button--link b1" href="#">Правила проекта</a>
<a class="button button--link b1" href="#">Сервер</a>
Изменять или дополнять что-то в классах button и button--link не надо, так как они используются по всему форуму
