Лого форума для iPhone/iPad

Лого форума для iPhone/iPad 1.0.1

Нет прав для скачивания
Совместимость с XenForo
  1. 1.1
  2. 1.2
  3. 1.3
  4. 1.4
  5. 1.5
На написание этого мануала, меня сподвиг ресурс, нашего уважаемого пользователя mms.
На Renita-дисплеях, плотность пикселей в 4 раза больше, чем на обычных. К примеру, блок на обычных дисплеях будет занимать область 300x100 пикселей, а на Retina-дисплеях тот же блок получит 600x200 пикселей. Подробнее можно ознакомиться в статье на .
В принципе, то что предложил mms, можно использовать, но этот способ немного искажает изображение для обычных экранов.
Почитав статьи по этому поводу, пришел к мнению, что лучше всего использовать для логотипа векторную графику, формат svg. Это метод дает самый качественный результат, т.к. графика будет выглядеть одинаково четко при любом приближении. Но не буду его касаться, так как не могу работать с вектором, да и большинство присутствующих тоже :-).
Не буду останавливаться на других методах, о которых вы можете прочитать, перейдя по ссылке выше, опишу, как мне показалось, более интересный способ с использованием retina.js.
  1. Для начала сделаем логотип, если вам необходим лого размером 200х70 пикселей, то делаем его в двух вариантах, сначала для renita - 400х140 пикселей, с именем logo@2x.png, потом уменьшаем его (опять же это надо сделать правильно, читайте уроки по фотошоп) до размера для обычных дисплеев - 200х70 пикселей logo.png. Изображения лучше делать в формате PNG.
  2. Заливаем изображения на сайт. По умолчанию, логотип лежит в папке xenforo, вашего стиля.
  3. Скачиваем архив с файлами js, там их два обычный и сжатый, использовать можно любой, отличаются размером.
  4. Читаем мануал.
  5. Применяем на своем сайте:
  • Создаем папку в директории js, с названием retina и заливаем в нее выбранный файл, retina.js или retina.min.js
  • Подключаем retina.js(retina.min.js) в шаблоне page_container_js_body
    Код:
    <script type="text/javascript" src="{$javaScriptSource}/retina/retina.js"></script>
  • В шаблоне logo_block находим:
    Код:
                <div id="logo"><a href="{$logoLink}">
                    <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
                </a></div>
  • И дописываем условие для альтернативного, х2, логотипа:
    Код:
                <div id="logo"><a href="{$logoLink}">
                    <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
                    <img src="@headerLogoPath" data-at2x="http://АДРЕС САЙТА/styles/ВАШ СТИЛЬ/xenforo/logo@2x.png" alt="{$xenOptions.boardTitle}" />
                </a></div>
Я указал полный адрес до логотипа х2 в папке по умолчанию http://АДРЕС САЙТА/styles/ВАШ СТИЛЬ/xenforo/logo@2x.png, если у вас другой путь, то укажите его.

Ну вообщем, я думаю, принцип понятен. Так можно сделать для любых изображений вашего сайта.
  • Мне нравится
Реакции: DimmmCom, Dennnn и Karat7
Автор
Skaiman
Скачивания
19
Просмотры
1,295
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Назад
Сверху Снизу