Действия

FAQ по шаблонам Joomla

Материал из База знаний Joomla

Cтатьи из категории FAQ по шаблонам Joomla

Что такое шаблон?

Шаблон отвечает за вывод содережимого вашего сайта и его внешнее форматирование. Под содержимым подразумеваются компоненты, модули, статьи/новости и другая статическая информация. Оформлением всего вышеперечисленного занимается css - стили вашего шаблона (файл template_css.css).

По умолчанию, Joomla! доступна к скачиванию с двумя стандартными шаблонами. больше шаблонов вы можете найти на сайтах, посвященных Joomla! Или, при наличии достаточных навыков, вы можете сделать свой собственный шаблон.

Список установленных шаблонов и доступные действия над ними можно увидеть в "Менеджере шаблонов" (находится в админцентре).

Как установить новый шаблон?

Есть 2 способа установки шаблона: с помощью инсталлятора Joomla и вручную. 1. В админцентре выберите "Установка" - "Установить шаблоны сайта" (или "Шаблоны админцентра, в зависимости от типа устанавливаемого шаблона). Далее выберите архив с шаблоном на вашем жестком диске и нажмите кнопку "Установить".

После установки направляйтесь в "Сайт" - "Управление шаблонами" - "Шаблоны сайта". Вы можете увидеть название только что установленного шаблона в списке других шаблонов. Выберите шаблон и нажмите "Сделать по умолчанию".

2. Распакуйте шаблон в папку на локальном компьютере и загрузите её по FTP на сайт в папку templates

Как можно изменить шаблон?

Шаблон - это папка, находящаяся в папке templates вашего сайта, в которой хранятся файлы xml, php, css и изображения. Вы можете изменить эти файлы через специальные программы или через интерфейс админцентра.

В админцентре выберите "Сайт" - "Управление шаблонами" - "Шаблоны сайта". Далее выберите шаблон, который собираетесь изменить. После чего нажмите кнопку "Изменить HTML" или "Изменить CSS".

CSS - это стили вашего шаблона. С помощью css можно сделать оформление каждому элементу шаблона. HTML - это главный файл, в котором осуществляется вывод содержимого сайта. В папке этот файл называется index.php.


Как добавить новую позицию в шаблон?

Прежде всего для создания новой позиции в шаблоне, вам необходимо определиться с названием позиции. Существующие позиции на сайте вы можете посмотреть в "Админцентр" - "Управление шаблонами" - "Позиции".

После того, как вы выбрали название позиции, открывайте index.php вашего шаблона и добавьте строчку

<?php mosLoadModules ( 'position_name'); ?>

в нужное место, где "position_name" - это название позиции.

Где взять описание классов стилей Joomla 1.0?

Только для Joomla 1.0 Большинство необходимых классов и стилей описано в учебнике [Обучение CSS-стилям Mambo/Joomla за 5 минут] Плюс вы можете скачать себе blank.css, в котором наиболее полно описаны стили. От других подобных отличает то, что все параметры CSS уже прописаны, но пусты. Остается только заполнить их.

Как в index.php правильно задать путь до картинки?

Как же правильно прописать путь к картинке, находящейся в папке /images шаблона? Вообще, путь до картинки может быть задан двумя способами - относительным путем и абсолютным.

Абсолютный путь:

<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>/images/spacer.gif

Относительный (от корня сайта):

templates/<?php echo $cur_template; ?>/images/spacer.gif

Полный код:

<img src="templates/<?php echo $cur_template; ?>/images/spacer.gif" alt="" width="188" height="1" />

Пояснение по конструкциям php, использованным в вышеприведенных примерах:

<?php echo $mosConfig_live_site;?>
- адрес вашего сайта. Имеет вид: __http://localhost/ или __http://www.localhost/
<?php echo $cur_template; ?>
- название папки шаблона, который установлен по умолчанию для вашего сайта.

Как сделать приветствие на сайте вида "Здравствуйте Вася Пупкин"

Если это необходимо жестко зашить в шаблон, то поможет такая конструкция:

<?php if ( $my->id ) { echo 'Здравствуйте, '.$my->name.'!'; } ?>


Каждому браузеру свой CSS

Много людей при создании своего шаблона задаются вопросом, почему при просмотре сайта в различных браузерах он выглядит по-разному. Это случается из-за того, что все браузеры написаны не одинаково и каждый браузер трактует css по-своему. В последнее время много сообщений на форуме о том, что в различных браузерах сайт отображается по-другому. Поэтому я решил написать это сообщение.

Обычно это решается функцией @import, но если она не может быть использована, попробуйте это:

<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
	if (stristr($nav, "msie")) 
	{
		echo "ie-css.css";
	}
	else
	{
		echo "templatecss.css";
	}	
?>

Вышеприведенный код проверит браузер и если он Internet Explorer, то подключит файл ie-css.css, если же нет, то будет использован templatecss.css. Для поддержки большего количества браузеров можно доработать код, как это показано ниже:

<?php
$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
// checks if browser is Internet Explorer
	if (stristr($nav, "msie")) 
	{
		echo "ie-css.css";
	}
// checks if browser is Mozilla
	elseif (stristr($nav, "moz"))
	{
		echo "mozilla-cssfile.css";
	}
// checks if browser is Netscape
 
	elseif (stristr($nav, "ns"))
	{
		echo "netscape-css.css";
	}
// If browser is a different one
	else
	{
		echo "templatecss.css";
	}	
?>

Вот пример, как бы выглядел код в реальном сайте:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/
		<?php
		$nav = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
		// checks if browser is Internet Explorer
 
			if (stristr($nav, "msie")) 
			{
				echo "ie-css.css";
			}
		// checks if browser is Mozilla
 
			elseif (stristr($nav, "moz"))
			{
				echo "mozilla-cssfile.css";
			}
		// checks if browser is Netscape
 
			elseif (stristr($nav, "ns"))
			{
				echo "netscape-css.css";
			}
		// If browser is a different one
 
			else
			{
				echo "templatecss.css";
			}
		?>
 />
</head>	
	<body>
		<h1>The Body Text For Your Site</h1>
	</body>
</html>

Есть еще другой способ подключения определенного стиля для браузера Internet Explorer:

<!--[if lte IE 6]>
<link href="templates/<?php echo $cur_template; ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->


На некоторых страницах шаблон "разваливается". Почему и как это исправить?

Причина Часто шаблоны бывают сверстаны на слоях (DIV) с использованием "плавающих" элементов-блоков. Ширина этих элементов фиксированна и, в соответствии со стандартом, не должна меняться ни в коем случае. Т.к. Internet Explorer "самый умный" браузер и ему закон не писан , то он все же расширяет блоки, которые, не вмещаясь в отведенные для них места, перемещаются вниз. Проще говоря - они просто выталкиваются соседними элементами. FF и Опера, когда содержимое блока не влазит в него, просто накладывают блоки друг на друга. При этом содержимое блоков часто вылазит за их границы. Очень часто подобное проявляется на страницах с таблицами и с различными фильтрами, выбором отображения и т.п. Этот "косяк" будет проявляться на ВСЕХ шаблонах, где используются слои (DIV) и ширина табличек слишком большая. Если бы шаблон был сверстан на таблицах, то его просто расперло бы в ширину.

Как решить проблему? Сейчас несложно догадаться, что надо сделать - надо уменьшить ширину содержимого блоков. Необходимо отключить фильтры, поля сортировки, лишние столбцы в таблице со списком статей. Идем например в Меню - mainmenu - ссылка на News - Latest и настраиваем страницу, пока все не будет ok. Для понимания сказанного смотрим приаттаченный скриншот.

Ошибка создания миниатюры: Файл не найден
Скриншот из администратора Joomla
Также блоки может распирать контент, содержащий неразрывные пробелы -
&nbsp
;

Как изменить footer в шаблоне, убрать или добавить внизу надпись, copyright, рекламу (При поддержке и т.д.)

Есть несколько способов изменить footer сайта.

  • Отредактировать файл includes/version.php. В это файле ищем строчки
<div align="center">
	&copy; <?php echo mosCurrentDate( '%Y' ) . ' ' . $GLOBALS['mosConfig_sitename'];?>
</div>

Их и надо заменять на свой текст.

  • Также можно удалить из файла шаблона следующий код, если он там присутствует:
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
  • В нужном вам месте шаблона вставить код
<?php mosLoadModules ( 'footer', -1 ); ?>

и создать модуль с нужным содержимым и расположить его в позиции footer

  • Реклама находится в файле includes/footer.php.
Если ваши религиозные (или еще какие-либо) убеждения позволяют оставить ссылку на Joom.ru, 
то, пожалуйста, оставьте её. Не обязательно оставлять весь текст, достаточно ссылки 
с текстом "CMS Joomla" на любой индексируемой странице (лучше на Главной). 
Этим вы поможете проекту и другим людям.

Про выпадающее меню в Joomla

Многие люди при создании своего собственного шаблона Joomla задаются вопросом: "Как лучше организовать меню?". Некоторые используют Flash-меню, некоторые вставляют JavaScript-меню. Я не люблю использовать эти элементы в своих работах, мне нравится чистый код, не обремененный лишними файлами. Вероятно, вы зададите вопрос: "Как же тогда сделать привлекательное меню?".

Есть много способов создания привлекательного выпадающего меню с помощью CSS, в основе большинства которых лежит использование списков (li). Один из таких способов мы сейчас и рассмотрим ниже.

Существует меню под названием "suckerfish" (не спрашивайте меня, почему его так назвали) - маленький, чистый код, 12 строчек JavaScript и абсолютно бесплатный!

Как оно выглядит, вы можете посмотреть здесь: http://www.htmldog.com/articles/suckerfish/dropdowns/example/

Вы могли заметить, что на стандартном модуле нормальное меню не сделать. Поэтому мы воспользуемся дополнительным модулем, который называется "Extended Menu". Найти и скачать его можно здесь: http://extensions.joomla.org/extensions/163/details

Итак, скачайте модуль и установите его. Теперь его необходимо настроить соответствующим образом. Первое, что необходимо сделать - это присвоить модулю "CSS-суффикс". Обычно, я использую "mainnav". После нужно задать стиль меню - "Плоский список" и выпадающее меню - "Да".

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

 
#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{  /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
.moduletablemainnav{ /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,
#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,
#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,
#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}
 

Удостоверьтесь, что правильно установили z-index - они должны обязательно присутствовать для упорядочивания позиционирования списка. Ну, и последний штрих, нужно добавить JavaScript в ваш index.php шаблона для того, чтобы всеми любимый IE стал понимать в хаке элемент :hover для наших конструкций.

 
<script type="text/javascript"><!--
 
sfHover = function() {
	var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
--></script>
 

Как убрать "Страница сгенерирована за ... секунд"?

В любом шаблоне, где выводится данная строчка, необходимо удалить следующие строчки из index.php шаблона:

$tstart = mosProfiler::getmicrotime();

в начале файла и

<?php echo '<div class="small" style="text-align: center;" >'; 
	$tend = mosProfiler::getmicrotime(); 
		$totaltime = ($tend - $tstart);
	printf ("Page generation of %f second", $totaltime);
				echo '</div>'; ?>

в конце.