info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 3238

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 5 месяцев 12 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Встраивание новых (своих) картинок-иконок в prosilver

Встраивание новых (своих) картинок-иконок в существующий информационный ряд в шапке и на странице темы (минипрофиль):

не так давно столкнулся с проблемой встраивания своих иконок-картинок в ряд уже существующих. в subsilver2 с этим никаких проблем - просто прописываешь путь в шаблоне и всё, но здесь иконки - это фоновые изображения с определённым позиционированием.
поэтому и решил написать кратенькую простую инструкцию по встраиванию новых.

Во-первых, общее: я несколько раз сталкивался с проблемой, когда при прописке новых иконок в существующие файлы css, наблюдались проблемы с отображением. поэтому я сразу акцентирую введение нового файла css, в котором уже и прописывать все новые иконки (так ещё и удобнее).

Для примера я выбрал 2 иконки (для шапки и темы):

ИзображениеИзображение

Создал файл dop.css, загрузил его в папку styles/prosilver/theme/ и прописал (подключил) в stylesheet.css:

Открыть styles/prosilver/theme/stylesheet.css

Найти

Код: Выделить всё

@import url("colours.css");


Вставить после найденного

Код: Выделить всё

@import url("dop.css");


Всё. подготовка закончена. Теперь я (отдельно) покажу, как прописывается каждая из иконок.

вставка в шапке сайта (overall_header)
На данном скане показано, куда именно встраивается новая иконка. место в ряду вы можете выбрать сами, перемещая код вывода иконки в шаблоне overall_header.html

Вложение:
Комментарий к файлу: новая иконка в шапке
new_picture_1-1.png
new_picture_1-1.png [ 9.69 КБ | Просмотров: 3238 ] new_picture_1-1.png



Теперь - как именно её там прописать:

Загружаем иконку icon_dop.gif в папку styles/prosilver/theme/images/

Открываем файл styles/prosilver/theme/dop.css и прописываем код вывода:

Вставляем в начале файле

Код: Выделить всё

.icon-dop {
   background-position: 0 50%;
   background-repeat: no-repeat;
   padding: 1px 0 0 17px;
   background-image: url("{T_THEME_PATH}/images/icon_dop.gif");
}

.rtl .icon-dop {
   background-position: 100% 50%;
   padding: 1px 17px 0 0;
}



Прописываем вывод новой иконки в шаблоне. Открыть styles/prosilver/template/overall_header.html

Найти

Код: Выделить всё

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>


Вставить после найденного

Код: Выделить всё

<li class="icon-dop"><a href="#" title="">DOP</a></li>


вместо # (ссылка) и DOP (название) пропишите свои данные.


На этом всё. Почистите кэш и всё в порядке. Иконка должна сразу появиться в том месте, где показано на скане.

вставка в минипрофиле темы (viewtopic)
На данных сканах показано, где именно появится новая иконка. На втором скане показана иконка при наведении.

Вложение:
Комментарий к файлу: новая иконка в минипрофиле
new_picture_2-2.png
new_picture_2-2.png [ 54.34 КБ | Просмотров: 3238 ] new_picture_2-2.png



Вложение:
Комментарий к файлу: новая иконка в минипрофиле при наведении
new_picture_2-1.png
new_picture_2-1.png [ 58.09 КБ | Просмотров: 3238 ] new_picture_2-1.png



1. Файл иконки dop_icon.gif загружаем в папку styles/prosilver/imageset/

2. Прописываем вывод:

Открыть файл styles/prosilver/theme/dop.css

Прописать в любом месте

Код: Выделить всё

.dop-icon, .dop-icon a      { background: none top left no-repeat; }
ul.profile-icons li.dop-icon   { width: 20px; height: 20px; }
.dop-icon, .dop-icon a      { background-image: url("{T_IMAGESET_PATH}/dop_icon.gif"); }


Открыть файл styles/prosilver/template/viewtopic_body.html

Найти

Код: Выделить всё

<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->


Вставить после найденного

Код: Выделить всё

<li class="dop-icon"><a href="#" title=""><span>DOP</span></a></li>


вместо # (ссылка) и DOP (название) пропишите ваши значения


Почистите кэш и всё готово. Иконка должна сразу появиться в том месте, которое указано на сканах.


Всё. Очень просто. Будут вопросы - обращайтесь.

Решил добавить готовый файл dop.css - вдруг кому пригодится:

Вложение:
dop.rar [367 байт]
Скачиваний: 32


скачайте, распакуйте и пользуйтесь. :)


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
prosilver,phpbb 3.0,иконка,новая
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 03 мар 2024, 23:29

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид