Перейти к содержимому

- - - - -

Оформление блоков в DLE


Что представляет собой блок в DLE?
В простейшем варианте это обычная таблица с двумя строками.
Выглядит это так
Код 1
<table width="200" border="1">
<tr>
<td>Заголовок блока</td>
</tr>
<tr>
<td>Содержимое блока</td>
</tr>
</table>
Меня лично это не устраивает. Ну какой может быть дизайн если вместо блоков вставить такие таблицы? Поэтому
для оформления блока необходим бекграунд для заголовка - как минимум+оформление border(границ) таблицы.


Я нарисовал оформление блоков+нашел немного разных стрелочек и иконок для оформления.

Как сделать бекграунд и оформление - учите css+html, я же привожу готовый код блока, все пути прописаны относительно
папки pics. (папку pics создаем в папке templates/Default)
Что представляет собой блок в DLE?
В простейшем варианте это обычная таблица с двумя строками.
Выглядит это так
Код 1
<table width="200" border="1">
<tr>
<td>Заголовок блока</td>
</tr>
<tr>
<td>Содержимое блока</td>
</tr>
</table>
Меня лично это не устраивает. Ну какой может быть дизайн если вместо блоков вставить такие таблицы? Поэтому
для оформления блока необходим бекграунд для заголовка - как минимум+оформление border(границ) таблицы.


Я нарисовал оформление блоков+нашел немного разных стрелочек и иконок для оформления.

Как сделать бекграунд и оформление - учите css+html, я же привожу готовый код блока, все пути прописаны относительно
папки pics. (папку pics создаем в папке templates/Default)

Код 2
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Заголовок блока </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
Содержимое блока 
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
В пути к картинкам вы обязательно должны указывать
{THEME}/
- это указывает движку что картинка находится в папке
с скином, а не где то еще.

Вот, теперь у нас есть ГОТОВАЯ заготовка для блока, что бы заменить ею все стандартные блоки нам потребуется еще
5 минут.

Самый главный вопрос из-за которого многие не спят ночами - "Да заготовка блока есть, а как же его вставить то
в дизайн", ответ на самом деле прост:

в папке templates/Default ищем файл main.tpl (если не найдете то этот урок не для вас :))

Открываем его - смело жмем на нем F4 (откроется блокнотом, у меня открывает Breed который встроен в TotalCMD)

1. Вход на сайт

В этом файле - main.tpl- куча строк непонятного когда. Первый блок который мы будем оформлять это Вход на сайт, вам необходимо найти код оригинального блока (проще всего это сделать нажав ctrl+F(поиск), и ввести в строку поиска "Вход на сайт")
Вот полный код этого блока (все остальные блоки выглядят так же, отличаются только содержимым, html код одинаков)

Код3:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Вход на сайт</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="copy">{login}</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
Как видите этот код представляет собой простую таблицу, с бекграундами и т.д.,
удаляем ПОЛНОСТЬЮ этот код и вставляем вместо него Код 2, вместо "Заголовок блока", пишем "Вход на сайт",
в то место где стоит "Содержимое блока", вы вставляете тег - {login} - именно он и выводит содержимое блока "Вход на сайт"
В итоге вы получите такой код:

Код 4:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Панель управления</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
{login}
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
Если вы заметили то строке таблицы где размещена надпись "Вход на сайт", назначен класс - class="navigation_box1".(в строке с содержимым есть class="navigationbg2" и class="navigationbg3"- о нем чуть позже).

Открываем файл templates/Default/css/style.css, в самом низу добавляем:

Код 5:
.navigation_box1 {
padding-top:5px; 
padding-left:30px; 
font-weight:bold; 
color:#000000; 
border-bottom:0px solid #B8B8B8;
background: url("../pics/block_01.gif");
background-repeat: no-repeat;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.navigationbg2{
background: url("../pics/block_02.gif"); 
background-repeat: repeat-y; 
color: black;
font-size: 11px;
font-family: tahoma;
padding: 5px;
}
.navigationbg3{
background: url("../pics/block_03.gif"); 
background-repeat: no-repeat; 
}
Это css оформление строки - бекгроунд (картинка на котором находится заголовок блока), положение бекграунда, шрифт,трансформация, вид шрифта, размер шрифта, 2 отступа. Если вы этого кода не понимаете - то вам еще рано делать самим дизайн для DLE, и я рекомендую изучить CSS, для начала.

Вот скриншот того что получилось:

Изображение


Тюнинг - тюнингом называется доведение участка страницы (либо всей страницы)..нет не до белого каления и не до зеленых чертиков..как вы подумали, а до окончательного блеска - ровняются участки текста, ссылки, цвета и т.д. Здесь все зависит от знания CSS+HTML, вот как бы это сделал я:

НО...это еще не все, как вы видите на скриншоте - ссылка "регистрация на сайте" выглядит несколько кривовато(я специально убрал class="copy" что бы продемонстрировать), за оформление этого блока отвечает класс css - copy, итак строке в которой выводится содержимое назначаем class="copy", далее открываем templates/Default/css/style.css,и находим там такой код

Код 6:
.copy {
color: #727272;
font-size: 11px;
font-family: tahoma;
padding: 5px;
}
и удаляем его, наш класс это class="navigationbg2", в нем уже прописаны шрифты, размер и т.п. (см. код 5)

Далее чуть ниже находим оформление линков:

Код 7:
.copy a:active,
.copy a:visited,
.copy a:link {
color: #727272;
text-decoration:none;
}
.copy a:hover {
color: #727272;
text-decoration: underline;
}
Заменяем его на:

Код 8:
.navigationbg2 a:active,
.navigationbg2 a:visited,
.navigationbg2 a:link {
color: #5E85B0;
text-decoration:none;
}
.navigationbg2 a:hover {
color: #727272;
text-decoration: underline;
}
Но и это еще не все - когда тебе за дизайн платят деньги нужно быть уверенным что ты их отработал, что бы не назвали барыгой или ламмером, Меняем отступ формы ввода пароля/логина

Открываем файл login.tpl

Находим код:

Код 9:
$login_panel = <<<HTML
<div style="padding-top:5px; padding-left:21px;"><form method="post" onsubmit="javascript:showBusyLayer()">
<table width="165" class="stext">
<tr align="left" valign="middle">
<td width="58" height="25" align="right">Логин</td>
<td height="25" align="right"><input type="text" name="login_name" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="right">Пароль</td>
<td height="25" align="right"><input type="password" name="login_password" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="right">&nbsp;</td>
<td height="25" align="right"><div style="padding-top:2px; padding-left:0px;">
<input onclick="submit();" name="image" type="image" src="{THEME}/images/send.png">
<input name="login" type="hidden" id="login" value="submit">
</div></td>
</tr>
</table></form>
</div><div style="padding-top:8px; padding-left:55px; padding-bottom:5px;"><a href="{$link_regist}">Регистрация на сайте!</a><br /><a href="{$link_lost}">Забыли пароль?</a></div>
HTML;
}
?>
Что нас здесь интересует? Человек знающий хоть немного CSS+HTML сразу поймет, для остальных объясню нас интересует выравнивание и отступы. Необходимо убрать все padding-left:21px;, и align="right" заменить на align="left" (+ такое выравнивание поставить всей таблице), а так же в предпоследней строке заменить padding-left:55px; на padding-left:5px;

Вот что получилось:

Код 10:
$login_panel = <<<HTML
<div style="padding-top:5px;"><form method="post" onsubmit="javascript:showBusyLayer()">
<table width="165" class="stext">
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Логин</td>
<td height="25" align="right"><input type="text" name="login_name" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">Пароль</td>
<td height="25" align="right"><input type="password" name="login_password" style="width:103px; height:20px; font-family:tahoma; font-size:11px; border:1px solid #E0E0E0 "></td>
</tr>
<tr align="left" valign="middle">
<td width="58" height="25" align="left">&nbsp;</td>
<td height="25" align="right"><div style="padding-top:2px; padding-left:0px;">
<input onclick="submit();" name="image" type="image" src="{THEME}/images/send.png">
<input name="login" type="hidden" id="login" value="submit">
</div></td>
</tr>
</table></form>
</div><div style="padding-top:8px; padding-left:5px; padding-bottom:5px;"><a href="{$link_regist}">Регистрация на сайте!</a><br /><a href="{$link_lost}">Забыли пароль?</a></div>
HTML;
}
?>
И последний штрих, находим код
<div style="padding-top:2px; padding-bottom:5px; padding-left:75px;"><a onclick="javascript: showBusyLayer()" href="{$link_logout}"><b>Завершить сеанс!</b></a></div>
HTML;
и меняем на
<div style="padding-top:2px; padding-bottom:5px; padding-left:10px;"><a onclick="javascript: showBusyLayer()" href="{$link_logout}"><b>Завершить сеанс!</b></a></div>
HTML;
таким образом вы меняете расположение кнопки "завершить сеанс", в коде меняется только padding-left:75px на padding-left:10px; т.е. вы меняете отступ от левой границы.

Все - блок Вход на сайт можно считать оформленным, это самый сложный блок для оформления

Изображение

Изображение

Оформляем остальные блоки:

2. Навигация по сайту (рассматривается вариант с включенным ЧПУ)

Дальше идет блок Навигация по сайту, почему-то у новичков создание навигации вызывает сильные затруднения, на самом деле это
ОЧЕНЬ просто. Итак - нам нужно создать меню со ссылками на разделы сайта. Для начала мы должны создать новостные разделы, идем в админцентр - категории - создаем новые категории новостей, имена пишем латиницей, создаем допустим 3 категории,

1.soft
2.games
3.music


Сделали. Теперь туда нужно добавить туда хоть по одной новости (при переходе в пустой раздел вы увидите сообщение "Статьи по данному критерию не найдены"), добавили, кто не знает - это делается из админки-добавить новость.

я рассматриваю вариант навигации с включенным ЧПУ.

При включенном Чпу ссылка на любую категорию выглядит так http://www.вашсайт.ру/category/имя категории
Допустим у меня есть сайт [url="""]http://wolf-host.ru,[/url] и есть категория soft, то ссылка будет выглядеть так
<a href="http://wolf-host.ru/category/soft">Программы</a>
Если вы делаете ссылку на статическую страницу, то она будет выглядеть как http://site.ru/static/страница.html
<a href="http://wolf-host.ru/static/страница.html">Статическая страница </a>
Итак, ссылки (пример на основе моего домена)

1. http://wolf-host.ru/category/soft
2. http://wolf-host.ru/category/games
3. http://wolf-host.ru/category/music

а ссылки которые пойдут в модуль будут выглядеть так:
1. <a href="http://wolf-host.ru/category/soft">Программы</a>
2. <a href="http://wolf-host.ru/category/games">Компьютерные игры</a>
3. <a href="http://wolf-host.ru/category/music">Музыка</a>
Но - в модуль можно добавить вообще ЛЮБУЮ ссылку, на что угодно, я добавлю ссылку на форум
1. <a href="http://wolf-host.ru/category/soft">Программы</a>
2. <a href="http://wolf-host.ru/category/games">Компьютерные игры</a>
3. <a href="http://wolf-host.ru/category/music">Музыка</a>
4. <a href="http://wolf-host.info">Мой форум</a>
осталось самое простое - вставить эти ссылки в модуль Навигации

Открываем опять main.tpl, ищем там оригинальный блок

Код 11:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Навигация по сайту</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="stext"><div align="justify">После создания всех необходимых категорий, вы можете добавить вручную ссылки на просмотр новостей из этих категорий. Ручное добавление ссылок является более гибким и не создает нагрузки на сервер.</div><div style="padding-left:30px;"><br /><a href="/index.php?do=feedback">Обратная связь</a><br /><a href="/engine/rss.php">RSS новости</a><br /><br /></div></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
Удаляем его, а вместо него вставляем КОД2 - да-да, вставляем код модуля Вход на сайт, ничего ужасного здесь нет, оформление то ИДЕНТИЧНОЕ у всех блоков, а изменяется в нем только Заголовок и Содержимое, в данном случае в заголовке вы пишете Меню, вместо тега {login} вы вставляете свои ссылки на разделы сайта.

Вот что в итоге получится:

Код 12:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Разделы сайта</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="padding-left:5px">
<table border="0" cellpadding="0" cellspacing="0" width="170">
<tr>
<td class="navigation_box_bg">
<div><a href="http://monsterteam.ws/category/soft" class="navi_first">Софт</a></div> 
<div><a href="http://monsterteam.ws/category/games" class="navi_first">Игры</a></div> 
<div><a href="http://monsterteam.ws/category/music" class="navi_first">Файлы</a></div> 
<div><a href="http://monsterteam.info" class="navi_first">Форум</a></div> 
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
Тюнинг - как вы заметили в блоке с содержимым появились новые стили - class="navigation_box_bg", class="navi_first" открываем файл templates/Default/css/style.css и добавляем в него такой код (можно в самый низ):

Код 13:
.navigation_box_bg {background:#f8f8f8; padding:5px}
 
a.navi_first:link, a.navi_first:visited {
background:#f8f8f8 url(../pics/navi_first.gif) left no-repeat;
display:block;
color:#3a7fb1;
text-decoration:none;
font-size:11px;
border-bottom: 1px solid #dcdcdc;
_border-bottom: 1px solid #dcdcdc;
padding-left:18px;
padding-top:5px;
padding-bottom:5px;
font-weight:normal;
}
 
a.navi_first:hover {
background:#f8f8f8 url(../pics/navi_first_active.gif) left no-repeat;
color:#000;
font-weight:normal
}
 
a.navi_first_active:link, a.navi_first_active:visited {
background:#f8f8f8 url(../pics/navi_first_active.gif) left no-repeat;
display:block;
color:#000;
text-decoration:none;
font-size:11px;
border-bottom: 1px solid #dcdcdc;
_border-bottom: 1px solid #dcdcdc;
padding-left:18px;
padding-top:5px;
padding-bottom:5px;
font-weight:normal;
}
Что этот код делает? Он меняет оформление ссылок в меню - шрифт, цвет, добавляет графику. Обычный CSS и ничего более.

Изображение

Остальные блоки оформляются буквально за минуту, по аналогии с предыдущими

3. Опрос на сайте

Берем код оригинального блока:

Код 15:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Опрос на сайте</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="stext" style="padding-left:5px;">{vote}</td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
Заменяем его на свой (ставим заголовок "Опрос на сайте" и содержимое - тег {vote}, он и выводит опрос) :

Код 16:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Опрос</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
{vote}
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
Все блок оформлен, дополнительные настройки для тюнинга находятся в файле vote.tpl

Изображение

4. Календарь

находим код:

Код 17:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Календарь</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td style="padding-left:20px;">{calendar}<br /></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
и заменяем его на свой, по аналогии с предыдущими пунктами

Код 18:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Календарь</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
{calendar}
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
Тег {calendar} выводит календарь

Дополнительное редактирование календаря:

файл engine.css - в нем прописаны все основные стили движка, ищем секцию:
/* 
* ========================================
* Календарь 
* ========================================
*/
Все что ниже подлежит редактированию - цвет, отступы и т.д., либо же вы можете оставить все как есть, если вас устраивает

Скриншот(css остался неизменным)

Изображение

5. Популярные статьи

находим код:

Код 19:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Популярные статьи</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="copy">{topnews}<br /></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
и меняем его на свой:

Код 20:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Популярное</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px" class="news">
{topnews}
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
Тег {topnews} выводит топ новостей.



6. Архив новостей и смена скина

Небольшие блоки, поэтому объединил в один пункт:

Находим такой код (два блока, идут друг за другом):

Код 21:
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Архив новостей</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="copy">{archives}<br /></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
 
<table width="100%">
<tr>
<td width="5"><img src="{THEME}/images/ltdt.png" width="5" height="50" border="0"></td>
<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top">Выберите скин</td>
<td width="5"><img src="{THEME}/images/rtdt.png" width="5" height="50" border="0"></td>
</tr>
<tr>
<td background="{THEME}/images/ltd.gif"><img src="{THEME}/images/ltd.gif" width="5" border="0"></td>
<td class="skin">{changeskin}<br /></td>
<td background="{THEME}/images/rtd.gif"><img src="{THEME}/images/rtd.gif" width="5" border="0"></td>
</tr>
<tr>
<td><img src="{THEME}/images/ltdb.png" width="5" height="10" border="0"></td>
<td background="{THEME}/images/tdbbg.png"><img src="{THEME}/images/tdbbg.png" width="1" height="10" border="0"></td>
<td><img src="{THEME}/images/rtdb.png" width="5" height="10" border="0"></td>
</tr>
</table>
и заменяем на:

Код 22:
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Архив</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
{archives}
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
 
<br>
 
<table width="100%" height="32" cellpadding="0" cellspacing="0">
<tr>
<td class="navigation_box1">Выберите скин</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" class="navigationbg2">
<div style="width:190px; padding-left:5px">
<center>{changeskin}</center>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" height="15">
<tr>
<td class="navigationbg3"><img src="{THEME}/pics/block_03.gif" height="15" border="0"></td>
</tr>
</table>
<br>
{archives} - выводит архив новостей, {changeskin} - выводит форму смены скина

Код:

Скриншот:


Изображение

ВСЕ.

Если вы еще не поняли - вы только что заменили все стандартные блоки на свои, с чем я вас и поздравляю :)
  • Legend это нравится


0 Comments

Яндекс.Метрика Рейтинг@Mail.ru
Besucherzahler femmes russes a marier
счетчик посещений