Posted on By seodiz_baza_

Blue-sky (HTML5) тема для Litepublisher

Blue-sky тема для публишерлайт

Blue-sky: Скачать бесплатно

Важно: Эта версия темы немного устарела и не поддерживает Lite Publisher начиная с версии 4.93-*. Для версий 5* предназначена обновленная версия Blue-Sky темы.

Наконец закончил разработку новой темы для Lite publisher CMS. Верстка отняла намного больше времени, чем я планировал. Поскольку кроссбраузерного отображения я добивался не использованием хаков, а переписыванием и приведением кода в оптимальный вид для корректного отображения во всех браузерах.

Описание темы

Blue-sky — светло голубая, сверстанная на HTML5 с некоторыми эффектами CSS3, оптимизированная под поисковые системы тема.

Сверстана без использования CSS хаков для достижения кроссбраузерности. Отказался даже от использования скриптов .htc для того чтобы научить IE CSS3.

Поскольку HTML5 только начинает вводиться в обиход и полностью пока еще не поддерживается большинством браузеров, свел количество новаторских тегов к минимуму.

Исправлены даже некоторые недостатки и не корректное отображение в IE 6-7, присутствующие у дефолтной темы.

С помощью стилей реализовано красивое отображение облака меток-тегов.
Код счетчиков в футер и баннера 368х60 в хеадер добавляется из админки.

Валидность:

  • Html код шаблонов темы полностью валиден.
  • Css стили валидны за исключением нескольких строчек с атрибутами, специфичными для отдельных старых вариантов браузеров, необходимых для поддержки эффектов CSS3.
    Их в случае необходимости можно легко удалить.

Кроссбраузерность(на чем тестировал лично):

  • IE 6 — IE 8 — без отображения эффектов CSS3 (закругленные углы, текст с тенью).
  • IE 9 — за исключением текста с тенью
  • FF 3.6 — FF 4 — полная поддержка всех еффектов, более ранние — частичная.
  • Opera 9 — полная

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

SEO оптимизация

  1. Минимальное количество кода, стилей, фоновых картинок для ускорения загрузки страниц.
  2. СЕО дружественный порядок загрузки элементов страницы:
    1. Контент
    2. Правый сайдбар
    3. Футербар
    4. Хеадер
    5. Футер

Установка темы:

Файлы темы находятся в архиве, который можно загружать прямо на ваш сервер загрузчиком тем и плагинов движка.
Для корректного отображения, заменить весь код в секции HEAD админки(кроме скриптов экстра установленных вами плагинов), на:

<meta name="generator" content="Lite Publisher $site.version" /> <!-- leave this for stats -->
<link rel="stylesheet" href="$template.url/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="$site.url/js/prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="$site.name RSS Feed" href="$site.url/rss.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="$site.url/rsd.xml" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="$site.url/wlwmanifest.xml" />
<link rel="shortcut icon" href="$template.icon" type="image/x-icon" />
<link rel="pingback" href="$site.url/rpc.xml" />
<link rel="sitemap" href="$site.url/sitemap.htm" />
<!--[if lt IE 9]><script>var e=("article,aside,footer,header,nav,section").split(',');for (var i=0;i<e.length;i++){document.createElement(e[i]);}</script><![endif]-->
<!--[if lte IE 6]><script type="text/javascript" src="$template.url/js/DD_belatedPNG.js"></script><script type="text/javascript">DD_belatedPNG.fix('#top .left a,#connect img,.post-tags,post-rss,.post-rsscomments');</script><![endif]-->
<script type="text/javascript" src="$site.files/js/litepublisher/litepublisher.$site.jquery_version.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});</script>

Или другой вариант: заменить содержание скрипта DD_belatedPNG.js в условных комментариях на приведенное выше, и добавить код:

<!--[if lt IE 9]><script>var e=("article,aside,footer,header,nav,section").split(',');for (var i=0;i<e.length;i++){document.createElement(e[i]);}</script><![endif]-->

Если у вас появятся вопросы по теме или помошь в подгонке, изменении ширины сайдбара, высоты хеадера и т.п., спрашивайте в комментариях к посту, обязательно отвечу и помогу.

Статьи по теме: