Главная » Статьи » » -=CMS=-
Создание Шаблона для 1С-Битрикс
Создание шаблонов под Bitrix


Поехали…..

Начнем рассказ со структуры шаблонов и с системой связи фалов шаблона. Посмотрите внимательно на следующую таблицу:




Данную таблицу, перед началом каких-либо действий нужно изучить как отче наш, иначе можно так накосорезить что недель разбираться придется!!! Ну что поняли взаимосвязи файлов, тогда переходим к действиям!!
Имеется два пути создания своего шаблона для Битрикса: 1) самый простой путь изменения готового шаблона путем перетасовки кусков и замены фоток (Быстро, но неэффективно); 2)Создание с нуля (самый правильный путь, хотя и долгий). В данной статье будут описан стандартный шаблон все его функции и процедуры, ЧТО ПОМОЖЕТ ВАМ СДЕЛАТЬ ЧТО ХОТИТЕ В ДИЗАЙНЕ БИТРЫ!

Header.php.

Структура главного файла header.php представляет из себя, простую HTML страницу с простыми включениями объектов (скриптов) в заданную область.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

Ну что про это скажешь!

<meta http-equiv="Content-Type" content="text/html; charset=">

Опрашиваем ядро Битры какой язык выбран, чтобы в последующем загружать нужный языковой пакет.

<META NAME="ROBOTS" content="ALL">
ShowMeta("keywords")?>
ShowMeta("description")?>

Тоже ничего сложного, кто не понял тому этого и не надо. В принципе весчь не критичная и послать куда подальше эти мета теги и указать на свое. Ваш сайт и без этого нормально проиндексируют поисковики.

<title>ShowTitle()?></title>

Заголовок окна! Берется из index.php корневого каталога

$APPLICATION->SetTitle("&laquo;Битрикс: Управление сайтом 4.x&raquo; nulled by Nosferatu");

3 строка сверху обрабатываем и выдаем наружу

ShowCSS();?>

Подгружаем каскадку, там вся инфа о шрифтах цветах и прочем если кто незнает!! Хотя если вы этого не знали то идите в жопу, это не для вас!

<script language="JavaScript1.2" src="/bitrix/templates/template3/js/ddnmenu.js"></script>

Подгружаем скрипт выпадающего меню.

</head>

Закрыли заголовок, эту часть желательно сильно не коцать она все равно должна быть. Сейчас пойдет самое интересное. ТЕЛО!!!!

<body link="#B5B5B5" alink="#999999" vlink="#C8C8C8" text="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>

Тело, открываем таблицу для особо одаренных!

ShowPanel();?>

Вызываем администраторскую панель Вот ету вот.

Её можно поместить как вверху страницы, так и в низу её, главное соблюсти форматирование таблиц. Вызов функции идет из bitrix\modules\main\public\top_panel.php там же можно и изменить дизайн этой панельки, но это в другой статье (обезличивание админки).



Загружаем сам языковой пакет

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="0%" background="/bitrix/templates/template3/images/top_back.gif"><a href=""><img src="/bitrix/templates/template3/images/top_1.gif" alt="<?echo GetMessage("MAIN_PAGE");?>" width="380" height="82" border="0"></a></td>
<td width="100%" align="right" background="/bitrix/templates/template3/images/top_back.gif">
IncludeFile("main/site_panel.php", "php");?></td>
<td background="/bitrix/templates/template3/images/top_back.gif"><img src="/bitrix/templates/template3/images/top_right.gif" alt="" width="125" height="82"></td>
</tr>

Открыли табличку, открыли столбик, открыли строчку поставили фон, все проще простого.

<a href="">

Ссылочка на главную страницу, ссылочка представляет из себя фотку типа LOGO COMPANY хех муть та какая.

alt="

Вот эта весчь вызывает надпись: “На главную страницу”, но в языковом пакете можно переделать на: “Пошли на хуй ублюдки” рекомендуется :=).

IncludeFile("main/site_panel.php", "php");?>

Без комментариев, вызываем функцию смены сайтов!! По умолчанию из два Ваш сайт и Ваш сайт но на непонятной смеси китайского и английского языков.

</table>

Закрыли таблицу, ну и флаг ей в руки и барабан на шею.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="0%" background="/bitrix/templates/template3/images/top_menu_back.gif"><img src="/bitrix/templates/template3/images/1.gif" alt="" width="20" height="1"></td>
<td width="100%" background="/bitrix/templates/template3/images/top_menu_back.gif"><?echo $APPLICATION->GetMenuHtmlEx("top");?></td>
<td width="0%" background="/bitrix/templates/template3/images/top_menu_back.gif"><img src="/bitrix/templates/template3/images/1.gif" alt="" width="20" height="1"></td>
</tr>

Что то где-то я ужо это видел, бля да чуть выше!! Все тоже самое только здесь вызывается только вот ето:

GetMenuHtmlEx("top");?>

Это у нас выпадающая менюшка помните такую, так вот она и вызывается из top.menu_template.php, кто смотрел на табличку в самом начале врубился, сто при небольшой переделки её можно вхуяривать в любую часть сайта.

</table>

Уря закрыли табличку!!!!!!!!!!!!!!!

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="0%" valign="top" bgcolor="#F6F8FB">
<img src="/bitrix/templates/template3/images/photo_1.jpg" width="177" height="140" alt=""><br>

Левое меню отрываем, пропускаем кусок.

GetMenuHtml("left", true);?>

Вызываем левобокое меню. Оба-на смотрим внимательно на верхнее и на левое меню

GetMenuHtmlEx("top");?>
GetMenuHtml("left", true);?>

Найди 10 отличий и дауну понятно, что практически одно и тоже!! Хочеш сделать выплывающее меню слева, запросто меняем LEFT на TOP и TOP на LEFT, труе за борт и кое что меняем в менюхах и все готово (разберитесь сами там ничего сложного нет). Получится типа

GetMenuHtml("top", true);?> верх
GetMenuHtmlEx("left");?> бок

Про дескрипторы не забывать, а то накасячите, знаю я вас!!!

IncludeFile("sale/sale_pieces/basket_line.php", "php");?>

Вызов карзинки пользователя, ну и заодно персональный раздел

<br>
<div style="padding-left: 30px;"><font class="smalltextwhite"><b><?echo GetMessage("SEARCH");?></b></font></div>
<br>

Вызываем заголовок поиска из языкового модуля.

IncludeFile("search/search_form.php", Array("SEARCH_PAGE" => SITE_DIR."search/index.php"));?>
<br>

Поиск по сайту, глупо вооще думать даже не надо что где все ужо написано кодом.
Функция Search находится по адресу: bitrix\modules\search\ Дальше спросить Васю Пупкина!! К стати там можно покопаться посерьезней сука хорошо написан поисковичек. Пизди на свой сайт если надо, лучше не найдешь!!!

<div style="padding-left: 30px;"><font class="smalltextwhite"><b><?echo GetMessage("AUTH_LOGIN");?></b></font></div>
<br>

Тупо заголовок авторизации.

IncludeFile("main/auth/auth_form.php", "php");?>

Тупо авторизация.

<div style="padding-left: 30px;"><font class="smalltextwhite"><b><?echo GetMessage("RATES_HEADER");?></b></font></div>

Тупо заголовок курса волют!!! Скушно жуть как!!!

<br>
<?$APPLICATION->IncludeFile("currency/show_rates.php", Array(
"arrCURRENCY_FROM" => Array("USD"), // Массив преобразованной валюты "CURRENCY_BASE" => "RUR", // конвертирующая валюта "RATE_DAY" => "", // Показатель даты в формате "Y-m-d"// "CACHE_TIME" => $GLOBALS["CACHE_TIME"], // Время Кеша (sec.) )
);?>
<br>

Вызываем его. Вооще интересно пиздец сделали везде все в модулях спрятано, а тут во как. Я хуею чем дальше тем больше!! Вооще заборт нах её (валюту эту).

<div style="padding-left: 30px;"><font class="smalltextwhite"><b><?echo GetMessage("SUBSCR");?></b></font></div>

Заголовок подписьки.

IncludeFile("subscribe/subscr_form.php", Array("PAGE" => SITE_DIR."personal/subscr_edit.php"));?>
<br>

Собственно подписка, штука нужная!! Найди где лежит!

ShowBanner("LEFT", '
', '

');?>
ShowBanner("LEFT2", '
', '

');?>

Боковые баннеры, где, что и как лежит все вбивается сюда!!

ShowBanner("COUNTER", '
', '

');?>

Баннер типа кнопки, для Flash баннеров.

<div align="center">
IncludeFile("statistic/stat_table/default.php", Array());?>
</div>
<br>

Таблица статистики, её внешний вид меняется в bitrix\modules\statistic\public\stat_table.php Если кому охота переправит эту гадость!!

<td width="0%" valign="top"><img src="/bitrix/templates/template3/images/shadow_back.gif" alt="" width="16" height="8"><br>
<script language="javascript1.2">
nav=navigator.appName;
if (nav!= "Netscape") {var w = document.body.clientHeight;}else{var w = window.innerHeight;}
document.write('<img name="line" src="/bitrix/templates/template3/images/1.gif" width="1" height="'+(w-111)+'">');
</script></td>
<td width="100%" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="/bitrix/templates/template3/images/shadow_back.gif"><img src="/images/1.gif" alt="" width="16" height="8"></td>
</tr>
</table>

Показывает тень от бокового меню!!! НАХ ЕШО оптимизацию для Нетскапа вывесил вооще охуели, кому это надо!!

<p>ShowNavChain();?></p>

Очень нужная функция показывает где ты сейчас находится

Вот собственоо где она порылась!!

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="100%"><h1>ShowTitle(false)?></h1></td>
<td width="0%" valign="top"><table width="0%">
<tr>

Собственно Вот мы и подошли к информационной части страницы. Вот здесь и начинаются подводные камни!! Хватит тупости надо думать!!!

ShowTitle(false)?>

Выводим Заголовок на главной странице, из индекса конечно.

td><a href="<?echo htmlspecialchars($APPLICATION->GetCurUri("print=Y"));?>" class="smalltext" target="_blank"><img src="/bitrix/templates/template1/images/print.gif" width="20" height="16" border="0" alt="<?echo GetMessage("PRINT");?>"></a></td>
<td nowrap><a href="<?echo htmlspecialchars($APPLICATION->GetCurUri("print=Y"));?>" class="smalltext" target="_blank"><?echo GetMessage("PRINT");?></a></td>
</tr>
</table></td>
</tr>
</table>

Меняем тему на версию для печати и все!!!!!!! Документ окончен, но как же основное окно!! Со всей инфой!!! Где оно? Спросите вы меня, а я скажу вам. Оно ставится автоматически битрой по её неизвестным законом в свободное табличное место!!!
То есть создавая структуру сайта делайте свободное место от таблиц!!!!!!!!!!!! Именно туда битра вставит всю информацию!!



Пример структуры
Шаблона


Надеюсь вам примерно понятно куда пихается все это!!!!!

footer.php

Вообще этот файл не нужен вообще, он формирует подвал страницы и закрывает её. Создавая завершенную страницу. Он может быть любого вида, никаких критичных правил там нет, только ваш вкус. Вообщем вот он листинг.

<br><br><br>

</td>
<td width="0%" valign="top" background="/bitrix/templates/template3/images/right_fill_divider.gif"><img src="/bitrix/templates/template3/images/shadow_top.gif" width="17" height="8" alt=""></td>
<td width="0%" valign="top" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="/bitrix/templates/template3/images/shadow_back.gif"><img src="/images/1.gif" alt="" width="16" height="8"></td>
</tr>
</table><br>
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td style="padding: 5px;">
<?$APPLICATION->IncludeFile(substr($APPLICATION->GetCurPage(), 0, strlen($APPLICATION->GetCurPage())-4)."_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("PAGE_INC"), "TEMPLATE"=>"page_inc.php"));?>
<?$APPLICATION->IncludeFile($APPLICATION->GetCurDir()."sect_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("SECT_INC"), "TEMPLATE"=>"sect_inc.php"));?></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="0%" bgcolor="#F6F8FB" align="right" style="padding: 5px;"><a href="<?echo GetMessage("POWERED_SITE");?>"><img src="/bitrix/templates/template3/images/bitrix_logo.gif" width="69" height="58" border="0" alt="<?echo GetMessage("POWERED_BY")?>"></a><br>
IncludeFile("powered_by.php", "text");?><br></td>
<td width="0%">&nbsp;</td>
<td width="100%"><?$APPLICATION->ShowBanner("BOTTOM", '<div align="left">', '<br></div><br>');?></td>
<td width="0%" background="/bitrix/templates/template3/images/right_fill_divider.gif">&nbsp;</td>
<td width="0%">&nbsp;</td>
</tr>
<tr>
<td width="0%" bgcolor="#EBF1F7" align="right" style="padding-right: 5px;"><?$APPLICATION->IncludeFile("copy.php", "text");?></td>
<td width="0%" bgcolor="#F3F7FA"><img src="/images/1.gif" width="12" height="24" alt=""></td>
<td bgcolor="#F3F7FA" width="100%" align="right">&nbsp;</td>
<td bgcolor="#F3F7FA" width="0%"><img src="/bitrix/templates/template3/images/bottom_right_fill_divider.gif" width="17" height="25" alt=""></td>
<td bgcolor="#ABBECE" width="0%">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Если вы читали предъидущую часть статьи, то понять че к чиму у вас не составит труда!
Внимание!

<?$APPLICATION->IncludeFile(substr($APPLICATION->GetCurPage(), 0, strlen($APPLICATION->GetCurPage())-4)."_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("PAGE_INC"), "TEMPLATE"=>"page_inc.php"));?>
<?$APPLICATION->IncludeFile($APPLICATION->GetCurDir()."sect_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("SECT_INC"), "TEMPLATE"=>"sect_inc.php"));?>

Эта часть загружает информационную часть страницы, то есть если вы хотите делать уникальный шаблон, то впихните эту часть в нужное вам место и все!!!!


Styles.css

Будем рассматривать прямо в каскадке!
body { margin: 0px; padding:0px; background-color: #FFFFFF}

/*Выподающее(часть верхнего) меню */
.popupmenuact {padding:2px; padding-left:5px; padding-right:10px; background-color:#D5D5C8; border-color: #FFFFFF; border-bottom: 1px solid #FFFFFF }
.popupmenu {padding:2px; padding-left:5px; background-color:#F2F2E9; padding-right:10px; border-color: #FFFFFF; border-bottom: 1px solid #FFFFFF }
.popupmenutext, .popupmenuclosed { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
.popupmenutext {color: #546470;}
.popupmenuclosed {color: #C3C3C3;}

/*Левое меню */
.leftmenu, .leftmenuact {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; color: #619DCD; text-decoration:none;}
.leftmenuact {color:#355B7C;}

/*Верхнее меню*/
.topmenu, .topmenuact {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color: #546470; text-decoration:none;}
.topmenuact {color: #619DCD;}

/*Меню сайта*/
.lang, .langact {font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; color: #FFFFFF; text-decoration:underline;}
.langact {text-decoration:none;}

/*Стиль корзины */

.smalltext, .smalltextwhite,
.smalltextblack, .baskettext {font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal;} /*Маленький текст */
.smalltext {color: #7D7D7D;} /*Маленький текст голубой */
.smalltextwhite{color: #60605E;} /* Маленький текст белый*/
.smalltextblack{color: #000000;} /* Маленький текст черный*/
.baskettext {color: #999999;}

.chain {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color: #7F7F7F;}

.newstext, .newsdata, .newsdatab {font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color: #7C7E7F; text-decoration:none;}
.newstext {color: #7C7E7F;}
.newsdata {color: #5892BF;}
.newsdatab {font-weight: bold; color: #5892BF;}

.titletext {font-family: Arial, Helvetica, sans-serif; color:#4757C4; font-size:15px; font-weight:bold; line-height: 18px;}/*Заголовок */
.subtitletext {font-family: Arial, Helvetica, sans-serif; color:#000000; font-size:13px; font-weight:bold;}/*Подзаголовок */

.errortext, .oktext, .notetext {font-family:Arial; font-size:13px; font-weight:bold;}
.errortext {color:red;}
.oktext {color:#005000;}
.notetext {color:green;}

.copy {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; color: #88B2D2;}

.tableheads {background-color:#FCFDFE;}
.tableborders {background-color:#B9CEDF;}

.incborder{border: 1px solid #C1E6FF}
.incimage{background-image: url(/bitrix/templates/demo/images/include_corner.gif); background-position:bottom; background-repeat:no-repeat; background-color:#C6DFF5;}
.incbg{background-color:#C6DFF5}

.sectincborder{border: 1px solid #C1E6FF}
.sectincimage{background-image: url(/bitrix/templates/demo/images/include_sect_corner.gif); background-position:bottom; background-repeat:no-repeat; background-color:#9BD0FC;}
.sectincbg{background-color:#9BD0FC}

.mainincbg{height: 18px;}
.mainincline{background-color:#B4BDCD}
.maininctitle{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color: #6A7B9C; text-decoration:none;}

hr {color: #BDCEDE; height: 1px}

.inputfield, .inputbuttonflat, .inputbuttonS {font-family:Verdana,Arial,Helvetica; font-size:11px;}
.inputfield {color:black; border: solid 1px #C8C8C8;}
.inputbuttonflat { color:#929292; background-color:#EFEFEF; border: solid 1px #C8C8C8;}
.inputbuttonS {font-weight:bold;}


/* Заголовки*/

H1, .H1, H2, .H2, H3, .H3, H4, .H4 {font-family: Verdana, Arial, Helvetica, sans-serif;}
H1, .H1 {color:#7F7F7F; font-size:17px; font-weight:normal; line-height: 16px; margin-bottom: 1px;}
H2, .H2 {color:#7F7F7F; font-size:13px; line-height: 18px; font-weight:bold; }
H3, .H3 {font-size:12px; color: #5892BF; font-weight:bold; }
H4, .H4 {font-size:12px; color: #5892BF; font-weight:bold; }

/* Цвет таблици*/
.tableborder {background-color:#B9CEDF;}
.tablehead {background-color:#D5E3F0;}
.tablebody {background-color:#F4F8FB;}
.tablenullbody {background-color:#FFFFFF;}

/* Текст таблици*/
.tablebodytext, .tablefieldtext, .tabletitletext,
.tableheadtext, .tablebodylink {font-family: Arial, Helvetica, sans-serif; font-size:12px;}
.tableheadtext {color:#25639A;}
.tablebodylink {text-decoration: none}
a.tablebodylink:hover {text-decoration: underline}

/* Основной текст*/
.text {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* Цвет выделенного текста*/
.errorcolor {color:red;}
.successcolor {color:green;}

/* Onscreen сообщения */
.errormessage{font-family: Arial, Helvetica, sans-serif; font-size:13px; color:red; font-weight:bold;}

/* Форма*/
.inputtext, .inputtextarea, .inputselect, .inputcheckbox,
.inputradio, .inputfile, .inputbutton, .inputbodybutton {font-family:Verdana,Arial,Helvetica; font-size:11px;}

/* Знаки*/
.starrequired, .required{font-family: Verdana, Arial, Helvetica, sans-serif; color:red; font-size:12px; }



Практика

Делаем здесь листинг самого простого шаблона под Битрикс
И так смотрим Header.php
<html>
<head>
<title>ShowTitle()?></title>
ShowCSS();?>
<script language="JavaScript1.2" src="/bitrix/templates/template3/js/ddnmenu.js"></script>
</head>
<body>
<table>
<td>GetMenuHtmlEx("top");?></td>
</table>
<table>
<td>
<?$APPLICATION->IncludeFile(substr($APPLICATION->GetCurPage(), 0, strlen($APPLICATION->GetCurPage())-4)."_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("PAGE_INC"), "TEMPLATE"=>"page_inc.php"));?>
<?$APPLICATION->IncludeFile($APPLICATION->GetCurDir()."sect_inc.php", Array(), Array("MODE"=>"html", "NAME"=>GetMessage("SECT_INC"), "TEMPLATE"=>"sect_inc.php"));?>
<td>
</table>
Собственно и все из файлов копируем popup.menu_template.php, top.menu_template.php, styles.css
js\ddnmenu.js
lang\ru\header.php
Остальное ненадо!!! Вот вам и шаблончек минимальный.

Источник:
Категория: -=CMS=- | Добавил: lexnekr (14.07.2008) | Автор: Алексей
Просмотров: 3329 | Комментарии: 0 | Рейтинг: 5.0/1 |

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа

Категории каталога
-=SEO=- [8]
Раскрутка сайта в поисковиках
-=Дизайн=- [3]
Статьи по дизайну
-=CMS=- [3]
Статьи по работе с CMS
-=Програмирование=- [7]
Статьи по WEB и OS програмированию

Поиск