Верстак - Joomla Show - Joomla Show http://joomla-show.ru Thu, 19 Mar 2015 02:43:36 +0300 Joomla! - Open Source Content Management ru-ru Расположение div по центру экрана (центрируем по высоте и ширине) http://joomla-show.ru/item/59-raspolozhenie-div-po-tsentru-ekrana-tsentriruem-po-vyisote-i-shirine-ekrana http://joomla-show.ru/item/59-raspolozhenie-div-po-tsentru-ekrana-tsentriruem-po-vyisote-i-shirine-ekrana

Сегодня мы поговорим о том, как отцентрировать большой блок div как по горизонтали, так и по вертикали. Это необходимо при создании ограниченного по высоте сайта, как на картинке:

 

 Как пишут в интернетах, для решения этой задачи мог бы подойти такой вариант:

{code lang:css lines:false hidden:false}display:block;
width:1000px;
height:640px;
position:fixed;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-500px;{/code}

Однако, этот способ имеет ряд недостатков, включая критические. К ним относится: position:fixed, что само по себе не айс, даже не смотря на то, что его можно заменить (при правильном подходе к body и html) на absolute или relative. А еще такое расположение больших блоков недопустимо потому, что на маленьких экранах (телефон, планшет, нетбук) блок обрежется по бокам, а так же сверху и снизу. Ну, и невозможно будет подвинуть блок, потому что скроллбары в этом случае отменяются. Не зависимо от того, какой у вас браузер или гаджет. Даже самый новый айпад не справится.

Казалось бы, можно просто поставить position:relative, и тогда скроллы появятся и сайт можно будет двигать во все стороны... Но не все так просто. Часть слева и сверху все равно уйдет в небытие. То есть, при ширине блока в 1000px, разрешении экрана 800*600 и полноэкранном режиме, у вас скушается и невозможно будет увидеть порядка 100 пикселей слева и 20 сверху, а скроллить можно будет только вправо и вниз, то есть этот вариант так же проигрышный.

Итак, что же делать?

А за решением проблемы, мы обратимся к старым добрым таблицам, хотя применять мы их в верстке и не будем. Как? А вот так:

{code lang:css lines:true hidden:false}html,body {
    width:100%;
    height:100%;
}
html {display:table}
body {
    display:table-cell;
    vertical-align: middle;
    text-align: center;/* для IE6 */
}
#wrapper {
    display:block;
    width: 1000px;
    height:640px;
    text-align: left;/* шоп было все круто */
    margin: 0 auto;
}{/code}

Понравилось? Лично мне — очень! И кроссбраузерно, и кроссрезолютивно. Пользуйтесь! :)

]]>
artyom-vikt@yandex.ru (Артем) CSS Fri, 15 Feb 2013 13:54:09 +0400
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Создаем шаблон и устанавливаем его. http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/38-kak-sdelat-shablon-dlya-joomla-16-17-25-sozdaem-shablon-i-ustanavlivaem-ego http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/38-kak-sdelat-shablon-dlya-joomla-16-17-25-sozdaem-shablon-i-ustanavlivaem-ego

Итак, в этом посте мы перейдем к практике. Свершилось чудо и у меня появилась свободная минутка для написания нового поста про шаблоны под Джумлу 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 у нас формируется подобным образом:

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

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

{code lang:html4strict lines:true hidden:false}<ul class="menu">
<li class="divider"></li>
<li><a href="http://www.free-css.com/" class="nav_selected"> home </a></li>
<li><a href="http://joomla-show.ru/about.html" class="nav"> about us</a></li>
<li><a href="http://www.free-css.com/" class="nav"> most wanted</a></li>
<li><a href="http://www.free-css.com/" class="nav"> how to order</a></li>
<li><a href="http://joomla-show.ru/contact.html" class="nav"> contact </a></li>
</ul>{/code}

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

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

{code lang:css lines:true hidden:false}#menu_tab{
width:470px;
float:left;
padding:0px;
}

ul.menu {
list-style-type:none; display:block; width:470px;
margin: auto; padding:65px 0 0 0; background:none;}

ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}

ul.menu li.divider {
display:block;
float:left;
width:1px;
height:31px;
padding:0px ;
margin:0px;
background:url(../images/divider.gif) no-repeat center;
}

a.nav:link, a.nav:visited {
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}

a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}

a.nav:hover {
color: #BF2F68; text-decoration:none;}{/code}Громоздко, не правда ли? Вот в этом и есть прелесть модуля меню в шаблонах Joomla 1.6, 1.7, 2.5!

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

{code lang:css lines:true hidden:false}#menu_tab{
width:470px;
float:left;
padding:0px;
}

ul.menu {
list-style-type:none; display:block; width:470px;
margin: auto; padding:65px 0 0 0; background:url(../images/divider.gif) no-repeat left;height:31px;}

ul.menu li {
display:inline;
font-size:13px;
font-weight:bold;
line-height:28px;}

ul.menu li a, ul.menu li a:visited { 
display:block; float:left; padding:0px; margin:0;width: auto; margin:0px 14px 0px 14px; text-align:center;
text-decoration:none; background:none; color:#fff;}
ul.menu li a:hover, ul.menu li a:visited:hover, ul.menu li.active a { 
display:block; float:left; padding:0px; margin:0;width: auto;margin:0px 14px 0px 14px;text-align:center;
text-decoration:none; color: #BF2F68;}{/code}Получилось 22. При должном подходе можно сделать еще меньше. Но сейчас не об этом. Вы запомнили как стилизовать модуль меню в Joomla 1.6, 1.7, 2.5? Надеюсь, что да. И еще сильнее надеюсь, что объяснять ничего касательно CSS не прийдется.

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

{code lang:html4strict lines:true hidden:false}<ul class="menu">
<li><a href="http://www.free-css.com/" class="nav_selected"> home </a></li>
<li><a href="http://joomla-show.ru/about.html" class="nav"> about us</a></li>
<li><a href="http://www.free-css.com/" class="nav"> most wanted</a></li>
<li><a href="http://www.free-css.com/" class="nav"> how to order</a></li>
<li><a href="http://joomla-show.ru/contact.html" class="nav"> contact </a></li>
 </ul>{/code}

на

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

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

 {code lang:html4strict lines:true hidden:false}<input type="text" class="search" value="search" />
 <input type="image" src="http://joomla-show.ru/images/search.gif" class="search_bt" />{/code}соответственно, на

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

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

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

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

 

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

{code lang:css lines:true hidden:false}/*--------------left menu----------------*/
#left_menu{
position:relative;
top:-10px;
left:-15px;
float:left;
}
#left_menu ul{
list-style-type:none; width: 177px;
margin:0; padding:0;}

#left_menu li {
display:block;}

#left_menu li a {
display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
text-decoration:none; background-color:#d4847f; color:#FFFFFF;border-bottom:1px #da9591 solid;}
#left_menu li.selected a {
display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
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;
}
#left_menu li a:hover {
display:block; padding:0 0 0 25px; height:30px;text-align:left;
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;
}{/code}И попробуем привести стили в порядок. Должно получиться вот это:

{code lang:css lines:true hidden:false}/*--------------left menu----------------*/
#left_menu{
position:relative;
top:-10px;
left:-15px;
float:left;
}

ul.menu-left {
list-style-type:none; width: 177px;
margin:0; padding:0;}

ul.menu-left li {
display:block;}

ul.menu-left li a, ul.menu-left li a:visited {
display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
text-decoration:none; background-color:#d4847f; color:#FFFFFF;border-bottom:1px #da9591 solid;}
ul.menu-left li a:hover, ul.menu-left li a:visited:hover, ul.menu-left li.active a {
display:block; padding:0 0 0 25px; height:30px;text-align:left; line-height:30px;
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;
}{/code}Ни строчкой больше, ни строчкой меньше. 

Поверили?

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

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

{code lang:css lines:true hidden:false}ul.menu-left li a, ul.menu-left li a:visited {
/*** Стили для неактивного пункта ***/
}
ul.menu-left li a:hover, ul.menu-left li a:visited:hover {
/*** Стили при наведении курсора ***/
}
ul.menu-left li.active a {
/*** Стили для активного пункта ***/
}{/code}Собственно, это и подразумевал разработчик, но посчитал лишним заморачиваться над придумыванием отличающейся стилизации и тупо скопировал. Я его понимаю в этом плане :) Вообще, здесь вы можете играться со стилизацией меню как хотите. Можете так же добавить правило 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. Удаляем рыбу 

{code lang:html4strict lines:true hidden:false} <div class="title"><img src="http://joomla-show.ru/images/lates_products_title.gif" alt="" /></div>
<div class="product_box"> <img src="http://joomla-show.ru/images/p1.gif" alt="" class="prod_image" />
<div class="product_details">
<div class="prod_title">Banded Red Polka Bikini.</div>
<p> This cute red and white polka dotted bikini features a banded halter top and matching bottom with tie sides. </p>
<p class="price">Price: <span class="price">82.90 $</span></p>
<a href="http://joomla-show.ru/details.html" class="details"><img src="http://joomla-show.ru/images/details.gif" alt="" border="0" /></a> </div>
</div>
<div class="product_box"> <img src="http://joomla-show.ru/images/p2.gif" alt="" class="prod_image" />
<div class="product_details">
<div class="prod_title">Banded Red Polka Bikini.</div>
<p> This cute red and white polka dotted bikini features a banded halter top and matching bottom with tie sides. </p>
<p class="price">Price: <span class="price">33.90 $</span></p>
<p class="price">&nbsp;</p>
<a href="http://www.free-css.com/" class="details"><img src="http://joomla-show.ru/images/details.gif" alt="" border="0" /></a> </div>
 </div>{/code}И вместо нее вставляем

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

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

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

{code lang:html4strict lines:true hidden:false}<div class="title"><img src="http://joomla-show.ru/images/shop_title.gif" alt="" /></div>
<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>
<a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/sp1.gif" alt="" class="sp" border="0" /></a> <a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/sp2.gif" alt="" class="sp" border="0" /></a> <a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/sp3.gif" alt="" class="sp" border="0" /> </a>
 <div class="title"><img src="http://joomla-show.ru/images/center_divider.gif" alt="" /></div>{/code}И вместо нее вставляем команду для вывода контента:

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

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

{code lang:html4strict lines:true hidden:false}<div class="title"><img src="http://joomla-show.ru/images/gift_title.gif" alt="" /></div>
<a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/gift1.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/gift2.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/gift3.gif" alt="" class="gift" /></a> <a href="http://www.free-css.com/"><img src="http://joomla-show.ru/images/gift4.gif" alt="" class="gift" /></a>
<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>
 </div>{/code}Вставляем

 {code lang:html4strict lines:false hidden:false}<jdoc:include type="modules" name="bottom" style="xhtml" />{/code}То есть, должно быть так:

{code lang:html4strict lines:true hidden:false}<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" style="xhtml" />{/code}

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

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

{code lang:xml lines:false hidden:false}<?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>{/code}Давайте в первую очередь из папки images удалим все рыбные картинки, которые нам в шаблоне не пригодятся. Теперь пора перейти к составлению файла:

{code lang:xml lines:false hidden:false}<?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>{/code}

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

Теперь, когда вы разобрались со скринами, архивируйте все файлы в 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. Заключение.

 

]]>
artyom-vikt@yandex.ru (Артем) Верстка под Джумлу Thu, 02 Feb 2012 03:50:21 +0400
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Важные особенности шаблонов Joomla. http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/33-kak-sdelat-shablon-dlya-joomla-16-17-25-vazhnyie-osobennosti-shablonov-joomla http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/33-kak-sdelat-shablon-dlya-joomla-16-17-25-vazhnyie-osobennosti-shablonov-joomla

Теперь, когда вы морально подготовились к созданию шаблона, прошли курсы верстки или научились cамостоятельно, не важно, будем делать ручками подобный магазин женского белья (макет не мой, но я скачал не джумловский шаблон, а простой бесплатный html-макет, поскольку нет времени и желания рисовать и верстать оформление с нуля):

У нас должен получиться работающий интернет-магазин с очень похожим дизайном. Но прежде, чем переходить к практике, проведу небольшой экскурс в теорию создания шаблонов для Жумлы. Не переживайте, букв там не настолько много, чтобы забить на этот пост и перейти к следующему. Лучше прочтите его.

Предупрежу сразу, дизайн не кроссбраузерный. Поскольку макет не мой и переделывать ошибки у меня нет времени, оставляю все как есть. У меня он правильно отображается в Мозиле и Хроме. В Опере пропадает шапка. Но для нас это не важно, поскольку основная наша задача — научиться делать уникальные сайты на джумле, а не искать баги пиндосских верстальщиков.

Как и в любом сайте, сначала нам нужно определиться с его структурой. Какие будут разделы, виды менюшек, сетки страниц, и так далее. Но в этом посте я опущу эту тему и начну с главного. Первое, что нам нужно сделать — сверстать макет страниц, который мы и будем «натягивать» на джумлу в самых простых html и css-файлах. 

Скачайте учебный макет перейдя по этой ссылке.

После скачивания макета, нам необходимо обратить внимание не только на его внешний вид, но еще и на вписанные метатеги. В Джумле есть стандартный набор классов относящихся к com_content (а еще для Виртуемарта, K2 и т. д.), которые несложно поменять, но, тем не мемнее, я не вижу в этом абсолютно никакого смысла. Чтобы не «делать себе мозги» при каждом создании нового шаблона, гораздо проще и быстрее в каждый новый шаблон прописывать стандартные джумловские классы и айдишники. Это одна из особенностей верстки под джумлу. В процессе ознакомления с этой и последующими статьями, вы поймете почему и в чем их преимущества. В предоставленном макете классы и id-шники отличаются от нужным, мы будем поэтапно их переделывать.

Для того, чтобы найти эти классы и прояснить ситуацию, установите Joomla 1.7 в стандартной комплектации (напомню, в апреле 2012-го года Joomla 1.5, 1.6, 1.7 уходят на пенсию, а вместо них вступает в должность Джумла 2.5, но бояться этого не стоит, поскольку статья актуальна для версий 1.6, 1.7, 2.5 нашей любимой CMS).

Раз и навсегда нам нужно запомнить структуру файлов и папок любого джумловского шаблона:

 

На скриншоте выделены наиболее важные файлы и папки, которые нам пригодятся стопроцентно. Остальные для среднестатистического интернет-магазина просто ни к чему. Крупные проекты — другое дело, но мы только учимся, о крупных не может быть и речи. Объясню что к чему.

  • В папке CSS хранятся все файлы стилей, которые будут доступны для редактирования из админки сайта. Если один из css-файлов находится за пределами папки CSS, его просто не будет видно из админки. В этом случае вам нужно будет самим выкручиваться.
  • favicon.ico. Его можно расположить в корне сайта и браузер сам будет находить, можно расположить в корневой папке шаблона и прописать путь к нему. Второй вариант приемлем для тех сайтов, у которых несколько шаблонов для разных страниц или возможность смены шаблона пользователем. Тогда для разных шаблонов будут показаны совершенно разные фавиконки.
  • Папка images, как вы поняли, содержит графические элементы шаблона — такие, как фоны, градиенты, уголки, тени (если, конечно, вы не делаете сайт на CSS3), логотип, возможно, копирайты, баннеры... Словом, все те картинки, которые не нужно постоянно менять и лучше уберечь от случайного удаления.
  • Самый интересный файл — index.php, в котором и прописано все-все-все оформление. По сути, это никакой не пхп. Это скорее html-файл с вкраплениями пхп-команд. Не более того. Ну, его структуру я сейчас объяснять не буду, оставлю это для практики.
  • js — папка с java-скриптами. Никакой особенной роли она не играет, скрипт вы можете засунуть хоть коню в жопу, главное ссылку на него поставьте, все будет работать. Здесь эта папка играет скорее эстетическую роль. Ну, и еще помогает структурировать тот бардак, который получается у начинающих верстальщиков под джумлу. 
  • template_preview.png и template_thumbnail.png сами по себе большое и маленькое изображение сгенерированного в html внешнего вида шаблона. Другими словами скриншот сайта и миниатюра. Они имеют некоторые пороговые значения величины. Оптимальные размеры для template_preview.png — 640х390, а для template_thumbnail.png — 205х150.
  • И второй по важности файл — templateDetails.xml. Он имеет строгую структуру, без него не удастся установить шаблон, а если заполнить его с ошибками, можно напартачить. Из того, что нам предстоит заполнить при создании учебного шаблона: название и копирайты, файловая структура шаблона, перечень позиций для модулей. На этом в данном курсе остановимся.

 Итак, подведем итоги статьи. Создать шаблон для Джумлы совсем несложно. Для этого требуется лишь знать верстку HTML-CSS и несколько важных, но простых и понятных нюансов, которые нужно учесть при разработке шаблона под нашу любимую систему управления сайтом. Продолжение следует.

Содержание курса:

  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. Заключение.
]]>
artyom-vikt@yandex.ru (Артем) Верстка под Джумлу Fri, 27 Jan 2012 00:57:33 +0400
Как сделать шаблон для Joomla 1.6, 1.7, 2.5. Введение. http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/32-kak-sdelat-shablon-dlya-joomla-17-vvedenie http://joomla-show.ru/verstak/verstka-pod-dzhumlu/item/32-kak-sdelat-shablon-dlya-joomla-17-vvedenie

Необходимость создавать свои шаблоны для Джумлы приходит с творческим возрастом. Когда начинающий фрилансер вырастает в полноценного фрилансера. Когда ему надоедает браться за сайты по 2000 рублей, основанные на бесплатных или варезных (и в крайне редких случаях купленных) шаблонах, мучаться с пожеланиями заказчика, зачастую разругиваясь с ним в последствии из-за того, что шаблон не позволяет (...) или тот случайно наткнулся на пару-тройку сайтов с очень похожим дизайном, а может быть, из-за того, что сайт нихера не поднимается в Яндексе. Когда надоедают тормоза Джумлы и громоздкий, увесистый код, тормозящий раскрутку. Да и просто тормозящий. А как обидно через месяц открыть сайт, который сделал и увидеть там совсем другой дизайн с чужим копирайтом. Кто-то начинает крыть всеми неприличными Джумлу и говорить, что это полная хуйня, так и не разобравшись, что тупость ее происходит вовсе не от плохих разработчиков, а от кривых рук фрилансера и неумения верстать под Джумлу.

В этой серии постов я не буду учить вас основам HTML, не буду раскрывать секретов CSS или XHTML, я только научу вас правильно создавать шаблоны для Joomla 1.6 — 2.5. Не универсальные на продажу с кучей тем, а те, которые мы делаем в повседневной жизни. Для одного сайта, с одной конкретной темой оформления. Я считаю, что все эти гибко настраиваемые и универсальные шаблоны — для халявщиков, ведь каждый сайт должен быть уникальным, соответственно, под каждый новый сайт должен создаваться отдельный уникальный шаблон с уникальной и единственной темой оформления. Поэтому знания HTML и CSS, хотя-бы  базовые, у вас должны быть. Если их нет, прошу прощения, порекомендую вам не засирать себе мозги, а сначала пройти курс верстки или продолжать качать варезные/бесплатные шаблоны и получать копейки за свою работу.

Итак, наша цель — создать полноценный сайт с онлайн-магазином Virtuemart и блогом на K2 с учетом всех нюансов не используя специальные шаблоны для Джумлы. Я буду делать сайт на своем виртуальном сервере, параллельно записывая все свои действия. Поскольку свободного времени у меня не очень много, посты будут писаться медленно, я не буду повторяться, если что-то уже есть в блоге. Просто поставлю ссылку на другой пост. Если будут нужны дополнительные файлы, я их обязательно выложу и проставлю ссылку. А в завершающем посте выложу установочный архив сайта для более подробного изучения.

План уроков:

  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. Заключение.
]]>
artyom-vikt@yandex.ru (Артем) Верстка под Джумлу Mon, 26 Dec 2011 23:47:03 +0400