How to add groups in CSS? // Как добавить группы в CSS?

Привет. В сегодняшнем гайде я напишу, как добавить группы в CSS, вместо графических (изображенных) групп. Руководство предназначено для версии сценария Invision Community 4.1.

Перейдите в ACP --> Пользователи --> Группы --> Выберите любую группу (например, Администратор) и нажмите Изменить --> Настройки группы.

В «Название группы» добавить:

<span class='defaultGroup admin'>Administrator</span>

Щелкните Сохранить.

ACP --> Внешний вид --> Стили и шаблоны --> Редактировать HTML и CSS --> вкладка CSS --> пользовательский --> custom.css

Вставьте код ниже

/* Grupy */
.defaultGroup {
  	border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 15px;
    text-shadow: none;
    vertical-align: middle;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
  	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
}
.admin {
 	background-color: #c75050; 
}
.admin:before {
 	 content: "\f005";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}

Нажмите Сохранить.

Если вам не нужна звездочка перед именем группы, удалите класс .admin:before из кода .CSS (в custom.css).

Я не знаю, как сейчас выглядит ваш код, но если вы хотите, чтобы группа появлялась только в сообщении, в частности, в разделе пользовательской панели, вы должны предварить свой код классом .cAuthorPane.

Пример:

/* Grupy */
.cAuthorPane .defaultGroup {....}
.cAuthorPane .admin {....}
.cAuthorPane .admin:before {.....}

English

Hi. In today's guide, I will write how to add groups in CSS, instead of graphic (picture) groups. The guide is for the Invision Community 4.1 script version.

Go to ACP --> Users --> Groups --> Select any group (e.g. Administrator) and click Edit --> Group settings

In "Group name" add:

<span class='defaultGroup admin'>Administrator</span>

Click Save.

ACP --> Appearance --> Styles and Templates --> Edit HTML and CSS --> CSS tab --> custom --> custom.css

Paste the code below

/* Grupy */
.defaultGroup {
  	border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 15px;
    text-shadow: none;
    vertical-align: middle;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
  	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
}
.admin {
 	background-color: #c75050; 
}
.admin:before {
 	 content: "\f005";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}

Click Save.

If you do not want an asterisk in front of the group name, remove the .admin:before class from the .CSS code (in custom.css).

if you want the group to appear only in the topic, precede the code with the class responsible for the user panel section, i.e. .cAuthorPane.

Example:

/* Grupy */
.cAuthorPane .defaultGroup {....}
.cAuthorPane .admin {....}
.cAuthorPane .admin:before {.....}

Credit to CzareK