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

На написание этого мануала, меня сподвиг ресурс, нашего уважаемого пользователя mms.
На Renita-дисплеях, плотность пикселей в 4 раза больше, чем на обычных. К примеру, блок на обычных дисплеях будет занимать область 300x100 пикселей, а на Retina-дисплеях тот же блок получит 600x200 пикселей. Подробнее можно ознакомиться в статье на .
В принципе, то что предложил mms, можно использовать, но этот способ немного искажает изображение для обычных экранов.
Почитав статьи по этому поводу, пришел к мнению, что лучше всего использовать для логотипа векторную графику, формат svg. Это метод дает самый качественный результат, т.к. графика будет выглядеть одинаково четко при любом приближении. Но не буду его касаться, так как не могу работать с вектором, да и большинство присутствующих тоже :-).
Не буду останавливаться на других методах, о которых вы можете прочитать, перейдя по ссылке выше, опишу, как мне показалось, более интересный способ с использованием retina.js.

1. Для начала сделаем логотип, если вам необходим лого размером 200х70 пикселей, то делаем его в двух вариантах, сначала для renita - 400х140 пикселей, с именем [email protected], потом уменьшаем его (опять же это надо сделать правильно, читайте уроки по фотошоп) до размера для обычных дисплеев - 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/[email protected]" alt="{$xenOptions.boardTitle}" />
              </a></div>

Я указал полный адрес до логотипа х2 в папке по умолчанию http://АДРЕС САЙТА/styles/ВАШ СТИЛЬ/xenforo/[email protected], если у вас другой путь, то укажите его.

Ну вообщем, я думаю, принцип понятен. Так можно сделать для любых изображений вашего сайта.