Верстка в шаблона Joomla 1.5.x

ИЗМЕНЕНИЕ РАЗМЕРОВ СВЕРТЫВАНИЕ ПУСТЫХ МОДУЛЕЙ

Существует несколько способов сделать это. Мы можем вставить условное выражение в body, чтобы не отображать контент, и определить различные стили для контента в зависимости от того, в какой колонке он находится. Для максимального удобства я определил несколько условных выражение в теге head, чтобы варьировать некоторые CSS-стили:

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

Итак считаем:

Если ничего нет слева или справа, имеем 100%
Если что-то есть слева или справа, имеем 80%
Если что-то есть и слева и справа, имеем 60%

После этого нужно изменить div для контента в index.php следующим образом:

<div id="content<?php echo $contentwidth; ?>">

При этом изменим CSS-разметку следующим образом:

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

Условное выражение PHP должно быть прописано в head сразу после появления ссылки на файл template.css. Это связано с тем, что когда встречаются два одинаковых правила CSS, будет выполняться последнее из них. Это можно было бы сделать в похожем стиле, используя выражение if при импорте CSS-файла.

Подсказка:

При решении проблем с условными выражениями полезно бывает вставить такую строчку кода в index.php, чтобы отображать значение переменной:

//Ширина колонки контента: 
<?php echo $contentwidth; ?>%

Мы уже на полпути, но нам еще нужно очистить контейнеры div, в которых содержатся колонки.

Прячем код модулей

При создании «свертываемых» колонок хорошей практикой будет добиваться того, чтобы модули не генерировались, если для них нет контента. Если этого не сделать, страницы будут иметь пустые

<div></div>

которые могут привести к кросс-браузерным проблемам.

Чтобы спрятать пустые div, используется следующее выражение:

<?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>

При использовании этого кода, если ничего не должно быть опубликовано слева, то и

тоже не будет отображаться.

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

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
  <base href="http://opengs.ru/joomla-15x/112----joomla-15x.html" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Представить материал</title>
  <link rel="stylesheet" href="http://opengs.ru/components/com_jcomments/tpl/default/style.css" type="text/css" />
  <link rel="stylesheet" href="/media/system/css/calendar-jos.css" type="text/css"  title="Зелёный"  media="all" />
  <link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
  <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/calendar.js"></script>
  <script type="text/javascript" src="/media/system/js/calendar-setup.js"></script>
  <script type="text/javascript" src="/media/system/js/modal.js"></script>
  <script type="text/javascript">
Calendar._DN = new Array ("Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота", "Воскресенье");Calendar._SDN = new Array ("Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"); Calendar._FD = 0;	Calendar._MN = new Array ("Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря");	Calendar._SMN = new Array ("Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек");Calendar._TT = {};Calendar._TT["INFO"] = "О календаре";
 		Calendar._TT["ABOUT"] =
 "DHTML Date/Time Selectorn" +
 "(c) dynarch.com 2002-2005 / Author: Mihai Bazonn" +
"For latest version visit: http://www.dynarch.com/projects/calendar/n" +
"Distributed under GNU LGPL.  See http://gnu.org/licenses/lgpl.html for details." +
"nn" +
"Date selection:n" +
"- Use the xab, xbb buttons to select yearn" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select monthn" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "nn" +
"Time selection:n" +
"- Click on any of the time parts to increase itn" +
"- or Shift-click to decrease itn" +
"- or click and drag for faster selection.";

		Calendar._TT["PREV_YEAR"] = "Кликните для перехода на предыдущий год. Кликните и удерживайте кнопку для списка лет.";Calendar._TT["PREV_MONTH"] = "Кликните для перехода на предыдущий месяц. Кликните и удерживайте кнопку для списка месяцев.";	Calendar._TT["GO_TODAY"] = "К сегодня";Calendar._TT["NEXT_MONTH"] = "Кликните для перехода на следующий месяц. Кликните и удерживайте кнопку для списка месяцев.";Calendar._TT["NEXT_YEAR"] = "Кликните для перехода на следующий год. Кликните и удерживайте кнопку для списка лет.";Calendar._TT["SEL_DATE"] = "Выберите дату.";Calendar._TT["DRAG_TO_MOVE"] = "Тяните, чтобы переместить";Calendar._TT["PART_TODAY"] = "(Сегодня)";Calendar._TT["DAY_FIRST"] = "Показать первые %s";Calendar._TT["WEEKEND"] = "0,6";Calendar._TT["CLOSE"] = "Закрыть";Calendar._TT["TODAY"] = "Сегодня";Calendar._TT["TIME_PART"] = "(Shift-) Клик или потяните, чтобы изменить значение.";Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%M-%D"; Calendar._TT["TT_DATE_FORMAT"] = "%A, %B %e";Calendar._TT["WK"] = "wk";Calendar._TT["TIME"] = "Время:";
		window.addEvent('domready', function() {

			SqueezeBox.initialize({});

			$$('a.modal-button').each(function(el) {
				el.addEvent('click', function(e) {
					new Event(e).stop();
					SqueezeBox.fromElement(el);
				});
			});
		});
	function jInsertEditorText( text, editor ) {
			insertAtCursor( document.getElementById(editor), text );
		}
		window.addEvent('domready', function() {

			SqueezeBox.initialize({});

			$$('a.modal').each(function(el) {
				el.addEvent('click', function(e) {
					new Event(e).stop();
					SqueezeBox.fromElement(el);
				});
			});
		});
			function insertReadmore(editor) {
				var content = document.getElementById( 'text' ).value;

				if (content.match(/<hrs+id=("|')system-readmore("|')s*/*>/i)) {
					alert('Уже существует');
					return false;
				} else {
					jInsertEditorText('<hr id="system-readmore" />', editor);
				}
			}
			
				function insertJCommentsOn(editor) {
					var content = document.getElementById( 'text' ).value;

					if (content.match(/{jcomments on}/)) {
						return false;
					} else {
						jInsertEditorText('{jcomments on}', editor);
					}
				}
				
				function insertJCommentsOff(editor) {
					var content = document.getElementById( 'text' ).value;

					if (content.match(/{jcomments off}/)) {
						return false;
					} else {
						jInsertEditorText('{jcomments off}', editor);
					}
				}
				
window.addEvent('domready', function() {Calendar.setup({
        inputField     :    "publish_up",     // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:%S",      // format of the input field
        button         :    "publish_up_img",  // trigger for the calendar (button ID)
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });});
window.addEvent('domready', function() {Calendar.setup({
        inputField     :    "publish_down",     // id of the input field
        ifFormat       :    "%Y-%m-%d %H:%M:%S",      // format of the input field
        button         :    "publish_down_img",  // trigger for the calendar (button ID)
        align          :    "Tl",           // alignment (defaults to "Bl")
        singleClick    :    true
    });});
function keepAlive( ) {	var myAjax = new Ajax( "index.php", { method: "get" } ).request();} window.addEvent("domready", function(){ keepAlive.periodical(53940000 ); });
  </script>
  <script type='text/javascript'>
/*<![CDATA[*/
	var jax_live_site = 'http://opengs.ru/index.php';
/*]]>*/
</script><script type="text/javascript" src="http://opengs.ru/plugins/system/pc_includes/ajax.js"></script>
  <script src="http://opengs.ru/components/com_jcomments/js/jcomments-v2.0.js" type="text/javascript"></script>
  <script src="http://opengs.ru/components/com_jcomments/libraries/joomlatune/ajax.js" type="text/javascript"></script>
  <script type="text/javascript">
					function insertAtCursor(myField, myValue) {
						if (document.selection) {
							// IE support
							myField.focus();
							sel = document.selection.createRange();
							sel.text = myValue;
						} else if (myField.selectionStart || myField.selectionStart == '0') {
							// MOZILLA/NETSCAPE support
							var startPos = myField.selectionStart;
							var endPos = myField.selectionEnd;
							myField.value = myField.value.substring(0, startPos)
								+ myValue
								+ myField.value.substring(endPos, myField.value.length);
						} else {
							myField.value += myValue;
						}
					}
				</script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<?php if($this->countModules('left and right') == 0) $contentwidth = "100"; if($this->countModules('left or right') == 1) $contentwidth = "80"; if($this->countModules('left and right') == 1) $contentwidth = "60"; ?>
</head>
<body>
<div id="wrap">
  <div id="header">     <div class="inside">         <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />     </div>
  </div>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">     <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">     <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
<?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">     <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">     <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />     </div>
  </div>
  <?php endif; ?>
<!--end of wrap-->
</body>
</html>

ВЫВЕСТИ ТЕКСТ В ШАБЛОНЕ

<?php echo JText::_('Текст') ?>

Можно вставить в index.php (на руском можно писать текст только если Вы используете кодировку UTF8) Таким образом мы выводим слово «текст» там где это необходимо

Стили вывода модулей можно посмотреть в файле Параметр style не обязательный, его варианты задаются в templates/system/html/modules.php.

вывести картинку

<img src="/<?php echo $this->baseurl ?>/templates/siteground-j15-71/images/имя_картинки"/>

Верстка в шаблона Joomla 1.5.x

ИЗМЕНЕНИЕ РАЗМЕРОВ СВЕРТЫВАНИЕ ПУСТЫХ МОДУЛЕЙ

Прячем код модулей

ВЫВЕСТИ ТЕКСТ В ШАБЛОНЕ

Как создать сайт бесплатно

Как добавить .html к страницам WordPress

Показать блок только на главной странице WordPress

Нажмите ESC, чтобы закрыть

ИЗМЕНЕНИЕ РАЗМЕРОВ СВЕРТЫВАНИЕ ПУСТЫХ МОДУЛЕЙ

Прячем код модулей

ВЫВЕСТИ ТЕКСТ В ШАБЛОНЕ