ПА - Оформления -  Шаблоны - Общие настройки - index_body (Главная страница):

Поиск в коде шаблона :

Код:

<p>{LEGEND} : {GROUP_LEGEND}</p>

Заменяем:

Код:

<p>{LEGEND} :&nbsp;<span class="legend">{GROUP_LEGEND}</span></p>

ПА - Оформления - Картинки и цвета - Цвета - Каскадная таблица стилей CSS:

Добавляем в CSS:

Код:

span.legend {
  font-size: 0
}
a.gensmall {
  border-radius: 2px;
  box-shadow: 1px 1px 0 #e0e0e0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  color: #f2f2f2 !important;
  font-family: Overlock,sans-serif;
  font-size: 11px;
  padding: 1px 7px;
  display: inline-block;
  margin: 0 3px 8px !important;
  text-align: center;
  text-decoration: none;
}

a.gensmall[href="/g1-group"] {
  background: #aec66f;
}
a.gensmall[href="/g2-group"]{
  background: #488786;
}
a.gensmall[href="/g3-group"] {
  background: #e3b383;
}
a.gensmall[href="/g4-group"]{
  background: #da5d23;
}
a.gensmall[href="/g5-group"] {
  background: #c8b7d6;
}
a.gensmall[href="/g6-group"]{
  background: #b9c4c9;
}
a.gensmall[href="/g7-group"]{
  background: #da5d23;
}
a.gensmall[href="/g8-group"] {
  background: #c8b7d6;
}
a.gensmall[href="/g9-group"] {
  background: #98cdcc;
}
a.gensmall[href="/g10-group"]{
  background: #ff9e56;
}