Ковыряем Instant. Заметки по ходу дела....

Автор блога: Львенок
Все рубрики (17)

Шаблоны и Стили. Что InstantCMS нам выдает...

Зайдите на страничку вашего сайта InstantCMS. Через контекстное меню откройте код HTML страницы... Понятно что-нибудь?? Сомневаюсь...
Придется поработать ручками: откройте файл стандартного шаблона "template.php" в текстовом редакторе, предварительно забакапив его.
Теперь нам придется немножко отредактировать его...
Я не знаю о чем думали разработчики InstantCMS когда создавали код шаблона, но мне кажется совсем не о людях, которые потом этот код будут разбирать...
Итак главное правило хорошего тона при верстке html-кода:
Вложенные открывающие html-тэги ставятся с новой строки со смещением вправо... Смещение делается с помощью пробелов или табуляции. Закрывающие данные тэги ставятся однозначно под открывающими...
Исключения:
1. Если код внутри открывающего и закрывающего тэга короткий (ячейка таблицы, ссылка) и не уходит далеко за пределы экрана, то закрывающий тэг можно оставить на этой же строке.
2. Внутри ячеек таблиц иногда бывает недопустимо оставлять пробелы (а равно и переносы строк) между тэгами "<td>, </td>" и содержимым ячеек. Если внутри ячейки находится картинка или другая таблица приходится ставить их рядом.
Иногда можно не трогать php-вставки, html-формы, комментарии и другие подобные вещи. Также обычно не трогают тэг "<span>...</span>" если он просто задает стиль без разрыва абзацев. Если абзац все-таки разрывается уже обычно ставят "<div></div>"

Например:
Код PHP:
<body>
    <table>
            <tr><td><a href="..."></a></td></tr>
            <tr>
                 <td><table>
                     </table></td>
            </tr>
    </table>
</body>
А теперь пробегаем по всему коду "template.php" и расставляем пробелы, табуляции и переносы строк в соответсвии с данным правилом... Серьезно данный код пострадать не должен, в крайнем случае кое-где кое-что может начать разъезжаться, но на большом экране все элементы должны остаться на своих местах. Зато код теперь будет значительно более читаемый. Заодно попытайтесь посчитать сколько уровней вложенных таблиц получилось у разработчиков в шаблоне...
Замучались? Я тоже...

Закачиваем "template.php" обратно туда где он рос и смотрите результат... Если все совсем не так, восстанавливаете из бакапа "template.php" и делаете всю процедуру заново... Возможно где-то съели угловые скобки от тэга или тэг целиком... Внимательность и аккуратность... У меня вроде бы все на месте...

Предварительная работа сделана. Снова заходим на страничку, снова лезем в контекстное меню в браузере, смотрим еще раз html-код. Легче стало?? Не на много... У нас примешались еще таблицы выдаваемые модулями...

Шапку и подвал я сейчас обсуждать не буду. Смотрим что у нас с модулями.
С помощью поиска находим строки содержащие id="left", id="center", id="right"...
Таким образом вы получаете начала соответствующих разделов и после этого сразу получаем начало соответсвующего модуля
Код PHP:
<td width="235" valign="top" id="left"><table class="module" width="100%" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
		<td class="modulebody">
			<div style="text-align:center;margin-bottom:5px;">
Код конечно тоже не подарок для того чтобы разбирать, но теперь вы можете отследить конец таблицы модуля и начало следующего, заодно посмотреть html-код содержимое модуля, посмотреть какие классы и "id" там назначаются элементам, найти соответствующие элементы в CSS файле и начать править при желании...

Вот здесь мы уже создали себе временный шаблон, с которым можем работать дальше...
Скопируем в папочке "/templates" стандартный шаблон в другую папочку и начнем над ним издеваться...
В админке в "Настройках сайта - Дизайн" выберем нужную папочку и зальем туда наш недоделанный "template.php".
Исправим в строках
Код PHP:
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
текст "_default_" на название вашей папочки, где лежит ваша копия шаблона для издевательств, и можно потихоньку начинать курочить css-файл, который лежит в вашей папочке в поддиректории "CSS".
Залили?? Теперь снова заходите на страницу, смотрите html-код, радуетесь насколько там стало меньше мусора в коде... не понравилось, можете залить в свою папочку копию стандартного шаблона, не забыв исправить подключение css-файлов в шаблоне, и снова там же издеваться над css-файлом...

Удачных вам экспериментов... Не забывайте бакапиться )))

Шаблоны и стили. Пролог

Снова предварительный пост. Мы будем разбираться в задачах, с которыми мы будем сталкиваться при работе с шаблонами, и которые нам придется решать.

Задачи собственно всего 2 (две):
1. Мы хотим создать свой собственный шаблон с нуля. В худшем случае у нас вообще ничего нету ни в голове, ни в нарисованных макетах. В лучшем случае у нас есть сверстанный макет в html с вынесенными в отдельный файл стили CSS...
2. У нас уже есть готовый шаблон (неважно стандартный или разработанный другим не менее творческим человеком...), и нам нужно кое-где кое-чего подправить... И хорошо если мы хотя бы сами догадываемся где и что нужно подправить...

В процессе решения первой задачи на таких объемных (по количеству модулей) движках как InstantCMS каждая отдельная подзадача будет сводиться уже к решению второй задачи. Т.е. вам каждый раз придется где-то что-то подправлять в уже собственном шаблоне, так что при проектировании собственного шаблона постарайтесь выработать несколько простых правил запихивания нужного кода в нужное место, чтобы вы потом могли быстро находить нужные участки кода, будь то кусок шаблона, кусок модуля или кусок CSS файла опираясь на свои собственные правила... Посмотрите какой логики придерживались разработчики InstantCMS.

За чем вам надо будет следить:
1. Где и как подключаются файлы CSS и где они лежат.
2. Как в выбранном вами элементе назначается стиль:
Стиль элемента может назначаться базовыми стилями и переходить по умолчанию.
Стиль элемента может быть привязан к тэгу (внимательно смотрите на цепочки тэгов в CSS, могут быть сюрпризы),    
может быть привязан к id элемента,
может быть назначен через "class=..."
и может быть назначен напрямую через "style=..."
Так же стиль может назначаться через яваскрипты в процессе работы браузера в процессе загрузки странички или уже после загрузки. Почитайте внимательно какую-нибудь книжку по CSS и по ДинамикHTML...
Обычно назначением напрямую через "style=..." пользуются когда нужно управлять видимостью элемента, как в выпадающих или древовидных меню. Все элементы меню загружены, но они скрыты настройками стилей, и после обработки действий мыши настройки отображения необходимых пунктов меню меняются через яваскрипты...
3. Ну и собственно что из себя представляет этот стиль, обращайте внимание на видимость, обращайте внимание на яваскрипты, которые могут управлять стилями

Итак чтобы решить первую задачу у вас обязательно должен быть макет, сверстанный в html с вынесенными отдельно стилями CSS. Вы должны сами понимать в какой части макета что у вас отображается и какие стили используются: где начинаются и заканчиваются таблицы и их ячейки, divы, ссылки, картинки, куда вы планируете прикручивать модули, и как вы хотите , чтобы модули выглядели... Для этого вам подойдет любой html-редактор, позволяющий работать со стилями... Воздержитесь от забивания в макет форматирования html-тэгов. В некоторых случаях может это и было бы удобно, но потом другим людям, да и вам самим трудно будет разобраться где и каким образом вы задали дизайн тому или иному участку сайта...
Сейчас вот мне как раз и предстоит нарисовать макетик того, чего я хочу, и дальше в процессе его реализации будут рождаться следующие посты...

А что у нас за Яваскрипты в стандартном шаблоне???

Вот прежде чем начинать возиться со стилями компонентов и шаблона целиком будет полезно посмотреть, а что у нас в шаблоне за Яваскрипты подключаются...
Собственно там 4 строчки
Код PHP:
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
В принципе немного, но полезно знать что там:
Строчка первая:
Код PHP:
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
Вызов библиотеки JQuery. Почему грузится "jquery.simplemodal.js", а не "jquery.js", который лежит в той же папке я не знаю. Но "jquery.simplemodal.js" весит 3664 байта, а "jquery.js" весит уже 54кб... По вопросам работы этой библиотеки я вас отправлю на соответсвующие сайт, потому как мне лично пришлось покупать книжку чтобы познакомиться с этой библиотекой. Ничего сложного там нету, просто очень удобная библиотека...

Строчка вторая:
Код PHP:
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
содержит всего ничего:
Код PHP:
function auth(){
	$.modal($('#authModal'), {overlay:75});
	document.authform.login.focus();
}

function hideAuth(){
	$('#authModal').close;
}
Для тех кто не очень активно лазил по стандартному шаблону поясню: описанные здесь пару функций обрабатывают стили формы для ввода логина и пароля естественно с применением jquery.
Для напоминания еще раз приведу форму для авторизации:
Код PHP:
			<div id="authModal" style='display:none'>
					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
					<div id="authtitle">Авторизация</div>
					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
					  <tr>
						<td id="authtd">Логин:</td>
						<td id=""><input name="login" type="text" id="authinput" /></td>
					  </tr>
					  <tr>
						<td id="authtd">Пароль:</td>
						<td id=""><input name="pass" type="password" id="authinput" /></td>			
				  </tr>
				</table>
				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
			</form>
		</div>
Так что ищите теперь где совпадают слова:"authModal","authform","login"...

Да и посмотрите еще где вызывается форма авторизации:
Код PHP:
<a href="javascript:auth()" id="ht_auth">Авторизация</a>
Третья строчка:
Код PHP:
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
Бибилиотечка, реализующая какой-то хак - обрабатывающий фильтр для png-картинок в ИЕ с применением jquery и каких-то хитрых методов в ИЕ.
Тоже приведу код файла, на всякий случай...
Код PHP:
/*
 * jQuery pngfix plugin
 * Version 1.6  (05/09/2007)
 * @requires jQuery v1.1.3
 *
 * Examples at: http://khurshid.com/jquery/iepnghack/
 * Copyright (c) 2007 Kush M.
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 */
 /**
  *
  * @example
  *
  * optional if location of pixel.gif if different to default which is images/pixel.gif
  * $.pngfix('media/pixel.gif');
  *
  * $('img[@src$=.png], #panel').pngfix();
  *
  * @apply hack to all png images and #panel which icluded png img in its css
  *
  * @name pngfix
  * @type jQuery
  * @cat Plugins/Image
  * @return jQuery
  * @author jQuery Community
  */
 
(function($) {
	
	/**
	 * helper variables and function
	 */
	$.pngfix = function(customPixel) {
		$.pngfix.pixel = customPixel;
	};
	
	$.pngfix.getPixel = function() {
		return $.pngfix.pixel || '/images/pixel.gif';
	};
	
	var hack = {
		ltie7  : $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent),
		filter : function(src) {
			return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')";
		}
	};
	/**
	 * Applies ie png hack to selected dom elements
	 *
	 * $('img[@src$=.png]').pngfix();
	 * @desc apply hack to all images with png extensions
	 *
	 * $('#panel, img[@src$=.png]').pngfix();
	 * @desc apply hack to element #panel and all images with png extensions
	 *
	 * @name pngfix
	 * @type jQuery
	 * @cat Plugins/pngfix
	 */
	$.fn.pngfix = hack.ltie7 ? function() {
    	return this.each(function() {
			var $$ = $(this);
			var base = $('base').attr('href'); // need to use this in case you are using rewriting urls
			if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
				if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image
					// use source tag value if set 
					var source = (base && $$.attr('src').substring(0,1)!='/') ? base + $$.attr('src') : $$.attr('src');
					// apply filter
					$$.css({filter:hack.filter(source), width:$$.width(), height:$$.height()})
					  .attr({src:$.pngfix.getPixel()})
					  .positionFix();
				}
			} else { // hack png css properties present inside css
				var image = $$.css('backgroundImage');
				if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
					image = RegExp.$1;
					$$.css({backgroundImage:'none', filter:hack.filter(image)})
					  .positionFix();
				}
			}
		});
	} : function() { return this; };
	/**
	 * Removes any png hack that may have been applied previously
	 *
	 * $('img[@src$=.png]').pngunfix();
	 * @desc revert hack on all images with png extensions
	 *
	 * $('#panel, img[@src$=.png]').iepnghack();
	 * @desc revert hack on element #panel and all images with png extensions
	 *
	 * @name pngunfix
	 * @type jQuery
	 * @cat Plugins/iepnghack
	 */
	$.fn.pngunfix = hack.ltie7 ? function() {
    	return this.each(function() {
			var $$ = $(this);
			var src = $$.css('filter');
			if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter
				src = RegExp.$1;
				if ($$.is('img') || $$.is('input')) {
					$$.attr({src:src}).css({filter:''});
				} else {
					$$.css({filter:'', background:'url('+src+')'});
				}
			}
		});
	} : function() { return this; };
	/**
	 * positions selected item relatively
	 */
	$.fn.positionFix = function() {
		return this.each(function() {
			var $$ = $(this);
			var position = $$.css('position');
			if (position != 'absolute' && position != 'relative') {
				$$.css({position:'relative'});
			}
		});
	};

})(jQuery);

Четвертая строчка:
Код PHP:
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Собственно вызов функции, использующей описанный в третьей строчке фильтр для обработки картинки с id="logoimg". Картинку эту в стандартном шаблоне думаю найдете сами.

Вставлять ли последние 2 строчки или нет смотрите сами. Возможно здесь реализуется какой-то хитрый дизайнерский ход...

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

Быстро создаем себе структуру своего шаблона с нуля

Для тех, кто знает и немного работал с HTML и CSS, но пугается огромного объема информации, находящегося в "/templates/_default_/template.php".
Результат будет не совсем ожидаемый, но логика действий, надеюсь будет проста и понятна...
Итак...
1. Копируем себе в резерв на всякий случай "/templates/_default_/template.php" и "templates/_default_/css/styles.css"
2. Создаем себе простейший html-файл (хоть в Dreamweaver`е, как я) с таблицей похожей на расположение стандартного шаблона:
Код PHP:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="3"> </td>
  </tr>
  <tr> 
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr> 
    <td colspan="3"> </td>
  </tr>
</table>
</body>
</html>
Надеюсь здесь все понятно. Заголовок, простая таблица 3х3 ячейки, верхние ячейки объединены в одну и нижние тоже...

3. В самое начало файла вместо тэга "<html>"вставляем инициализацию:
Код PHP:
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

4. В средний ряд в ячейки вставляем строки для блоков модулей:
В левую среднюю ячейку вставляем "<?php cmsModule("left"); ?>". Заодно добавляем ей атрибуты <td valign="top" id="left">
В самую среднюю вставляем
Код PHP:
						<div><?php cmsModule("top"); ?></div>
						<div><?php cmsBody(); ?></div>
						<div><?php cmsModule("bottom"); ?></div>	
Атрибуты ставим "<td  valign="top" id="center">"
В правую среднюю ставим
Код PHP:
<?php if (cmsCountModules("right")) { ?>			
					<?php cmsModule("right"); ?>
					<?php } ?>
Атрибуты ставим соответственно "<td valign="top" id="right">"
5. Теперь нам надо подцепить в заголовок кучу мета-данных, кодировки и яваскрипты:
из нашего файлика выкидываем все между тэгами "<head></head>" и вставляем туда код, находящийся в этих тэгах в файле "/templates/_default_/template.php":

Код PHP:
<!-- HEAD !-->
<?php cmsPrintHead(); ?>
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
<!--[if lt IE 7]>
<link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Так, скрипты подцепили...
6. В верхние объединенные ячейки вставляем код "<div id="sitename"><?php cmsPrintSitename(); ?></div>"
Сюда же через "
" прикручиваем "глубиномер": "<div><?php cmsPathway(’»’); ?> </div>".
7. В подвал (в нижние объединенные ячейки) вставляем "<div id="footer"><a href="/"><?php cmsPrintSitename(); ?></a> © <?php echo date(’Y’)?></div>"
8. Теперь самое сложное и интересное...
Нам нужно вставить кусок кода для авторизации, меню для пользователя "Зарегистрироваться, Авторизоваться, Выйти", и код для поиска.
Вам нужно определиться, куда вы хотите это прикрутить, и будем прикручивать.
Я решил что мне будет удобно в правой средней ячейке сверху перед блоком правых модулей.
Лезу, соответственно, в эту ячейку и поочередно вставляю следующие куски кода:

Для ввода пароля:
Код PHP:
<div id="authModal" style='display:none'>
					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
					<div id="authtitle">Авторизация</div>
					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
					  <tr>
						<td id="authtd">Логин:</td>
						<td id=""><input name="login" type="text" id="authinput" /></td>
					  </tr>
					  <tr>
						<td id="authtd">Пароль:</td>
						<td id=""><input name="pass" type="password" id="authinput" /></td>			
				  </tr>
				</table>
				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
			</form>
		</div>
Этот блок на самом деле не имеет значение куда вставлять. Главное чтобы он не разбивал структуру документа в ненужном месте...
Дальше...
Блок меню "Зарегистрироваться, Авторизоваться, Выйти" идет одной таблицей, объединенной еще и с формой поиска. Берем все это также из "/templates/_default_/template.php":
Код PHP:
						  <table width="370" border="0" align="right" cellpadding="0" cellspacing="0" id="headtools">
						<tr>
					 <td>
					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
					  <?php if(!$inUser->id){ ?> 
						<a href="/registration" id="ht_reg">Регистрация</a>

						<a href="javascript:auth()" id="ht_auth">Авторизация</a>

						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>

					  <?php } else { 
									$uid    = $inUser->id;
									$newmsg = usrNewMessages($inUser->id); 			  	
					  ?>
						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>

						<?php if (!$newmsg) { ?>	
							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>

						<?php } else { ?>
							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>

						<?php } ?>
						<a href="/logout" id="ht_logout">Выход</a>

					  <?php } ?>			
					 </td>
						</tr>
					<tr>
						 <td>
							 <div id="bar_search">
								 <form name="searchform" action="/index.php" method="get">
									<input type="hidden" name="view" value="search" />
									<input name="query" type="text" id="searchinput" /><input name="gosearch" id="searchbtn" type="image" src="/templates/_default_/images/searchbtn.png" alt="Поиск" width="22" height="23"  onclick="document.searchform.submit()"/>
								 </form>
							 </div>
							 </td>
					</tr>
				  </table>
Для того чтобы пункты меню справа были каждый с новой строки, я после каждой ссылки вида "<a href="/registration" id="ht_reg">Регистрация</a>" добавляю перенос строки "
". В вышеприведенном коде уже меню уже идет вместе с переносами строк, чтобы Вам было проще копировать, вставлять и разбираться дальше...
Собственно и все... Сохраняем получившийся файлик вместо "/templates/_default_/template.php".
В результате у меня получилос вот такой вот файл:
Код PHP:
<?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- HEAD !-->
<?php cmsPrintHead(); ?>
<link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" />
<link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
<!--[if lt IE 7]>
<link type='text/css' href='/templates/modern/basic/css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table >
  <tr> 
    <td colspan="3"><div id="sitename"><?php cmsPrintSitename(); ?></div>
<div><?php cmsPathway('»'); ?>	</div></td>
  </tr>
  <tr> 
    <td valign="top" id="left"><?php cmsModule("left"); ?></td>
    <td  valign="top" id="center">	
						<div><?php cmsModule("top"); ?></div>
						<div><?php cmsBody(); ?></div>
						<div><?php cmsModule("bottom"); ?></div>	
</td>
    <td><div id="authModal" style='display:none'>
					<form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
					<div id="authtitle">Авторизация</div>
					<table cellpadding="2" cellspacing="2" align="center" id="authtable">
					  <tr>
						<td id="authtd">Логин:</td>
						<td id=""><input name="login" type="text" id="authinput" /></td>
					  </tr>
					  <tr>
						<td id="authtd">Пароль:</td>
						<td id=""><input name="pass" type="password" id="authinput" /></td>			
				  </tr>
				</table>
				<div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
				<div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
			</form>
		</div>
						  <table width="370" border="0" align="right" cellpadding="0" cellspacing="0" id="headtools">
						<tr>
					 <td>
					  <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
					  <?php if(!$inUser->id){ ?> 
						<a href="/registration" id="ht_reg">Регистрация</a>

						<a href="javascript:auth()" id="ht_auth">Авторизация</a>

						<a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a>

					  <?php } else { 
									$uid    = $inUser->id;
									$newmsg = usrNewMessages($inUser->id); 			  	
					  ?>
						<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Мой профиль</a>

						<?php if (!$newmsg) { ?>	
							<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>

						<?php } else { ?>
							<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>

						<?php } ?>
						<a href="/logout" id="ht_logout">Выход</a>

					  <?php } ?>			
					 </td>
						</tr>
					<tr>
						 <td>
							 <div id="bar_search">
								 <form name="searchform" action="/index.php" method="get">
									<input type="hidden" name="view" value="search" />
									<input name="query" type="text" id="searchinput" /><input name="gosearch" id="searchbtn" type="image" src="/templates/_default_/images/searchbtn.png" alt="Поиск" width="22" height="23"  onclick="document.searchform.submit()"/>
								 </form>
							 </div>
							 </td>
					</tr>
				  </table>
					<?php if (cmsCountModules("right")) { ?>			
					<?php cmsModule("right"); ?>
					<?php } ?>

		</td>
  </tr>
  <tr> 
    <td colspan="3">
						<div id="footer">
							<a href="/"><?php cmsPrintSitename(); ?></a> © <?php echo date('Y')?>
						</div>
</td>
  </tr>
</table>
</body>
</html>
Если вы зайдете на свой сайт с этим файлом шаблона, то увидите, что все это хоть и криво (CSS стили мы пока еще не трогали, они остались старыми), но примерно на том месте где и ожидалось. Теперь вы знаете что где находится. Знаете в каком блоке какие классы используются и что нужно прописывать в CSS, чтобы получить желаемый результат.
Теперь вы можете стереть файл "templates/_default_/css/styles.css"(предварительно сохранив старый вариант). Создать новый... и копировать в новый нужные блоки из старого файла, заодно разбираясь и внося нужные исправления в стили...
Если уж вы понимаете, что напортачили и запутались, то восстанавливаете ранее сохраненные файлы и начинаете заново...
Всем удачи!!! ;)

Ридер excel

Удалено!
Запись создана вопреки правилам сайта

Битрикс vs. InstantCMS - размышления на тему

Удалено!
Читайте правила сайта

Добавил информацию в документацию по Таблицам 1.5.3

Запись удалена
добавив документацию в Wiki, не обязательно об этом сообщать в блоге, нарушая тем самым правила сайта