Просмотры
FAQ по шаблонам Joomla
Материал из База знаний Joomla.
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. Для понимания сказанного смотрим приаттаченный скриншот.
Также блоки может распирать контент, содержащий неразрывные пробелы -
Как изменить footer в шаблоне, убрать или добавить внизу надпись, copyright, рекламу (При поддержке и т.д.)
Есть несколько способов изменить footer сайта.
- Отредактировать файл includes/version.php. В это файле ищем строчки
<div align="center"> © <?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>'; ?>
в конце.
Последнее изменение этой страницы: 16:37, 6 февраля 2008.