HOME FORUMS MEMBERS RECENT POSTS LOG IN  
× Авторизация
Имя пользователя:
Пароль:
Нет аккаунта? Регистрация
Баннер 1   Баннер 2
НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ
loading...
Скрыть
Вернуться   ANTICHAT > ПРОГРАММИРОВАНИЕ > PHP
   
Ответ
 
Опции темы Поиск в этой теме Опции просмотра

  #1  
Старый 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​
Команда проекта не показал т.к забыл ее включил в настройках форума
 
Ответить с цитированием

  #2  
Старый 10.03.2023, 19:55
pastow
Участник форума
Регистрация: 01.01.2023
Сообщений: 216
С нами: 1773732

Репутация: 33
По умолчанию

Как это работает и в чём смысл ?
 
Ответить с цитированием

  #3  
Старый 10.03.2023, 21:01
Лера первоклассница
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами: 1939619

Репутация: 33
По умолчанию

Цитата:
Сообщение от kelliga  

Никак, это просто доп. баннеры для форума арз

Зачем? Думаешь кому то это надо? Если они этого не сделали, значит не нужно.
Сделал для бонусных серверов, я же не такой уж и популярный чтобы делать что-то для основы арз
 
Ответить с цитированием

  #4  
Старый 12.04.2023, 21:40
Temirkan
Новичок
Регистрация: 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">
 
Ответить с цитированием

  #5  
Старый 25.04.2023, 22:18
Лера первоклассница
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами: 1939619

Репутация: 33
По умолчанию

Цитата:
Сообщение от Temirkan  

Можете сделать ссылку или скажите как это сделать.
не лезь пж в css если незнаешь как сделать свои баннеры
 
Ответить с цитированием

  #6  
Старый 26.04.2023, 18:30
alexey lebedev
Новичок
Регистрация: 06.02.2023
Сообщений: 1
С нами: 1720935

Репутация: 1
По умолчанию

Цитата:
Сообщение от Лера первоклассница  

не лезь пж в css если незнаешь как сделать свои баннеры
можешь плиз дать ссылку на .svg с префиксом"администрация"('э то баннер, который после владельца идет)
 
Ответить с цитированием

  #7  
Старый 27.04.2023, 18:06
Foxy1e3t
Познающий
Регистрация: 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 для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
 
Ответить с цитированием

  #8  
Старый 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 для баннеров? а если свгшейр упадет? баннеров не будет(офк они лежат в куках и у кого они загружены ничего не будет, а если новые юзеры?)
да и плюсом мне было лень их загружать на сайт форума
 
Ответить с цитированием

  #9  
Старый 01.05.2023, 15:09
Foxy1e3t
Познающий
Регистрация: 04.08.2016
Сообщений: 45
С нами: 5143625

Репутация: 68
По умолчанию

Цитата:
Сообщение от Лера первоклассница  

svgshare ниразу не падал
но подумай сам, а если упадет, а проект известный?)
 
Ответить с цитированием

  #10  
Старый 02.05.2023, 03:00
Лера первоклассница
Участник форума
Регистрация: 07.09.2022
Сообщений: 136
С нами: 1939619

Репутация: 33
По умолчанию

Цитата:
Сообщение от Foxy1e3t  

но подумай сам, а если упадет, а проект известный?)
на врятли
 
Ответить с цитированием
Ответ





Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 


Быстрый переход




ANTICHAT ™ © 2001- Antichat Kft.