- Совместимость с XenForo
- 2.2
Всем привет! В этой теме расскажу как сделать баннеры пользователей как на форуме мобильного CRMP проекта - Матрёшка РП.
Баннеры были отрисованы через фотошоп и вставлены через CSS вместо дефолтного баннера.
Инструкция по установке:
1. Установите архив, который закреплён в данном ресурсе.
2. Распакуйте архив и загрузите на хостинг, в корневую директорию Вашего форума.
3. Зайдите в панель управления, Внешний вид, Шаблоны. Найдите шаблон
4. Вставьте в данный шаблон этот код:
5. Сохраните шаблон!
Вы успешно установили баннеры!
Результат:
Если в этот архив я не догрузил какие-то группы пользователей, то Вы напишите в Обсуждениях, обязательно обновлю ресурс.
Баннеры были отрисованы через фотошоп и вставлены через CSS вместо дефолтного баннера.
Инструкция по установке:
1. Установите архив, который закреплён в данном ресурсе.
2. Распакуйте архив и загрузите на хостинг, в корневую директорию Вашего форума.
3. Зайдите в панель управления, Внешний вид, Шаблоны. Найдите шаблон
extra.less
.4. Вставьте в данный шаблон этот код:
Less:
.userBanner {
font-size: 75%;
font-size: 11px;
font-weight: 400;
font-style: normal;
padding: 1px 10px;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: 6px;
text-align: center;
display: inline-block;
&.imgUser {
background: url(styles/icon/img_user.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgAdmin {
background: url(styles/icon/img_admin.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgDev {
background: url(styles/icon/img_dev.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgGa {
background: url(styles/icon/img_ga.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgGlsled {
background: url(styles/icon/img_glsled.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgLeader {
background: url(styles/icon/img_leader.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgLeaderfam {
background: url(styles/icon/img_leaderfam.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgLegend {
background: url(styles/icon/img_legend.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgMestn {
background: url(styles/icon/img_mestn.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgModer {
background: url(styles/icon/img_moder.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgSpecadmin {
background: url(styles/icon/img_specadmin.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgSupport {
background: url(styles/icon/img_support.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgZamga {
background: url(styles/icon/img_zamga.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
&.imgZamglsled {
background: url(styles/icon/img_zamglsled.png) no-repeat;
height: 45px;
width: 130px;
text-indent: -10000em;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
}
}
Вы успешно установили баннеры!
Результат:
Если в этот архив я не догрузил какие-то группы пользователей, то Вы напишите в Обсуждениях, обязательно обновлю ресурс.