).
При переделке стиля иногда встает задача добавлять свои иконки в минипрофиль под аватарой во вьютопике.
На примере иконки с сылкой на профиль пользователя, я покажу как это делается.
В просилвере уже реализован механизм переключения иконки при наведении мышки, поэтому все что от нас требуется - правильно вставить нужную иконку в нужное место.
1. Подготавливаем иконки.
Так как на иконке будет надпись, то нам потребуется несколько иконок - для каждого языка.
Обычно иконки делаются под дизайн. Для стандартного просилвера можно взять эти:
- icon_contact_profile.gif (1.9 КБ) Просмотров: 13501
- icon_contact_profile.gif (2.05 КБ) Просмотров: 13502
2. Выкладываем иконки в папки styles\prosilver\imageset\ru(en)\
внутри каждой из этих папок лежит файл imageset.cfg со списком картинок. Нужно прописать имя картинки и ее размеры в него.
Обращаю внимание, что размер исходных файлов 60х40 для русского и 52х40 для английского, но так как у нас будет выводиться только половинка за раз, то высоту указываем в два раза меньшую.
Открываем:
styles\prosilver\imageset\en\imageset.cfg
Находим:
img_icon_contact_pm = icon_contact_pm.gif*20*28
Добавляем после:
img_icon_contact_profile = icon_contact_profile.gif*20*52
Открываем:
styles\prosilver\imageset\ru\imageset.cfg
Находим:
img_icon_contact_pm = icon_contact_pm.gif*20*28
Добавляем после:
img_icon_contact_profile = icon_contact_profile.gif*20*60
3. Добавляем новый блок во viewtopic. Это будет li class="info-profile-icon"
Открываем:
styles\prosilver\template\viewtopic_body.html
Находим:
Код: Выделить всё
<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->Добавляем ПЕРЕД ней:
Код: Выделить всё
<li class="info-profile-icon"><a href="{postrow.U_POST_AUTHOR}" title="{L_READ_PROFILE}"><span>{L_READ_PROFILE}</span></a></li>4. Опишем наш новый класс в css. Точнее, добавим его описание в компанию к аналогичным.
Открываем:
styles\prosilver\theme\colours.css
Находим:
/* Profile & navigation icons */
Добавляем после:
Код: Выделить всё
.info-profile-icon, .info-profile-icon a { background-image: url("{IMG_ICON_CONTACT_PROFILE_SRC}"); }Эта команда показывает, какой файл и откуда брать для нашего нового класса.
Открываем:
styles\prosilver\theme\buttons.css
Находим:
/* Profile & navigation icons */
Добавляем после:
Код: Выделить всё
.info-profile-icon, .info-profile-icon a { background: none top left no-repeat; }Находим:
/* Set profile icon dimensions */
Добавляем после:
Код: Выделить всё
ul.profile-icons li.info-profile-icon { width: {IMG_ICON_CONTACT_PROFILE_WIDTH}px; height: {IMG_ICON_CONTACT_PROFILE_HEIGHT}px; }Эти команды назначают бекграунд и размеры нашей новой кнопки.
5.(исправлено) Ну и заключительный штришок. Чтоб у нас все это корректно парсилось, чтоб работали переменные в css и картинки кешировались в базе, нужно сделаь следующее:
Открываем:
includes\acp\acp_styles.php
Находим строку:
'icon_back_top', 'icon_contact_aim', 'icon_contact_email', 'icon_contact_icq', 'icon_contact_jabber', 'icon_contact_msnm', 'icon_contact_pm'
В строке находим фрагмент:
, 'icon_contact_pm'
Добавляем после него:
, 'icon_contact_profile'
5a.(добавлено) так как иконки разные для разных языков, то тоже самое делаем в includes\acp\acp_language.php
6.(добавлено) Из админки лучше файлы не править, но если вдруг захочется нажать в админке "Наборы рисунков"-"изменить", то чтоб не получить ошибки, да и вообще, чтоб все красиво было, нужно добавить языковую переменную для описания нового гифа.
Это делается в файлах language\язык\acp\styles.php
Находим строку:
'IMG_ICON_CONTACT_PM' =>
Добавляем после:
'IMG_ICON_CONTACT_PROFILE' => 'Profile',
Или в русском варианте
'IMG_ICON_CONTACT_PROFILE' => 'профайл',
Как всегда, не забываем очищать кеш.
А вот пример такой иконки с живого сайта:
- icon_contact_profile_site.gif (10.37 КБ) Просмотров: 13478
