Четверг, 02 Февраль 2012 03:50

Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Создаем шаблон и устанавливаем его.

Автор 
Оцените материал
(14 голосов)

Итак, в этом посте мы перейдем к практике. Свершилось чудо и у меня появилась свободная минутка для написания нового поста про шаблоны под Джумлу 1.6, 1.7, 2.5. Ура, товарищи! Не будем «лить воду» в анонс, а сразу перейдем к делу. Ну что, как говорил Юрий Алексеевич, поехали!

Итак, вы сверстали HTML-макет. Предположим... «Предположим» — потому, что вы его скачали в предыдущем посте, открыли в редакторе и увидели страшные теги :) Не переживайте, сейчас все проясним.

Рано залезли в код. Для начала нам надо разобраться с файловой структурой макета. Открываем папочку, и пытаемся самостоятельно найти ошибку в структурировании файлов :)

 

 

 

 

 

 

 

 

Думаем, думаем. Чего тут не хватает?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Каких, говорите, папок?

 

 

 

 

 

 

 

 

 

 

 

 

БИНГО! Нам нужна папочка со скромным именем «css» и еще одна — «js». Зачем? Вспоминаем из того же предыдущего поста для чего они нужны. В конечном итоге, у нас структура папки с учебным макетом не должна отличаться от этой:

Теперь, когда мы оптимизировали структуру папки шаблонов, нам надо переписать пути до таблиц стилей и фикса прозрачности png, для чего мы открываем в редакторе все html-файлы и заменяем

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="unitpngfix.js"></script>

на

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/unitpngfix.js"></script>

А так же в самих css-файлах нужно заменить путь к картинкм с images/xxx.jpg на ../images/xxx.jpg.

Цвета знакомые? Да, я тоже считаю его самым лучшим редактором html. Главное не увлекаться WYSIWYG-функциями. Холиварить не буду, делайте сайты хоть в блокнотах из-под винды, мне насрать.

Так о чем это я? Ах, да, теперь можно открывать index.html и изучать его. Но для начала откроем его в браузере и определимся с тем, что будет находиться в модуле, а что в исходном коде. И дадим имена позициям модулей (чтобы потом было полегче ориентироваться). Для увеличения нажмите на картинку:

Позиции модулей шаблона

Зачем логотипы оставлять в коде шаблона, если все можно вынести в модули? Ответ простой: так сложнее их поменять без помощи профессионала. То есть, вас. А это уже дополнительная копейка на пиво :) Ну, как плюс — можно вписать туда ссылку на ваш ресурс в качестве копирайта разработчика.

Теперь, когда мы определились со структурой шаблона, перейдем к модифицированию нашего html-макета. В первую очередь давайте создадим папку template, в которой будем держать рабочие файлы. Для начала скопируем туда файл index.html и папки css, js и images вместе с содержимым, переименуем index.html в index.php и откроем его в редакторе.

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

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/unitpngfix.js"></script>

на 

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/unitpngfix.js"></script>

Поясню в чем дело. <?php echo $this->baseurl ?> — это код переменной выводящей доменное имя. То есть, http://my_site.ru, в папке /templates/ хранятся все файлы шаблонов фронтэнда, ваш попадет туда же после установки. <?php echo $this->template ?> — переменная имени папки с шаблоном. Имя папки в которой будут храниться файлы сформируется автоматически при установке шаблона после того, как вы зададите его название в специальном файле на заключительном этапе создания шаблона. Об этом позднее. Дальше, думаю, все и так понятно. Не забывайте про слэши. Иначе все это сольется в одно слово и произойдет ошибка.

Хозяйке на заметку... 

Для оптимизации собственного труда, с целью получить больший процент КПД от затраченного времени на создание шаблона, многие фрилансеры создают несколько типовых «скелетов шаблона», или «болванок» для последующей доработки. Это как баклуша (если не знаете что это слово обозначает — поройтесь в словарях), если делать ложку имея только полено, вам все равно изначально прийдется сделать баклушу. То есть, в нашем случае баклушами будут варианты сетки сайта и CSS-файлов без визуального оформления.
Многие начинающие «создатели шаблонов Joomla» пренебрегают переменными, заранее зная как будет называться шаблон и какая у него будет папка. Это говорит о том, что люди не занимаются оптимизацией своего труда и каждый раз перед тем, как выстрогать ложку, берут полено, бьют баклушу и только после делают ложку. Такие фрилансеры зачастую отказываются от самостоятельной работы и уходят в лучшем случае в веб-контору, в худшем — менеджером в какую-нибудь торговую фирмочку.

Итак, продолжим работу над нашим создаваемым joomla-шаблоном. Для того, чтобы в служебной части нашего шаблона были видны еще и остальные метатеги, вставим между <head> и </head> команду <jdoc:include type="head" />. Не забывайте про нее. Иначе у вас будут только ссылки на стили. 

Спускаемся ниже. Все картинки, которые вставлены в шаблон так же не будут отображаться, если к ним не дописать переменные, которые упоминались выше. Так же в учебном макете нажатие на логотип приведет вас на сайт его разработчика. Соответственно, 13-я строка 

<div class="logo"> <a href="http://www.free-css.com/"><img src="images/logo.png" width="221" height="91" alt="" border="0" /></a> </div> 

Должна выглядеть не иначе, как:

<div class="logo"> <a href="/"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="221" height="91" alt="" border="0" /></a> </div> 

Идем дальше. Меню в Joomla 1.6, 1.7, 2.5 у нас формируется подобным образом:

Показать/скрыть html4strict код

Посмотреть код
<ul class="menu"> 
<li class="item-435 current active"><a href="/" >Главная</a></li><li class="item-478"><a href="#" >Услуги</a></li><li class="item-479"><a href="#" >О службе</a></li><li class="item-480"><a href="#" >VIP-Сервис</a></li><li class="item-481"><a href="#" >Контакты</a></li><li class="item-482"><a href="#" >Оплата услуг</a></li></ul>
 Вам необходимо запомнить особенности: класс девственного тега ul — "menu", класс li активного пункта меню всегда "active". Остальные классы нужны для индивидуализации кнопок меню. Например, для того, чтобы в сгенерированном системой меню кнопки были разноцветными. Но нас такие нюансы пока не интересуют. Оставлю их для вашей собственной фантазии. 

В нашем же учебном макете меню выглядит вот так:

Показать/скрыть html4strict код

Посмотреть код
  1. <ul class="menu">
  2. <li class="divider"></li>
  3. <li><a href="http://www.free-css.com/" class="nav_selected"> home </a></li>
  4. <li><a href="about.html" class="nav"> about us</a></li>
  5. <li><a href="http://www.free-css.com/" class="nav"> most wanted</a></li>
  6. <li><a href="http://www.free-css.com/" class="nav"> how to order</a></li>
  7. <li><a href="contact.html" class="nav"> contact </a></li>
  8. </ul>

Во-первых, нам не нужен <li class="divider"></li> (очень надеюсь на то, что вам не нужно объяснять для чего эту хрень сюда вставили разработчики макета, и так должно быть все понятно). Удаляем его и забываем, как страшный сон. Второе что нам не нужно — это классы тэга a, из-за этого нам прийдется немножко переделать стилизацию. В данном случае активный пункт стилизуется путем добавления css-класса не там, где это предусмотрено модулем меню Джумлы. С неактивными, кстати, та же проблема. Но все не так страшно, как кажется на первый взгляд. Такая разница позволит вам лучше запомнить структуру скелета классов девственного модуля меню. Так-то.

Итак, откроем css/style.css и найдем там код

Показать/скрыть css код

Посмотреть код
  1. #menu_tab{
  2. width:470px;
  3. float:left;
  4. padding:0px;
  5. }
  6.  
  7. ul.menu {
  8. list-style-type:none; display:block; width:470px;
  9. margin: auto; padding:65px 0 0 0; background:none;}
  10.  
  11. ul.menu li {
  12. display:inline;
  13. font-size:13px;
  14. font-weight:bold;
  15. line-height:28px;}
  16.  
  17. ul.menu li.divider {
  18. display:block;
  19. float:left;
  20. width:1px;
  21. height:31px;
  22. padding:0px ;
  23. margin:0px;
  24. background:url(../images/divider.gif) no-repeat center;
  25. }
  26.  
  27. a.nav:link, a.nav:visited {
  28. display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
  29. text-decoration:none; background:none; color:#fff;}
  30.  
  31. a.nav_selected:link, a.nav_selected:visited {
  32. display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
  33. text-decoration:none; color: #BF2F68;}
  34.  
  35. a.nav:hover {
  36. color: #BF2F68; text-decoration:none;}
Громоздко, не правда ли? Вот в этом и есть прелесть модуля меню в шаблонах Joomla 1.6, 1.7, 2.5!

Вы можете сократить количество строк, а следовательно, и размер файла, что здорово скажется на скорости загрузки сайта.

Показать/скрыть css код

Посмотреть код
  1. #menu_tab{
  2. width:470px;
  3. float:left;
  4. padding:0px;
  5. }
  6.  
  7. ul.menu {
  8. list-style-type:none; display:block; width:470px;
  9. margin: auto; padding:65px 0 0 0; background:url(../images/divider.gif) no-repeat left;height:31px;}
  10.  
  11. ul.menu li {
  12. display:inline;
  13. font-size:13px;
  14. font-weight:bold;
  15. line-height:28px;}
  16.  
  17. ul.menu li a, ul.menu li a:visited { 
  18. display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
  19. text-decoration:none; background:none; color:#fff;}
  20. ul.menu li a:hover, ul.menu li a:visited:hover, ul.menu li.active a { 
  21. display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
  22. text-decoration:none; color: #BF2F68;}
Получилось 22. При должном подходе можно сделать еще меньше. Но сейчас не об этом. Вы запомнили как стилизовать модуль меню в Joomla 1.6, 1.7, 2.5? Надеюсь, что да. И еще сильнее надеюсь, что объяснять ничего касательно CSS не прийдется.

Теперь нам нужно сделать так, чтобы меню формировалось Джумлой при помощи модуля меню. Давайте заменим в будущем шаблоне (а ныне макете)

Показать/скрыть html4strict код

Посмотреть код
  1. <ul class="menu">
  2. <li><a href="http://www.free-css.com/" class="nav_selected"> home </a></li>
  3. <li><a href="about.html" class="nav"> about us</a></li>
  4. <li><a href="http://www.free-css.com/" class="nav"> most wanted</a></li>
  5. <li><a href="http://www.free-css.com/" class="nav"> how to order</a></li>
  6. <li><a href="contact.html" class="nav"> contact </a></li>
  7.  </ul>

на

Показать/скрыть html4strict код

Посмотреть код
  1. <jdoc:include type="modules" name="topmenu" />
Что это такое?! Объясню. Только что мы заменили демо-список (который в обычной жизни нужен для того, чтобы визуально понимать как будет выглядеть меню на сайте) на позицию topmenu, в которой мы и расположим модуль горизонтального меню после установки шаблона. 

Спускаемся ниже. Нам нужно выделить позицию для модуля поиска. Так как мы изначально планировали назвать ее search, заменяем

 Показать/скрыть html4strict код

Посмотреть код
  1. <input type="text" class="search" value="search" />
  2.  <input type="image" src="images/search.gif" class="search_bt" />
соответственно, на

 Показать/скрыть html4strict код

Посмотреть код
  1. <jdoc:include type="modules" name="search" />
Дальше мы будем стилизовать и выводить в модуль дополнительное меню слева. Исходя из того, что я вижу, это будет несколько сложнее, но бояться не стоит. Формироваться оно будет точно так же, как и верхнее, которое мы уже успели стилизовать и понять логику формирования любого вида модульного меню в Джумле.

Вот что нам нужно сделать:

  1. Определиться с суффиксом класса модуля для левого дополнительного меню;
  2. Стилизовать меню с учетом суффикса. 

Суффикс класса модуля (суффикс класса меню в данном случае) — то, что будет добавляться к стандартному классу menu. Предлагаю суффикс -left. В настройках модуля меню это будет выглядеть вот так:

 

 А в CSS-файле это должно выглядеть, как menu-left, соответственно, сгенерированный html-код меню будет выводить класс menu-left. Вот и весь фокус. Суффикс класса модуля дает нам возможность применять разные стили для одних и тех же типов модулей в Joomla 1.0, 1.5, 1.6, 1.7, 2.5 и так далее. Это относится не только к меню, но и ко всем остальным модулям.  Теперь найдем в CSS-файле будущего шаблона код 

Показать/скрыть css код

Посмотреть код
  1. /*--------------left menu----------------*/
  2. #left_menu{
  3. position:relative;
  4. top:-10px;
  5. left:-15px;
  6. float:left;
  7. }
  8. #left_menu ul{
  9. list-style-type:none; width: 177px;
  10. margin:0; padding:0;}
  11.  
  12. #left_menu li {
  13. display:block;}
  14.  
  15. #left_menu li a {
  16. display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
  17. text-decoration:none; background-color:#d4847f; color:#FFFFFF;border-bottom:1px #da9591 solid;}
  18. #left_menu li.selected a {
  19. display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
  20. text-decoration:none;background:url(../images/left_menu_bullet.gif) no-repeat left #b0335d; color:#FFFFFF;border-bottom:1px #da9591 solid; background-position:5px 8px;
  21. }
  22. #left_menu li a:hover {
  23. display:block; padding:0 0 0 25px; height:30px;text-align:left;
  24. text-decoration:none; background:url(../images/left_menu_bullet.gif) no-repeat left #b0335d; color:#FFFFFF;border-bottom:1px #da9591 solid; background-position:5px 8px;
  25. }
И попробуем привести стили в порядок. Должно получиться вот это:

Показать/скрыть css код

Посмотреть код
  1. /*--------------left menu----------------*/
  2. #left_menu{
  3. position:relative;
  4. top:-10px;
  5. left:-15px;
  6. float:left;
  7. }
  8.  
  9. ul.menu-left {
  10. list-style-type:none; width: 177px;
  11. margin:0; padding:0;}
  12.  
  13. ul.menu-left li {
  14. display:block;}
  15.  
  16. ul.menu-left li a, ul.menu-left li a:visited {
  17. display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
  18. text-decoration:none; background-color:#d4847f; color:#FFFFFF;border-bottom:1px #da9591 solid;}
  19. ul.menu-left li a:hover, ul.menu-left li a:visited:hover, ul.menu-left li.active a {
  20. display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
  21. text-decoration:none;background:url(../images/left_menu_bullet.gif) no-repeat left #b0335d; color:#FFFFFF;border-bottom:1px #da9591 solid; background-position:5px 8px;
  22. }
Ни строчкой больше, ни строчкой меньше. 

Поверили?

Отчасти зря. Сейчас объясню почему. 

Давайте обратим внимание на одну деталь, которая могла ускользнуть от вас. Если повнимательнее изучить стилизацию левого меню, предложенную разработчиком, мы можем увидеть, что в исходном css-файле есть два идентичных по стилизации правила — #left_menu li.selected a и  #left_menu li a:hover. Это не ошибка и не подвох. Дело в том, что в стилизации меню можно сделать активный пункт и hover (то бишь, состояние при наведенном курсоре) разными внешне. Я их объединил, но ничего преступного не будет, если вы отделите стиль active от hover. В этом случае набор css-правил будет с такой структурой:

Показать/скрыть css код

Посмотреть код
  1. ul.menu-left li a, ul.menu-left li a:visited {
  2. /*** Стили для неактивного пункта ***/
  3. }
  4. ul.menu-left li a:hover, ul.menu-left li a:visited:hover {
  5. /*** Стили при наведении курсора ***/
  6. }
  7. ul.menu-left li.active a {
  8. /*** Стили для активного пункта ***/
  9. }
Собственно, это и подразумевал разработчик, но посчитал лишним заморачиваться над придумыванием отличающейся стилизации и тупо скопировал. Я его понимаю в этом плане :) Вообще, здесь вы можете играться со стилизацией меню как хотите. Можете так же добавить правило ul.menu-left li a:active, ul.menu-left li a:visited:active — чтобы добавить какой-нибудь спецэффект при нажатии на пункт меню. Например, изменение бэкграунда пункта меню таким образом, чтобы создавалось впечатление физического нажатия на кнопку (визуальное утопание кнопки — смотрится эффектно). Словом, все в ваших руках.

Поехали дальше. Теперь, когда мы закончили со стилизацией левого меню, давайте удалим его код от <ul> до </ul> включительно, а между <div id="left_menu"> и </div> вставим код позиции для левого меню. В начале урока мы назвали её leftmenu. Код для вставки: 

<jdoc:include type="modules" name="leftmenu" />

Спускаемся ниже. Мы видим код картинки images/submenu_pic.gif . Помните как исправлять путь? Исправляйте.

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

Показать/скрыть html4strict код

Посмотреть код
  1. <div class="title"><img src="images/lates_products_title.gif" alt="" /></div>
  2. <div class="product_box"> <img src="images/p1.gif" alt="" class="prod_image" />
  3. <div class="product_details">
  4. <div class="prod_title">Banded Red Polka Bikini.</div>
  5. <p> This cute red and white polka dotted bikini features a banded halter top and matching bottom with tie sides. </p>
  6. <p class="price">Price: <span class="price">82.90 $</span></p>
  7. <a href="details.html" class="details"><img src="images/details.gif" alt="" border="0" /></a> </div>
  8. </div>
  9. <div class="product_box"> <img src="images/p2.gif" alt="" class="prod_image" />
  10. <div class="product_details">
  11. <div class="prod_title">Banded Red Polka Bikini.</div>
  12. <p> This cute red and white polka dotted bikini features a banded halter top and matching bottom with tie sides. </p>
  13. <p class="price">Price: <span class="price">33.90 $</span></p>
  14. <p class="price">&nbsp;</p>
  15. <a href="http://www.free-css.com/" class="details"><img src="images/details.gif" alt="" border="0" /></a> </div>
  16.  </div>
И вместо нее вставляем

<jdoc:include type="modules" name="top" style="xhtml" />

Уже почувствовали неладное? Объясню. В Джумле есть несколько готовых макетов для вывода модулей — rounded, none, table, horz, xhtml, outline. Их структура задается в отдельных файлах, то есть, вы теоретически можете их переделать или даже придумать собственные. Но на практике — мелкие и средние проекты не нуждаются в этом, а крупные, сложные интернет-ресурсы лепить на бесплатной CMS с открытым кодом неразумно. Словом, не заморачивайтесь по этому поводу.  Запомните только, что стиль xhtml предполагает заголовок модуля h3, а так же стоит обратить внимание на то, что сама позиция находится в диве с классом moduletable. То есть, если вы хоть что-то усвоили из этого урока, а так же поигрались с присвоением стилей к позициям и изучили структуру этих стилей, должны согласиться с тем, что xhtml является наиболее приемлемым для большинства сайтов, а так же наиболее гибким стилем. Но на всякий случай я все же написал статью о том, как сделать свой стиль для позиции модулей.

Итак, дошла очередь до, собственно, наполнения сайта. Убираем рыбу:

Показать/скрыть html4strict код

Посмотреть код
  1. <div class="title"><img src="images/shop_title.gif" alt="" /></div>
  2. <p class="shop_by_brand"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  3. <a href="http://www.free-css.com/"><img src="images/sp1.gif" alt="" class="sp" border="0" /></a> <a href="http://www.free-css.com/"><img src="images/sp2.gif" alt="" class="sp" border="0" /></a> <a href="http://www.free-css.com/"><img src="images/sp3.gif" alt="" class="sp" border="0" /> </a>
  4.  <div class="title"><img src="images/center_divider.gif" alt="" /></div>
И вместо нее вставляем команду для вывода контента:

Показать/скрыть html4strict код

Посмотреть код
<jdoc:include type="component" />
Рассказывать тут особо нечего. Этот инклюд — самое основное в шаблоне. Тексты страниц.

Чуть ниже у нас еще одна позиция для модуля. Убираем рыбу:

Показать/скрыть html4strict код

Посмотреть код
  1. <div class="title"><img src="images/gift_title.gif" alt="" /></div>
  2. <a href="http://www.free-css.com/"><img src="images/gift1.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="images/gift2.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="images/gift3.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="images/gift4.gif" alt="" class="gift" /></a>
  3. <p class="gifts_details"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  4.  </div>
Вставляем

 Показать/скрыть html4strict код

Посмотреть код
<jdoc:include type="modules" name="bottom" style="xhtml" />
То есть, должно быть так:

Показать/скрыть html4strict код

Посмотреть код
  1. <jdoc:include type="modules" name="top" style="xhtml" />
  2. <jdoc:include type="component" />
  3. <jdoc:include type="modules" name="bottom" style="xhtml" />

Дальше спускаемся ниже, исправляем путь к картинке images/footer_logo.gif, исправляем стилизацию нижнего меню в css-файле, удаляем из шаблона рыбу этого меню, вставляем позицию footer вместо нее, и на этом останавливаемся. То есть, сохраняем файл index.php и закрываем его. Я намеренно не написал что и где менять и как вставлять позицию. Потому, что уже подробно все разжевал выше. Так, что если вы здесь впали в ступор, советую перечитать пост сначала.

А все, кто справился с задачей, переходим к следующему этапу. Заполним xml-файл шаблона. То есть templateDetails.xml. На данном этапе обучения нам хватит вот такой структуры xml-файла:

Показать/скрыть xml код

Посмотреть код
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> 
<extension version="1.7" type="template" client="site"> 
 <name></name> 
 <creationDate></creationDate> 
 <author></author> 
 <authorEmail></authorEmail> 
 <authorUrl></authorUrl> 
 <copyright></copyright> 
 <license></license> 
 <version></version> 
 <description></description> 
 <files> 
 <filename></filename> 
 </files> 
 <positions> 
 <position></position> 
 </positions> 
</extension>
Давайте в первую очередь из папки images удалим все рыбные картинки, которые нам в шаблоне не пригодятся. Теперь пора перейти к составлению файла:

Показать/скрыть xml код

Посмотреть код
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> 
<extension version="1.7" type="template" client="site"> 
<name>Demo <!-- Название шаблона. Из этого места формируется название папки шаблона, так что сильно не заморачивайтесь с названием. Максимум — два слова --></name> 
 <creationDate>2012.02.06 <!-- Дата создания шаблона --></creationDate> 
 <author>Artyom  <!-- Представьтесь --></author> 
<authorEmail>artem @ dezigner.ru  <!-- Ваше мыло --></authorEmail> 
<authorUrl>http://joomla-show.ru <!--  Адрес вашего сайта --></authorUrl> 
<copyright>Напишите о себе :)</copyright> 
 <license>GNU GPL <!-- Тип лицензии --></license> 
<version>1.0.0 <!-- Номер версии :) --></version> 
<description>Описание шаблона. Можно использовать любые html-теги и стили css</description> 
 
 <files> 
<filename>css/style.css</filename> 
 <filename>images/logo.png</filename>
 
 
<!-- Словом, нужно здесь прописать все файлы которые используются в шаблоне. Если какой-либо файл здесь не вписать, то он попросту не распакуется при установке шаблона на сервер -->
 
 
<filename>template_preview.png</filename> 
 <filename>template_thumbnail.png</filename> 
 <filename>templateDetails.xml</filename> 
 </files> 
 <!-- А дальше идут названия позиций. Они должны совпадать с тем, что вы указывали в шаблоне. Если забудете одну из них, она не появится в списке доступных позиций -->
 <positions> 
<position>topmenu</position> 
 <position>search</position> 
 <position>top</position> 
<position>leftmenu</position> 
<position>bottom</position>  
<position>footer</position>  
 </positions> 
</extension>

Теперь сделайте скриншоты страницы и... А вот тут будет тест на то, читали ли вы предыдущий урок? Если да, то должны понять что с этими скриншотами делать.

Теперь, когда вы разобрались со скринами, архивируйте все файлы в zip (обратите внимание на то, чтобы файлы легли в корень архива). Получилось? Поздравляю! Вы только что сделали свой первый шаблон для Джумлы 1.7 (1.6, 2.5). Спасибо за внимание.

План уроков:

  1. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Введение.
  2. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla.
  3. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Создаем шаблон и устанавливаем его.
  4. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Настраиваем Virtuemart.
  5. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Оформляем блог на K2.
  6. Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Заключение.

 

Прочитано 93714 раз Последнее изменение Пятница, 24 Февраль 2012 02:32
Твитнуть

Комментарии   

 
Миша
0 #53 Миша 02.11.2013 15:15
Цитата:
Спускаемся ниже. Мы видим код картинки images/submenu_pic.gif . Помните как исправлять путь? Исправляйте.
- а я не понял, как исправлять! До этого в статье было сказано, как исправить пути в css: ../images и т.п. Но ведь в html нет такого значения ../ ! Или есть?
Или это нужно делать с помощью переменных php? Вот не понял я, как исправить пути к картинкам, и всё тут! Подскажите.
Цитировать
 
 
Георгий
0 #52 Георгий 27.06.2013 01:02
Здравствуй, Артем!
Отличные уроки, начало становиться все на свои места.. Но разъясни с какой стороны копать насчет модулей.. Мы вставляем модули, но как создать их содержимое? С меню понятно.. а вот например у меня есть модуль Top где шапка и все прочее.. Да и какие нибудь другие свои модули. Как создать это содержимое? В самой Jooml'е?
Очень жду ответа... И еще раз большое спасибо
Цитировать
 
 
Сашулик
0 #51 Сашулик 18.03.2013 14:20
это просто супер! Жду с нетерпением следующих статей! а где кошелек для добровольных пожертвований? :lol:
Цитировать
 
 
Тимур
0 #50 Тимур 29.01.2013 19:41
Здравствуйте! будет ли продолжение?
Цитировать
 
 
IngeniousKid
0 #49 IngeniousKid 27.11.2012 19:07
Спасибо огромное за ваш труд! У меня два вопроса:
- при создании шаблона, после его установки, он отображается в менеджере 2 раза (((
- и когда можно ждать продолжение )

Спасибо!
Цитировать
 
 
Артем
0 #48 Артем 23.10.2012 11:40
Цитирую azorr:
Добрый Всем!

Люди подскажите плиз, :"Цвета знакомые? Да, я тоже считаю его самым лучшим редактором html. "
о каком таком html-редакторе идет речь??
Хочеться сразу привыкать к правильному редактору :roll:

P.S. аффтору респект


Adobe Dreamweaver.

Включает в себя так же фтп-клиент.
Цитировать
 
 
azorr
0 #47 azorr 19.10.2012 21:30
Добрый Всем!

Люди подскажите плиз, :"Цвета знакомые? Да, я тоже считаю его самым лучшим редактором html. "
о каком таком html-редакторе идет речь??
Хочеться сразу привыкать к правильному редактору :roll:

P.S. аффтору респект
Цитировать
 
 
Артем
0 #46 Артем 18.10.2012 18:21
Цитирую Серега:
Артем отличный урок, извините, покритикую, для новичков врят ли покати!

Расчет на новичков в Джумле, но никак не на новичков в ХТМЛе. Ибо как правильно верстать в принципе я не хочу писать — слишком большой объем информации, а времени на блог остается все меньше.
Цитировать
 
 
azorr
0 #45 azorr 17.10.2012 17:48
Цитирую Photoshopper:
А мне понравилось, как веселей читать)

Цитата:
Холиварить не буду, делайте сайты хоть в блокнотах из-под винды, мне насрать.


вообще не хотелось продолжать чтение. В статье куча мусора.
Цитировать
 
 
Серега
0 #44 Серега 12.10.2012 23:40
Артем отличный урок, извините, покритикую, для новичков врят ли покати!
Цитировать
 
 
Анна
0 #43 Анна 07.09.2012 14:07
Артем, спасибо! :)

У меня проблема разрешилась. Оказалось, что в стилях Firefox и Safari (почему-то в обоих браузерах) элемент iframe выглядел так - dispay: none. Закомметировала свойство dispay и все стало отображаться.
Цитировать
 
 
Артем
0 #42 Артем 06.09.2012 13:21
Цитирую Анна:
Спасибо Вам большое!

Артем, можно немножко понаглеть и спросить не по теме?
Не могу продвинуться в изучении CMS из-за глюков в админке. Гуглила очень много, но ответов для себя подходящих не нашла.
У меня в TinyMCE Joomla2.открываются пустые всплывающие окна. Вообще не работает ни одна функция админки с ними связанная.
Поставила версию 1.7. Лучше - там они функционируют через одно. Но, работать полноценно невозможно.
Я работаю под Мас Оs и на локалхосте. Поэтому варианты, что это связано с путем к домену, прописанному в конфиге (с www или нет) или блокироовкой всплывающих окон в касперском - для меня не работают.
Джаваскрипт включюн. Джейсон тоже поддерживается арачем.

Скачайте mamp pro версии 2.0.1. Разобраться в нем легко, json имеется, включен по умолчанию. Единственная надстройка, которая может пригодиться — Zend Optimizer. Как его поставить я писал в блоге. Но он нужен только для коммеррческих систем. Например, для Битрикса.

Браузер, в котором ничего не тормозит — Опера. Я работаю с Яяндекс-версией . Очень удобно, без глюков.

Пустые всплывающие окна, если все в порядке с настройками браузера, могут появиться из-за тормозов сервера, поэтому попробуйте МАМП про 2.0.1 и Оперу — эта связка работает шустренько и без глюков, проверено.
Цитировать
 
 
Анна
0 #41 Анна 05.09.2012 01:17
Спасибо Вам большое!

Артем, можно немножко понаглеть и спросить не по теме?
Не могу продвинуться в изучении CMS из-за глюков в админке. Гуглила очень много, но ответов для себя подходящих не нашла.
У меня в TinyMCE Joomla2.открыва ются пустые всплывающие окна. Вообще не работает ни одна функция админки с ними связанная.
Поставила версию 1.7. Лучше - там они функционируют через одно. Но, работать полноценно невозможно.
Я работаю под Мас Оs и на локалхосте. Поэтому варианты, что это связано с путем к домену, прописанному в конфиге (с www или нет) или блокироовкой всплывающих окон в касперском - для меня не работают.
Джаваскрипт включюн. Джейсон тоже поддерживается арачем.
Цитировать
 
 
Артем
0 #40 Артем 04.09.2012 17:51
Цитирую Анна:
Здравствуйте, Артем!

Я сделала условный макет - то есть простейший тренировочный, только css. В остальном сделала все как вы сказали.
Шаблон присоединился - отображается, но с модулями я не понимаю, что делать.
Я так поняла, что их надо создать через менеджеры? То есть, если это меню, то Меню->создать меню->меню с названием leftmenu? И оно станет в указанном в шаблоне месте?
Простите, если вопрос совсем ламерский - я только начала разбираться с джумло. Знаю html, css и основы php

Нет. Сначала создаете меню — левое, называете его leftmenu. Далее. Менеджер модулей -> Создать -> Меню -> Основные параметры -> Выбор меню -> leftmenu -> Дополнительные параметры -> Суффикс класса меню -> -left -> Выбор позиции -> выбираете вашу позицию -> Состояние -> Опубликовано. Вот как-то так.
Цитировать
 
 
Анна
+1 #39 Анна 03.09.2012 01:50
Здравствуйте, Артем!

Я сделала условный макет - то есть простейший тренировочный, только css. В остальном сделала все как вы сказали.
Шаблон присоединился - отображается, но с модулями я не понимаю, что делать.
Я так поняла, что их надо создать через менеджеры? То есть, если это меню, то Меню->создать меню->меню с названием leftmenu? И оно станет в указанном в шаблоне месте?
Простите, если вопрос совсем ламерский - я только начала разбираться с джумло. Знаю html, css и основы php
Цитировать
 

Добавить комментарий

Защитный код
Обновить

joomla 1.7

Не получаются доработки?

Становитесь партнером студии Millor! Быстро и недорого эти ребята помогут решить практически любую проблему.

Хотите подзаработать?

Если да, то вам сюда! Партнерская программа студии MyWebSite. Получи 20% за каждого клиента! Работаем по всей России и СНГ!

Рекламное место свободно.