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

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

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

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

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

header.template -шапка сайта
footer.template - правая колонка и низ.
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>



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

         

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

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



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


       </div>
      </td>
    <td width="200">
            
       
   </td>
</tr>
<tr>
    <td valign="top"> </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>



</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. Их можно удалить или поменять местами. Каждый блок имеет название, поэтому удалить его не составит особого труда.

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

<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>

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

Заключение.

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

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

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

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