[FAQ] Добавляем иконку в мини-профиль

Ответить
Woin
Сообщения: 436
Зарегистрирован: 28.12.2009
Ниже речь пойдет только о стиле prosilver и его производных.
При переделке стиля иногда встает задача добавлять свои иконки в минипрофиль под аватарой во вьютопике.
На примере иконки с сылкой на профиль пользователя, я покажу как это делается.

В просилвере уже реализован механизм переключения иконки при наведении мышки, поэтому все что от нас требуется - правильно вставить нужную иконку в нужное место.

1. Подготавливаем иконки.
Так как на иконке будет надпись, то нам потребуется несколько иконок - для каждого языка.
Обычно иконки делаются под дизайн. Для стандартного просилвера можно взять эти:
icon_contact_profile.gif
icon_contact_profile.gif    1.9 КБ • 767 просмотров
icon_contact_profile.gif
icon_contact_profile.gif    2.05 КБ • 767 просмотров

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'

6.(добавлено) Из админки лучше файлы не править, но если вдруг захочется нажать в админке "Наборы рисунков"-"изменить", то чтоб не получить ошибки, да и вообще, чтоб все красиво было, нужно добавить языковую переменную для описания нового гифа.
Это делается в файлах language\язык\acp\styles.php

Находим строку:
'IMG_ICON_CONTACT_PM' =>

Добавляем после:
'IMG_ICON_CONTACT_PROFILE' => 'Profile',

Или в русском варианте
'IMG_ICON_CONTACT_PROFILE' => 'профайл',


Как всегда, не забываем очищать кеш.
А вот пример такой иконки с живого сайта:
icon_contact_profile_site.gif
Источник http://www.phpbbguru.net/community/topic22538.html

Ответить