- Главная
- Новости
- Справка
- Документация
- Форум
- Расширения
- Скачать
- Блоги
- Заказать сайт
- Обучение

- Представиться системе

##### Просмотры

- Статья
- Обсуждение
- Править
- История

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

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

Все объявления
Яндекс Директ
Дать объявление

Хостинг профессиональный недорого Доступный профессиональный хостинг для вашего сайта + Домен очень дёшево ! sweb.ru |  | Бесплатные уроки flash!!! Наши уроки помогут стать тебе профи! Торопись стать мега-дизайнером! flash.secrets-seller.ru |  | Очередь на раскрутку сайтов! Биржа по продвижению сайтов - здесь клиент и оптимизатор найдут друг друга! www.seobirja.ru |  | Хостинг. Место под сайт. Надежно На серверах в Германии. От 35 руб. за 1 Гб. Тех.поддержка на русском языке. hostimum.com

[править]

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

- Бесплатные инструменты для разработки шаблона
- Изменение размера шрифта с помощью java-скрипта - добавьте возможность
- Составляющие шаблона Joomla - из чего состоит шаблон Joomla 1.0
- Фишки шаблонов 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?

Большинство необходимых классов и стилей описано в учебнике Обучение 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/component/option,com_mtree/task,viewlink/link_id,163/Itemid,35/

Итак, скачайте модуль и установите его. Теперь его необходимо настроить соответствующим образом. Первое, что необходимо сделать - это присвоить модулю "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>'; ?>

в конце.

Получено с http://www.joomla-docs.ru/FAQ_%D0%BF%D0%BE_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B0%D0%BC_Joomla

Категории: FAQ по Joomla | FAQ по шаблонам Joomla

К этой странице обращались 217 411 раз(а).
Последнее изменение этой страницы: 16:37, 6 февраля 2008.
Все объявления
Яндекс Директ
Дать объявление

Мастер-классы по проф. Javascript ООП, AJAX/COMET, оптимизация, jQuery. Повышает уровень. Для умных. javascript.ru |  | Сайты Фото, описания, цены. Сравнивай и выбирай! www.ru.all-biz.info |  | Портал деловых объявлений Коммерческие и частные деловые объявления. Авто, недвижимость, работа досуг www.addmenow.ru |  | Naumen Service Desk информационная система для ИТ-подразделений и сервисных компаний www.naumen.ru

Вернуться
Copyright © 2007, Joomla-Docs.ru

##### Навигация

- Заглавная страница
- Категории
- Последние статьи
- Все статьи
- Самое читаемое
- Свежие правки
- Справка

##### FAQ (Ча.Во.)

- FAQ по Joomla
- Шаблоны Joomla

##### Локализация

- Глоссарий терминов для перевода
- Справка по локализации

##### Прочее

- Сообщество
- Текущие события
- Случайная статья
- Поддержка проекта

##### Инструменты

- Ссылки сюда
- Связанные правки
- Загрузить файл
- Спецстраницы
- Версия для печати
- Постоянная ссылка

Google Sitemap (xml)
Поддержка Joomla!