 |
|

10.03.2023, 13:15
|
|
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами:
1939619
Репутация:
33
|
|
Доброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Сообщение от Спойлер
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель

Здесь пишем "vlad" И так проделать со всеми баннерами.
Сообщение от Спойлер
123:
Код:
.vlad {
background: url(https://svgshare.com/i/qgp.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.ga {
background: url(https://robo-hamster.ru/foreme/ga.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zga {
background: url(https://robo-hamster.ru/foreme/zga.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.curator {
background: url(https://robo-hamster.ru/foreme/cur.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.adminka {
background: url(https://robo-hamster.ru/foreme/adm.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.admin {
background: url(https://robo-hamster.ru/foreme/mla.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.helper {
background: url(https://robo-hamster.ru/foreme/help.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.user {
background: url(https://robo-hamster.ru/foreme/user.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.userBanner.userBanner--staff {
background: url(https://svgshare.com/i/mij.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: inline-flex;
}
.zgsnele {
background: url(https://svgshare.com/i/r1M.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gsnele {
background: url(https://svgshare.com/i/r11.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zgsletov {
background: url(https://svgshare.com/i/r0e.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gssletov {
background: url(https://svgshare.com/i/r0C.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.tech {
background: url(https://svgshare.com/i/qgw.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zgsgoss {
background: url(https://svgshare.com/i/r1A.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gs {
background: url(https://i.imgur.com/r6fAIkD.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.rukvo {
background: url(https://i.imgur.com/3Zf9nlA.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.sletov {
background: url(https://i.imgur.com/Vs1zQ1L.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gsgoss {
background: url(https://svgshare.com/i/r01.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.blue {
box-shadow: 0px 0px 16px blue;
color: #fff;
background-color: blue;
border-color: blue;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.gray {
box-shadow: 0px 0px 16px gray;
color: #fff;
background-color: gray;
border-color: gray;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.yellow {
box-shadow: 0px 0px 16px #fde910;
color: #fff;
background-color: #fde910;
border-color: #fde910;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.green {
box-shadow: 0px 0px 16px green;
color: #fff;
background-color: green;
border-color: green;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.red {
box-shadow: 0px 0px 16px red;
color: #fff;
background-color: red;
border-color: red;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
@keyframes animate-shine {
0% {
opacity: .1;
width: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
width: 100%;
}
}
Слишком много спойлеров
Как выглядят префиксы:
Если будут какие-то вопросы можете задавать в комменты
P.S На видео использован плагин Multiple Prefix
Сообщение от Лера первоклассница
Доброго времени суток.
Все мы знаем что на форуме Arizona RP есть баннеры (Основатель, ГА,ЗГА и т.д).
Ну кароче не суть, перейдем к делу, добавил баннеры згс/гс + команда проекта
Сообщение от Спойлер
Туториал как сделать эти баннеры.
Шаблоны - extra.less - вставляем код.
После заходим в группы пользователей - Основатель

Здесь пишем "vlad" И так проделать со всеми баннерами.
Сообщение от Спойлер
123:
Код:
.vlad {
background: url(https://svgshare.com/i/qgp.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.ga {
background: url(https://robo-hamster.ru/foreme/ga.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zga {
background: url(https://robo-hamster.ru/foreme/zga.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.curator {
background: url(https://robo-hamster.ru/foreme/cur.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.adminka {
background: url(https://robo-hamster.ru/foreme/adm.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.admin {
background: url(https://robo-hamster.ru/foreme/mla.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.helper {
background: url(https://robo-hamster.ru/foreme/help.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.user {
background: url(https://robo-hamster.ru/foreme/user.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.userBanner.userBanner--staff {
background: url(https://svgshare.com/i/mij.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: inline-flex;
}
.zgsnele {
background: url(https://svgshare.com/i/r1M.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gsnele {
background: url(https://svgshare.com/i/r11.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zgsletov {
background: url(https://svgshare.com/i/r0e.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gssletov {
background: url(https://svgshare.com/i/r0C.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.tech {
background: url(https://svgshare.com/i/qgw.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.zgsgoss {
background: url(https://svgshare.com/i/r1A.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gs {
background: url(https://i.imgur.com/r6fAIkD.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.rukvo {
background: url(https://i.imgur.com/3Zf9nlA.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.sletov {
background: url(https://i.imgur.com/Vs1zQ1L.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.gsgoss {
background: url(https://svgshare.com/i/r01.svg);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
.blue {
box-shadow: 0px 0px 16px blue;
color: #fff;
background-color: blue;
border-color: blue;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.gray {
box-shadow: 0px 0px 16px gray;
color: #fff;
background-color: gray;
border-color: gray;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.yellow {
box-shadow: 0px 0px 16px #fde910;
color: #fff;
background-color: #fde910;
border-color: #fde910;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.green {
box-shadow: 0px 0px 16px green;
color: #fff;
background-color: green;
border-color: green;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
.red {
box-shadow: 0px 0px 16px red;
color: #fff;
background-color: red;
border-color: red;
position: relative;
padding: 1px 0.4rem;
border-radius: 4px;
&:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 4px;
animation: animate-shine 2s ease-out infinite;
}
}
@keyframes animate-shine {
0% {
opacity: .1;
width: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
width: 100%;
}
}
Слишком много спойлеров
Как выглядят префиксы:
Если будут какие-то вопросы можете задавать в комменты
P.S На видео использован плагин Multiple Prefix
Команда проекта не показал т.к забыл ее включил в настройках форума
|
|
|

10.03.2023, 19:55
|
|
Участник форума
Регистрация: 01.01.2023
Сообщений: 216
С нами:
1773732
Репутация:
33
|
|
Как это работает и в чём смысл ?
|
|
|

10.03.2023, 21:01
|
|
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами:
1939619
Репутация:
33
|
|
Сообщение от kelliga
Никак, это просто доп. баннеры для форума арз
Зачем? Думаешь кому то это надо? Если они этого не сделали, значит не нужно.
Сделал для бонусных серверов, я же не такой уж и популярный чтобы делать что-то для основы арз
|
|
|

12.04.2023, 21:40
|
|
Новичок
Регистрация: 12.04.2023
Сообщений: 1
С нами:
1627011
Репутация:
1
|
|
Можете сделать ссылку или скажите как это сделать.
Picsart_23-04-12_18-17-08-575.jpgTemirkan · 12 Апр 2023 в 20:40' data-fancybox="lb-post-1291362" data-lb-caption-extra-html="" data-lb-sidebar-href="" data-single-image="1" data-src="https://www.blast.hk/attachments/197439/" style="cursor: pointer;" title="Picsart_23-04-12_18-17-08-575.jpg">

|
|
|

25.04.2023, 22:18
|
|
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами:
1939619
Репутация:
33
|
|
Сообщение от Temirkan
Можете сделать ссылку или скажите как это сделать.
не лезь пж в css если незнаешь как сделать свои баннеры
|
|
|

26.04.2023, 18:30
|
|
Новичок
Регистрация: 06.02.2023
Сообщений: 1
С нами:
1720935
Репутация:
1
|
|
Сообщение от Лера первоклассница
не лезь пж в css если незнаешь как сделать свои баннеры
можешь плиз дать ссылку на .svg с префиксом"администрация"('э то баннер, который после владельца идет)
|
|
|

27.04.2023, 18:06
|
|
Познающий
Регистрация: 04.08.2016
Сообщений: 45
С нами:
5143625
Репутация:
68
|
|
Сообщение от Лера первоклассница
.vlad { background: url( https://svgshare.com/i/qgp.svg); width: 150px; height: 35px; font-size: 0px; background-repeat: no-repeat; background-position: center; background-size: cover; border: none; display: block;
зачем так?
.userBanner {
сюда всё что надо по типу
width: 150px; height: 35px
}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
|
|
|

28.04.2023, 23:50
|
|
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами:
1939619
Репутация:
33
|
|
Сообщение от Foxy1e3t
зачем так?
.userBanner {
сюда всё что надо по типу
}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
ну за мою историю, svgshare ниразу не падал
на всех форумах есть согласие на cookie файлы, должны же загружены
Сообщение от alexey lebedev
можешь плиз дать ссылку на .svg с префиксом"администрация"('э то баннер, который после владельца идет)
найди сам емае
ввв:
Код:
.rukvo {
background: url(https://i.imgur.com/3Zf9nlA.png);
width: 150px;
height: 35px;
font-size: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: none;
display: block;
}
Сообщение от Foxy1e3t
зачем так?
.userBanner {
сюда всё что надо по типу
}
потом
.userBanner.userBanner--RedAdmin {
background: url(/styles/banners/red_admin.svg)
}
и всё, так добавляешь каждый баннер и не надо 1729843971249 одинаковых свойств для каждого баннера
да и почему ты юзаешь svgshare для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
да и плюсом мне было лень их загружать на сайт форума
|
|
|

01.05.2023, 15:09
|
|
Познающий
Регистрация: 04.08.2016
Сообщений: 45
С нами:
5143625
Репутация:
68
|
|
Сообщение от Лера первоклассница
svgshare ниразу не падал
но подумай сам, а если упадет, а проект известный?)
|
|
|

02.05.2023, 03:00
|
|
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами:
1939619
Репутация:
33
|
|
Сообщение от Foxy1e3t
но подумай сам, а если упадет, а проект известный?)
на врятли
|
|
|
|
 |
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|