Создание дизайн-шаблонов; уроки Photoshop, Illustrator, Lightroom, Gimp; обои для рабочего стола; иконки и headers для блогов.
Главная Фотоальбом Обо мне Карта блога
Подпишись на RSS!

Создание шаблона для системы блогов LifeType. Часть 2.

Ну вот, как и обещала, попробую научить Вас создавать свой шаблон фиксированный для движка блога LifeType (сверстанный под определенное разрешение экрана - как правило это 800 на 600). В блогах чаще всего используется именно этот вариант верстки. То ли его легче сделать, то ли он красивее смотрится, то ли просто  это нынче в моде. В общем это неважно. Приступим собственно к началу! Итак, для начала качаем мой приготовленный шаблон >>> (Он сделан на основе моего шаблона)

Чтобы поменять дизайн данного шаблона, необходимо изменять следующие файлы:

  1. header.template -шапка сайта
  2. footer.template - низ сайта
  3. sidebar.template - правая колонка
  4. post.template - главный контент сайта (статьи)
  5. style.css - стили

Способ 1. Замена картинок.

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

  • top.gif - шапка сайта (размер: 800 х 161)
  • sitebg.gif - фон сайта (размер: 800 х высота любая)
  • bottom.jpg - низ сайта (размер: 800 х 99)
  • bg.gif - фон на заднем плане (размер: любой)
  • columntop.gif - шапка колонки (размер: 220 х 47)
  • columnbg.gif - фон колонки (размер: 220 х высота любая)
  • columnbottom.gif - низ колонки (размер: 220 х 22)
  • date-bg.gif - картинка с датой в новостях (статьях)  (размер: 59 х 61)
  • search-btn-bg.gif - кнопка поиска (размер: 67 х 26)
  • btn-bg.gif - кнопка отправки комментариев (размер: 113 х 26)

Ну и конечно же открываем файл style.css и меняем цвета ссылок под свой дизайн.

Способ 2. Свой дизайн

Легче конечно будет изменить мой шаблон. Увеличить к примеру шапку, добавить верхнее меню и т.п. Но если у Вас есть свой полностью сверстанный дизайн и Вы хотите вставить его в свой блог... здесь конечно задачка будет посложнее.

Шапку сайта, до главного контента (новостного блока) вставляйте в файл header.template.
Правую колонку в файл footer.template.
Низ сайта в файл sidebar.template.
Ну и наконец в файле post.template можно полностью видоизменить то, как будет отображаться главный контент.

А также будте аккуратны в файле style.css - не удалите ничего лишнего!

Style.css.

Я не буду описывать подробно, что внутри этого файла, т.к. полное описание было в Части 1. Аналогично вносим изменения и здесь. Внутри файла вставлены мои комментарии.

Блоки.

Все блоки находятся в файле sidebar.template. Начало и конец каждого блока обозначены комментариями. Вы можете их удалять или менять местами.


Мариша
2 Январь, 2011

Добрый день! Спасибо за урок. Но к сожалению я не сильна в кодах( Мне очень нравится ваш шаблон с божьими коровками, который у меня и стоит -http://marishka.primorye.name/ Но проблема в том, что мои открытки туда не влезают. Вы не могли бы сделать фон для записей немного шире. или подскажите, как это сделать. Заранее спасибо.

Отправить комментарий

Не показывается.
Image CAPTCHA

Услуги по созданию дизайна; верстка



© JuliettaRose, 2008-2017. При использовании материалов ссылка на источник обязательна.
Яндекс.Метрика