Встраивание новых (своих) картинок-иконок в prosilverВстраивание новых (своих) картинок-иконок в существующий информационный ряд в шапке и на странице темы (минипрофиль):
не так давно столкнулся с проблемой встраивания своих иконок-картинок в ряд уже существующих. в subsilver2 с этим никаких проблем - просто прописываешь путь в шаблоне и всё, но здесь иконки - это фоновые изображения с определённым позиционированием.
поэтому и решил написать кратенькую простую инструкцию по встраиванию новых.
Во-первых, общее: я несколько раз сталкивался с проблемой, когда при прописке новых иконок в существующие файлы css, наблюдались проблемы с отображением. поэтому я сразу акцентирую введение нового файла css, в котором уже и прописывать все новые иконки (так ещё и удобнее).
Для примера я выбрал 2 иконки (для шапки и темы):
Создал файл
dop.css, загрузил его в папку
styles/prosilver/theme/ и прописал (подключил) в
stylesheet.css:
Открыть
styles/prosilver/theme/stylesheet.cssНайти
Вставить после найденного
Всё. подготовка закончена. Теперь я (отдельно) покажу, как прописывается каждая из иконок.
вставка в шапке сайта (overall_header)
На данном скане показано, куда именно встраивается новая иконка. место в ряду вы можете выбрать сами, перемещая код вывода иконки в шаблоне overall_header.html
Вложение:
Комментарий к файлу: новая иконка в шапке
new_picture_1-1.png [ 9.69 КБ | Просмотров: 3849 ]
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 [ 54.34 КБ | Просмотров: 3849 ]
new_picture_2-2.png
Вложение:
Комментарий к файлу: новая иконка в минипрофиле при наведении
new_picture_2-1.png [ 58.09 КБ | Просмотров: 3849 ]
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
скачайте, распакуйте и пользуйтесь.
