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

Создание шаблона для LifeType. Часть 1: резиновая верстка

Итак, попробую научить Вас сделать собственный шаблон для своего блога. Я подумала, что будет намного легче, если Вы воспользуетесь моей специальной заготовкой.
Данный шаблон одноколоночный. Верстка резиновая (комбинированная div и table)
Состоит из  верхней части (логотип и фон), нижней части (фон) и правой колонки. 
Flower Скачать шаблон >>>

Flower Как установить шаблон. (Подробная инструкция по установке шаблонов)

Для начала вы заходите в Панель Управления >>> Управление Шаблонами >>> Новый шаблон. Загружаете скачанный шаблон, а затем в настройках блога, выбираете его. Идете в Редактор шаблонов, выбираете свой шаблон и там все видоизменяете по собственному вкусу.

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

  1. header.template -шапка сайта
  2. footer.template - правая колонка и низ.
  3. style.css - самый главный файл, в котором предстоит покопаться дольше всего! : -)

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

Для начала я опишу наиболее простой способ смены дизайна. Вы можете просто заменить картинки на свои и поиграть с цветами в файле style.css. (Что находится внутри него, я опишу подробно чуть позже)

Самое простое, это закачать картинки с таким же размером. В шаблоне 3 главные картинки:

  • logo.jpg - Логотип. Размер: ширина-128pх, высота-140px
  • topbg.gif - Фон в верхней шапке. Размер: высота-140px, ширина-любой размер
  • bottombg.gif - Фон внизу страницы. Размер: высота-50px, ширина-любой размер.
Если Ваши картинки размером больше или меньше, то надо будет поменять размеры в файле style.css. (Внутри файла есть описание)

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

У Вас есть приготовленный (сверстанный) одноколоночный дизайн. Чтобы Вам было удобнее, разбейте его на header и footer, закомментировав это.

Header - начало сразу после тега <body>, а конец перед главным контентом.
Footer - начало после главного контента и до </body>

Пример:

<body>

<!-- footer -->

<div class="topjr">
  <div class="logojr"></div>
    <div class="textlogojr">

           <!-- Заголовок блога -->

             <h1>{$blog->getBlog()}</h1>

           <!-- end Заголовок блога -->

    </div>
  </div>
<div class="mainjr">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
      <div class="maintextjr">
   
<!-- end footer -->

    Главный контент - в нашем случае новости блога. То, что хранится в файле: main.template

<!-- header -->

       </div>
      </td>
    <td width="200">
            <!--Правая колонка -->

       <!--end Правая колонка -->
   </td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bottomjr">
    <div class="styleBottom">LifeType</div>
    </td>
  </tr>
</table>
</div>

<!-- end header -->

</body>
</html

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

Style.css.

В этом файле я постаралась дать подробное описание всем необходимым классам, использовав комментарии: /* комментарий */
Но все таки я опишу действия, чтобы было еще более понятно.

Итак. С чего начнем? Вы уже наверное добавили свое лого и фон, и теперь надо подобрать к ним цвета. Приступим:

1. Заголовоки. h1 - название блога; h2 - название статьи.
Меняем цвет; размер шрифта; шрифт.

h1 {color:#990000; font-size:26px; font-family:Arial, Helvetica, sans-serif;}
h2 {color:#957D0F; font-size:16px; font-family:Arial, Helvetica, sans-serif;}

2. Ссылки. link (ссылка); visited (посещенная ссылка); hover (изменение цвета при наведении курсора); activе (активная ссылка).
Меняем цвета.

a:link {color: #990000;}
a:visited {color: #990000;}
a:hover {color: #000000;}
a:active {color: #990000;}

3. Главная страница. Ищем в файле  /* ~~~~~~~  Main  ~~~~~~~ */:

Дата создания статьи. 
Меняем шрифт, размер, цвет. Вы можете также оставить шрифт курсив и жирный, а можете просто удалить эти строчки. Класс:

 .date

Концовка статьи.
Меняем цвет линии, ее толщину и размер шрифта в классе: 

.footer {

Комментарии.
Класс комментариев, здесь меняем цвет линии.

 div.comment {

Добавление комментариев.

Класс формы добавления комментариев, здесь также меняем цвет линии.

#CommentForm fieldset {

Меняем цвет шрифта слов "Добавить комментарий" в классе:

#CommentForm legend {

4. Правая колонка. Ищем в файле/* ~~~~~~~  Column  ~~~~~~~ */
И  начинаем с этого класса:

#Calendar, #Search, #AboutMyself {

Как Вы уже догадались, это относится к Календарю, Поиску и блоку "Обо мне" (который становится виден только после добавления аватары и описания). Поменяйте цвет фона на свой.

Далее идут настройки календаря. Мы можем поменять там цвет и размер месяца, чисел и дней недели, а также поменять цвет фона, который отображает сегодняшнее число. (В файле описано какой цвет, что означает)

Класс заголовка. (Поиск, Календарь, Меню и др.)
Редактируем заголовок в блоках: категории, синдикат, последние, разделы, мои ссылки. Класс:

#Menu h2 {

Блоки: категории, синдикат, последние, разделы, мои ссылки. Здесь тоже самое, что и в первом блоке.

#Categories a, #Syndicate a, #Recently a, #Sections a, #MyLink a{

Следующий класс, это ссылки. Какими они будут при наведении курсора.

#Categories a:hover, #Syndicate a:hover, #Recently a:hover, #MyLink a:hover,
#Sections a:hover, #Categories a:focus, #Syndicate a:focus,
#Recently a:focus, #Links a:focus, #Categories a:active,
#Syndicate a:active, #Recently a:active, #Sections a:active {
background-color:#ffd300;
color:#7e6873;
}

Как убрать блоки?

Блоки, расположенные в правой колонке, хранятся в файле footer.template. Их можно удалить или поменять местами. Каждый блок имеет название, поэтому удалить его не составит особого труда.

Откройте этот файлик. Там все подписано. К примеру, если Вы хотите удалить блок "Поиск", найдите в файле код: 

<!--Search - Поиск-->
<form name="search_form" method="post" action="{$url->getIndexUrl()}">
<h2> {$locale->tr("search")}</h2>
<div id="Search">
<input type="text" name="searchTerms" value="" size="14" />
<input type="hidden" name="op" value="Search" />
<input type="hidden" name="blogId" value="{$blog->getId() }" />
<input type="submit" name="Search" value="{$locale->tr("search")}"/>
</div>
</form>
<!-- End Search -->

И удалите его. Аналогично можно удалять все блоки и менять их местами (вырезать и вставлять выше или ниже...)

Заключение.

Надеюсь, у меня получилось описать все просто и понятно.
Желаю Вам удачи в создании своего шаблона для движка блога LifeType! Smiles

Также можете прочитать как создать шаблон фиксированный и на DIV'ах.

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

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

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



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