MrHaim

Приветствую обитателей и посетителей IPBMafia!
Перед началом сообщу, что, оформляя эту тему, я принял окончательное решение никогда не переезжать на пятую версию ввиду абсолютной неудобности и утери разработчиками одного из наилучших качеств, а именно - интуитивно понятный интерфейс.
Итак-с, приступим.
Нижеописанные улучшения предназначены для тех, кто хочет каким-либо образом придать индивидуальности своим пользователям, однако, стоит предупредить, что чрезмерное использование может превратить ваш форум в "ёлку", мигающая совершенно разными цветами, и каждая лампочка мигает разным темпом, что может вызвать астенопию (шутка).
Что вообще представляет из себя украшение аватарки:


Мы рассмотрим три вариации вывода украшений:
По ID пользователя;
По ID группы;
По дополнительному полю профиля.
Начнём по порядку.

ID пользователя
Переходим по следующему пути: АЦ -> Темы -> Редактировать HTML и CSS -> userPhoto/ProfileHeader.
В userPhoto и ProfileHeader, в контейнере с аватаркой, нужно применить следующий код:

Для новичков - разбираем:

ID группы
Переходим по следующему пути: АЦ -> Темы -> Редактировать HTML и CSS -> userPhoto/ProfileHeader.
В userPhoto и ProfileHeader, в контейнере с аватаркой, нужно применить следующий код:

Краткий разбор:

Дополнительные поля профиля
Данный пункт состоит из нескольких этапов. Разбираем.
Первый этап: Переходим в АЦ -> Пользователи -> Профили -> Добавить поле профиля.
В "Тип поля" важно выбрать либо Набор чекбоксов (не рекомендую), либо Радиокнопку, так как код "заточен" конкретно под них.
Далее, в "Опции", добавляем одну, две или более пунктов, именуя их как душе угодно. Обязательно указываем пункты "Показывать всем", иначе украшения выводиться не будут.
Сделали. Сохранили. Отлично. Двигаемся далее.
Второй этап: Переходим по следующему пути: АЦ -> Темы -> Редактировать HTML и CSS -> userPhoto/ProfileHeader.
В userPhoto и ProfileHeader, в контейнере с аватаркой, нужно применить следующий код:

Краткий разбор:
Если имеется желание, можете оптимизировать/переписать код под себя. Мне без разницы.
Аналогичным методом, вы можете вывести украшения профиля в hoverCard и profile, что используются в том же Discord.
Обратите внимание, что файлы формата GIF, будут отображать чёрный бэкграунд на пустых участках изображения, поэтому наиболее подходящими являются PNG и SVG.
Вот и вся инструкция. Надеюсь, кому-нибудь пригодится. Желаю удачи.

HTML:
.main-wrapper .badge.yellow .circle i(class='fa fa-bolt') .ribbon Initiator .badge.orange .circle i(class='fa fa-wheelchair-alt') .ribbon Disabler .badge.pink .circle i(class='fa fa-pied-piper') .ribbon Nuker .badge.red .circle i(class='fa fa-shield') .ribbon Ganker .badge.purple .circle i(class='fa fa-anchor') .ribbon Durable .badge.teal .circle i(class='fa fa-bicycle') .ribbon Roamer .badge.blue .circle i(class='fa fa-users') .ribbon Pusher .badge.blue-dark .circle i(class='fa fa-rocket') .ribbon Escape .badge.green .circle i(class='fa fa-tree') .ribbon Jungler .badge.green-dark .circle i(class='fa fa-user fa-street-view') .ribbon Offlaner .badge.silver .circle span.font AFK .ribbon Carry .badge.gold .circle i(class='fa fa-magic') .ribbon Support footer a(href="https://www.linkedin.com/in/oliviale/" target="_blank") i(class="fa fa-linkedin icons") a(href="https://twitter.com/meowlivia_" target="_blank") i(class="fa fa-twitter icons") a(href="https://github.com/oliviale" target="_blank") i(class="fa fa-github icons") a(href="https://dribbble.com/oliviale" target="_blank") i(class="fa fa-dribbble icons")  
CSS:
@mixin margin-auto { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } body { font-family: 'Comfortaa', sans-serif; background: #111; } .main-wrapper { width: 90%; max-width: 900px; margin: 3em auto; text-align: center; } .badge { position: relative; margin: 1.5em 3em; width: 4em; height: 6.2em; border-radius: 10px; display: inline-block; top: 0; transition: all 0.2s ease; &:before, &:after { position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: ""; @include margin-auto; } &:before { transform: rotate(60deg); } &:after { transform: rotate(-60deg); } &:hover { top: -4px; } .circle { width: 60px; height: 60px; position: absolute; background: #fff; z-index: 10; border-radius: 50%; @include margin-auto; i.fa { font-size: 2em; margin-top: 8px; } } .font { display: inline-block; margin-top: 1em; } .ribbon { position: absolute; border-radius: 4px; padding: 5px 5px 4px; width: 100px; z-index: 11; color: #fff; bottom: 12px; left: 50%; margin-left: -55px; height: 15px; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); text-transform: uppercase; background: linear-gradient(to bottom right, #555 0%, #333 100%); cursor: default; } } .yellow { background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%); color: #ffb300; } .orange { background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%); color: #f68401; } .pink { background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%); color: #dc306f; } .red { background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%); color: #c62828; } .purple { background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%); color: #7127a8; } .teal { background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%); color: #34a297; } .blue { background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%); color: #259af3; } .blue-dark { background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%); color: #1c68c5; } .green { background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%); color: #7cb342; } .green-dark { background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%); color: #00944a; } .silver { background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%); color: #9e9e9e; } .gold { background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%); color: #b7892b; } footer { text-align: center; margin: 5em auto; a { text-decoration: none; display: inline-block; width: 45px; height: 45px; border-radius: 50%; background: #111; border: .5px dashed #f8f8f8; color: #999; margin: 5px; &:hover { background: #222; } .icons { margin-top: 12px; display: inline-block; font-size: 20px; } } } outcome:

https://codepen.io/oliviale/pen/qpPByV
Credit to severniy

Пожалуйста, обновите фотографии, возможно, я воспользуюсь предлагаемыми вами услугами, если это еще актуально  

Просмотр файла Question-answer and captcha in the feedback form 1.0.1
Question-answer and captcha to prevent spam through the feedback form.
Вопрос-ответ и капча для предотвращения спама через форму обратной связи.
Добавил MrHaim Добавлено 03/11/23 Категория Интерфейс Язык ENGLISH  

Перейти в Админ панель-Внешний вид-Стиль-Стили и шаблоны-Ваш стиль-globalTemplate 
Код можно добавить после как на скриншоте
Go to Admin Panel-Appearance-Style-Styles and Templates-Your Style-globalTemplate
The code can be added after as in the screenshot

<script> var speed=80 var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=1 var b=1 var seq=1 function changetext(){ for(i=0;i<document.getElementsByName("Rainbow").length;i++){ var storetext=document.getElementById? document.getElementsByName("Rainbow")[i] : document.all.highlight rainbow="#"+hex[r]+hex[g]+hex[b] storetext.style.color=rainbow } } function change(){ if (seq==6){ b-- if (b==0) seq=1 } if (seq==5){ r++ if (r==12) seq=6 } if (seq==4){ g-- if (g==0) seq=5 } if (seq==3){ b++ if (b==12) seq=4 } if (seq==2){ r-- if (r==0) seq=3 } if (seq==1){ g++ if (g==12) seq=2 } changetext() } function starteffect(){ if (document.all||document.getElementById) flash=setInterval("change()",speed) } starteffect() </script> Добавить код в custom.css в самий ныз:
Add the code to custom.css at the very bottom:
/* Membership Color Group /Color is in hex /change anything you want and suit your needs/ i have included only two groups here, you can incude as many as you want */ .Youranygroup { background: url(link to sparkle gif); color: #00fffa; font-weight: bold; text-shadow: 2px 0px 11px #00ffe5; } .Youranygroup { background: url(link to sparkle gif); color: #f93647; font-weight: bold; text-shadow: 2px 0px 11px #f93647; } Перейти в Админ  панель-Пользователи-Группы пользователей
Go to Admin Panel-Users-User Groups

Добавить:
Add:
<span name="Rainbow" class="youranygroup"> Закрыть суффикс
close suffix
</span>  

Привет. Сегодня я покажу вам, как сделать красочные разделы и подфорумы в Invision Community. Гайд написан на версии IPS 4.1, поэтому возможно, что на более новой версии он не будет работать, тогда потребуется немного изменить код.
Сначала перейдите в: ACP --> Внешний вид --> Стили и шаблоны --> Редактировать HTML и CSS --> вкладка CSS --> пользовательский --> custom.css
Вставьте код ниже:
[data-forumid="2"] .ipsDataItem_title > a { color: #556e53; /* Kolor "A Test Forum" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(1) a { color: #f87d09; /* Kolor "Test 1" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(3) a { color: #a9c52f; /* Kolor "Test 3" */ } .ipsDataItem_title > a:hover, .ipsDataItem_subList > li > a:hover { color: #ad1457 !important; } Нажмите Сохранить.
В data-forumid добавляем ID выбранного нами отдела. В моем случае это ID:2.
Чтобы узнать, какой ID у нашего отдела, наведите мышку на название отдела. Идентификационный номер находится в справке.
Пример адреса:
Номер отдела находится сразу после косой черты /, которая в приведенном выше случае равна «2».
Затем в скобках () даем номер подфорума, которому хотим придать выбранный цвет.
Предварительный просмотр:

English
 
Hello. Today I will show you how to make colorful sections and sub-forums in Invision Community. The guide is written on IPS 4.1, so it is possible that it will not work on a newer version, then you will need to slightly change the code.
First go to: ACP --> Appearance --> Styles and Templates --> Edit HTML and CSS --> CSS tab --> custom --> custom.css
Paste the code below:
[data-forumid="2"] .ipsDataItem_title > a { color: #556e53; /* Kolor "A Test Forum" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(1) a { color: #f87d09; /* Kolor "Test 1" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(3) a { color: #a9c52f; /* Kolor "Test 3" */ } .ipsDataItem_title > a:hover, .ipsDataItem_subList > li > a:hover { color: #ad1457 !important; } Click Save.
In data-forumid we add the ID of the department we have chosen. In my case it is ID:2.
To find out what ID our department has, hover your mouse over the name of the department. The identification number is in the help.
Address example:
The department number is immediately after the slash /, which is "2" in the above case.
Then, in brackets () we give the number of the subforum to which we want to give the selected color.

Credit to CzareK

1.1.2
 
Jobs 1.1.2.zip

Hello. Today I will describe a short guide on how to add Font Awesome icons to the user's flyout menu in Invision Community (IPS Community Suite).
I think the effect is so satisfactory that everyone should add these icons to the menu. In my opinion, the user menu looks much clearer.
The version of the script on which I added the icons is IPS 4.2. I will only note that in newer versions the code may not work 100% correctly, or not work at all due to changes in the code that may appear in upcoming releases.
If the code does not work on your version of the software, let me know in the topic and I will try to improve it.
Font Awesome in the user menu
To add icons to the menu, go to ACP → Appearance → Styles and Templates → Edit HTML and CSS → CSS tab → custom → custom.css.
Now paste the following CSS code into the file:
/* Panel użytkownika */ #elUserLink_menu a:before { font-family: "FontAwesome"; font-size: 14px; font-weight: normal; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; } #elUserLink_menu a[href*="admin"] i { display: none; } #elUserLink_menu a:before { display: inline-block; width: 20px; opacity: 0.7; } #elUserLink_menu a:hover:before { opacity: 1; } /* Profil */ #elUserLink_menu > li[data-menuItem='profile'] > a:before { content: "\f007"; } /* Moje załączniki */ #elUserLink_menu > li[data-menuItem='attachments'] > a:before { content: "\f0c6"; } /* Obserwowana zawartość */ #elUserLink_menu > li[data-menuItem='manageFollowed'] > a:before { content: "\f06e"; } /* Ustawienia konta */ #elUserLink_menu > li[data-menuItem='settings'] > a:before { content: "\f013"; } /* Ignorowani użytkownicy */ #elUserLink_menu > li[data-menuItem='ignoredUsers'] > a:before { content: "\f235"; } /* Panel Moderatora */ #elUserLink_menu > li[data-menuItem='modcp'] > a:before { content: "\f132"; } /* Panel Admina */ #elUserLink_menu > li[data-menuItem='admincp'] > a:before { content: "\f023"; margin-right: -3px; } /* Wyloguj */ #elUserLink_menu > li[data-menuItem='signout'] > a:before { content: "\f08b"; } Don't forget to save your changes by clicking the "Save" button.
Below I add the effect of what the user menu looks like with Font Awesome icons already added

 
Credit to CzareK

4.7.10
 
Illuminate 4.7.10[webflake.xyz].xml

<div class="widget_name"> <!-- You can change name of every widget you add--> <div class=" ipsPad_half"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <!-- If you add another button, you need to change the every number from css style, e.g.: .box4 need to change to .box5 to not overwrite--> <style media="screen" type="text/css"> * { font-family: 'Montserrat', sans-serif; } .box4{ position: relative; cursor: pointer; width: 285px; height: 50px; background-color: #8918a7; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.3); transition: 400ms ease-in-out; } .shade4{ position: relative; width: 148px; height: 100px; background: #561f76; opacity: 0.5; left: 200px; transform: rotate(135deg); top: -16px; transition: all ease-in-out 500ms; } .boxText4{ position: absolute; font-size: 15px; font-weight: 700; color: white; left: 70px; top: 15px; transition: all ease-in-out 400ms; } .boxJoin4{ z-index: 2; position: absolute; font-size: 17px; font-weight: 700; color: white; opacity: 0; transform: scale(0.3); transition: all ease-in-out 400ms; left: 25px; top: 15px; } .boxLogo4{ position: absolute; font-size: 38px; color: #fff; top: 5px; margin-left: 10px; transition: all ease-in-out 400ms; } #boxArrow4{ z-index: 2; color: white; font-size: 24px; position: absolute; left: 256px; top: 12px; transition: all ease-in-out 400ms; } .box4:hover { box-shadow: 0 6px 8px 0 rgba(0,0,0,0.3); } .box4:hover .shade4{ transform: rotate(90deg); height: 320px; top: -140px; left: 68px; } .box4:hover .boxText4{ top: -48px; } .box4:hover .boxJoin4{ opacity: 1; transform: scale(1); } .box4:hover .boxLogo4{ top: -48px; } .box4:hover #boxArrow4{ transform: translateX(60px); } </style> <div class="box4"> <a href="https://forum.resursele.ro/faq/"> <!-- Link of button--> <i class="fa fa-question-circle boxLogo4"></i> <!-- Icon of button, it is run on Font Awesome Icons only if theme support fontawesome--> <!-- <img class="boxLogo4" src="https://steamstore-a.akamaihd.net/public/shared/images/header/globalheader_logo.png"> --> <span class="boxJoin4">HAVE A QUESTION?</span><!-- Hover text--> <span class="boxText4">F.A.Q</span><!-- Button text--> <i id="boxArrow4" class="fa fa-angle-right"></i> <div class="shade4"> </div> </a> </div> </div> </div> Credit to CristiOprea13
 
 

Перейти в Админ панель-Пользователи-Группы пользователей
Go to Admin Panel-Users-User Groups
<span style = " color : Ваш цвет " > Вставьте вышеуказанный код в формат группы, чтобы
Paste the above code into the group format to

Не забувайты закрывать код
Don't forget to close the code
</span>  
Styles and patterns // Стили и узоры

Добавление цвета + жирный шрифт
Для этого добавьте следующий код
Add color + bold
To do this, add the following code
<span style='font-weight: bold; color: Ваш цвет;'</span> Это будет выглядеть так:
It will look like this:

Добавление неонового эффекта
Для этого добавьте следующий код
Adding a neon effect
To do this, add the following code
<span style="text-shadow: 0px 0px 10px Your Color; color: Ваш цвет; font-weight: bold;" </span> Это будет выглядеть так:
It will look like this:

Добавление GIF
Для этого добавьте следующий код
Adding a GIF
To do this, add the following code
<span style="text-shadow: 0px 0px 10px Ваш цвет; background: url(https://i.imgur.com/DeeiUkd.gif); color: Your Color; font-weight: bold;" </span> Это будет выглядеть так:
It will look like this:

Добавление значка:
Adding an icon:
<span style='font-weight: bold; text-shadow: 0px 0px 10px Ваш цвет; background-image: url(https://i.imgur.com/DeeiUkd.gif); color: Ваш цвет;'><i class="fa fa-star fa-spin"aria-hidden="true"> </i> Демонстрация
Demonstration

Картинка GIF
GIF picture

Просмотр файла Translit URL 1.0.2
Предоставляет настраиваемую транслитерацию для удобных URL-адресов.
Заменяет специальные символы в FURL в соответствии с пользовательскими настройками.
Поддерживает все приложения.
Полное описание:
 
Добавил SlawkA Добавлено 12/21/20 Категория Интерфейс Язык ENG  

Речь не столько о деньгах, сколько о юморе и тонкой под@бки. Не пытайтесь это понять 😉

Просмотр файла Ideas
Приложение Идеи позволяет вашим пользователям добавлять идеи в различные категории. Любые пользователи могут проголосовать за то, чтобы продвигать идеи, которые им нравятся. Администраторы могут пометить идеи как завершенные. Можно использовать и как баг-трекер, и как сайт запросов функционала (платного и бесплатного).
Опции:
Создание категорий. Пользовательские поля в различных категориях. Отображение полей в двух разных местах: ниже заголовка и под описанием. Активация / деактивация отображения боковой панели с категориями при просмотре идеи. Вкладки на главной странице приложения: Новые, Популярные и Завершённые идеи. Права групп на просмотр, чтение, добавление, комментирование идей в кажой категории.  Голосование за идеи без перезагрузки страницы (аякс). Администратор отмечать идеи как завершенные путем закрытия голосования. Можно оставлять комментарии к идеям. Примечание: Приложение после установки не добавляет свой пункт меню в верхнее меню сайта. Открыть приложение можно по ссылке: https://<ваш сайт>/ideas
Пароверено на 4.7.13.
Добавил Zero108 Добавлено 09/20/23 Категория Интерфейс Язык английский  

В дефолтной теме можно менять параметр в custom.css:
.ipsLayout_container { max-width: 1600px!important; padding: 0 15px; margin: 0 auto; position: relative; }  

(TB) Bump Up Topics 4.1.2.xml
(TB) Bump Up Topics 4.1.2.xml

В общем, проблема в том, что редактор как-то подхватывает и прописывает класс ipsCopyInit блоку в редакторе. Т.е. если создать блок кода и не отправляя сообщение открыть его HTML код кнопкой Источник, то будет видно, что этот класс ipsCopyInit уже присвоен. Собственно, об этом нам говорит иконка копирования в этом блоке кода, когда он еще находится в редакторе сообщения. Соответственно, отправляя сообщение мы уже у блока кода имеем этот класс и поэтому селектор 'pre.ipsCode:not(.ipsCopyInit)' ничего не находит при инициализации кнопок, и кнопку копирования не вешает.
В общем, в функции инициализации изменил селектор. Теперь он выбирает только те pre, которые находятся вне редактора и не имеют класса ipsCopyInit.
function init() { console.log('init'); $('pre.ipsCode:not(div.cke_widget_wrapper > pre.ipsCode):not(.ipsCopyInit)').each(function () { $(this).addClass('ipsCopyInit'); insertCopyButton($(this)); }); } Протестировал, вроде работает. Если у кого есть желание, проверьте тоже. Вдруг я чего упустил.
Copy to Clipboard 1.0.0 RUS.xml

4.7.10
 
Illuminate 4.7.10[webflake.xyz].xml

I purchased the original, I would love to hear what you have to offer in return

Really bro, you're embarrassing yourself! Stop pestering me, if I decide anyone who wants will get it and not just you Now seriously, stop pestering me, jealous boy.

Crazy no, not even the administrator realizes. what madness

You have to be more humble friend, just as you are going, you are not going to get anywhere. But the worst thing is not that, the worst thing is that you want to look good on the other site because you are a moderator and here you can do what you want. No, that is not allowed here

You are the worst. You are not welcome in this community
If the admin is seeing this post, I ask as a long time user to sanction @MrHaim, both him and his IP address

Be careful with this guy @MrHaim, he's doing the same on other sites
Look, as soon as I reported it, they sanctioned me from the site

I have just been notified from that same site that it was this same user who sanctioned me. I did it because I reported what I was doing.

I will give them to you freely 🥰