Тестовик

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Тестовик » Смайлики » Скрипт кастомных смайлов для форума

Скрипт кастомных смайлов для форума

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03

Скрипт кастомных смайлов для форума
version: 1.0.2

Скрипт добавляет меню смайлов в панель ответа.

Польза:
1. Есть вкладка, где пользователь может сохранить собственные стикеры для личного пользования
2. Раскрывающийся список со стикерами не болтается под формой ответа
3. Ссылки на стикеры хранятся в отдельном файле и не засоряют поля html в настройках
4. Можно легко и просто разделить стикеры на группы
5. Картинки смайлов грузятся только при вызове меню, а не вместе со страницей

Как это выглядит

https://upforme.ru/uploads/000b/09/4f/10681/794179.png

Код:
<script src="https://forumstatic.ru/files/0017/95/29/40399.js"></script>
<script>
$(document).ready(function() {
  hvStickerPack.init("ССЫЛКА_НА_ФАЙЛ_СО_СТИКЕРАМИ");
});
</script>

Вместо ССЫЛКА_НА_ФАЙЛ_СО_СТИКЕРАМИ должна стоять ссылка на файл формата txt в кодировке UTF8 with BOM (иначе название вкладок будет нечитаемо в кириллице). Пример файла.

Формат файла смайлов
Код:
Название группы 1
http://урл1...
http://урл2...
http://урл3...
 
Название группы 2
http://урл4...
http://урл5...
http://урл6...
http://урл7...
http://урл8...
 
http://урл9...
http://урл10...
http://урл11...
http://урл12...
http://урл13...
Пособие по стилизации под свой форум

Я постарался сделать стили для скрипта на максимально низком уровне, чтобы администраторам было просто перебить предустановленные стили своими. Чтобы изменить стили окна стикеров используйте стиль:

Код:
.hvStickerPackModalContainer .hvStickerPackModal {
    background: ВАШ_ФОН;
    ...
}

Стили кнопок для стикерпаков:

Код:
.hvStickerPackModalContainer .hvStickerPackModalTab { ... }

Источник скрипта

Пример - здесь.

0

2

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03

Для этого скрипта

HTML верх

Код:
<!--поле для дополнительных смайлов-->
<style type="text/css">
#wrapper{position:relative;}
.tabs{height:22px; line-height:21px; margin:0 0 3px; list-style:none; font-size:10px;}
.tabs li{float:left;cursor:pointer;}
.tabs li a{background:transparent url("https://forumstatic.ru/files/0017/d8/50/91984.png")no-repeat scroll 0 0/cover;color:#444;display:block;margin-bottom:-1px;padding:0 5px 1px;position:relative;text-align:center;text-decoration:none;min-width:75px;}
.tabs li a:hover{color:#efefef;background:url("https://forumstatic.ru/files/0017/d8/50/91984.png")no-repeat scroll 0-22.1px/cover;text-decoration:none;}
.tabs li.active a{color:#444;border:medium hidden;background-position:0 -47.5px;}
.tabs li.active a:hover{color:#6A5ACD;}
#smilies-area.container {width:auto; position:inherit;}
#smilies-area div {display: inline-block;}
#smilies-area div[class^="t-"]:not(.t-0){display:none;}
#smilies-area img {max-height:60px!important; max-width:100px!important;}
@media screen and (max-width: 540px){
  .tabs{line-height:17px; margin:0 0 3px; list-style:none; font-size:9px;}
  .tabs li a{padding:1px; min-width:70px;}
  .tabs li.active a {background-position:0px -40.5px;}
  #smilies-area img {max-height:40px!important; max-width:50px!important;}
}
</style>

Этот скрипт улучшает представление вкладок смайликов. Чтобы вкладки были именно вкладками, а не гиперссылками, выстроенными в колонку. Он обязателен!

0

3

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03

Под формой ответа можно дать ссылки на сайты со смайликами.

HTML в форме ответа (строго в самом низу, иначе вторая ссылка не откроется)

Код:
<p style="text-align: center;"><span style="background-color: pink;">Дополнительные смайлики ищите <span style="text-decoration: underline;"><a style="background-color: pink;" href="https://san2.ru/smiles-animation" target="_blank"><strong>на этом сайте</strong></a> </span>или <span style="text-decoration: underline;"><a href="http://www.topglobus.ru/besplatno-smajliki-forum-blog-web" target="_blank"><strong>здесь</strong></a></span>.<br /></span></p>

0

4

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03
Код:
<!----------old----/files/001b/33/cf/48550.js---------------------------- СМАЙЛЫ © человек-шаман, наполнение astarta --->
<script src="https://forumstatic.ru/files/0017/95/29/40399.js"></script>
<script>
$(document).ready(function() {
  hvStickerPack.init("https://forumstatic.ru/files/000f/09/5e/51230.txt?v=18");
});
</script>

0

5

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03

БОЛЬШИЕ СМАЙЛИКИ (КОЛОБКИ):

http://smayly.ru/?cat=kolobok&nab=HD-Kolobok

0

Страница: 1

Вы здесь » Тестовик » Смайлики » Скрипт кастомных смайлов для форума

создать форум