Created jtemplate joomla templates

В первой статье о создании шаблона для Joomla3 с нуля мы подготовили необходимые файлы и каталоги. Осталось самое интересное - верстка непосредственно шаблона и создание каскадных таблиц стилей.

Откроем созданный ранее файл index.php и создадим его структуру. Первая часть кода PHP заголовка предназначена для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.

<?php
defined('_JEXEC') or die;
?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>

</body>
</html>

 Между тегами <header> добавляем:

- мета тег viewportиспользуется для установки ширины и начального масштаба для окна просмотра на мобильных устройствах;

- мета данные Joomla;

- таблицы стилей Bootstrap;

- таблицы стилей шаблона

В итоге получаем:

<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.css" media="screen" />
</head>

 

 Переходим непосредственно к шаблону. Подробнее о разметки страницы с помощью Bootstrap можно посмотреть на официальном сайте.

Сделаем разметку для каждого блока в соответствии с макетов из первой статьи.

1. header - шапка шаблона. Класс container-fluid задает ширину 100%, стили для  класса header будут прописаны в файле шаблона style.css. Конструкция < jdoc:include> добавляет позицию для вывода модулей ( в данном случает здесь будут выводиться все модули в позиции header)

 

<div class="container-fluid header">
  <div class="row">
    <div class="col-sm-12">
    <jdoc:include type="modules" name="header" style="xhtml" />
    </div>
  </div>
</div>

2. Второй блок шаблона согласно макету состоит из трех столбцов. Ширина блока будет фиксированной, поэтому добавим класс container. Его максимальная ширина будет составлять 1170px и адаптироваться под размеры экрана в соответствии с таблицами стилей Bootstrap. Как и в первом случае добавим дополнительный класс blocks.

<div class="container blocks">
  <div class="row">
    <div class="col-sm-4">
      <div class="inner">Блок1</div>
    </div>
    <div class="col-sm-4">
      <div class="inner">Блок2</div>
    </div>
    <div class="col-sm-4">
      <div class="inner">Блок3</div>
    </div>
  </div>
</div>

3. Блок шаблона, в котором будут выводится компоненты  и сообщения Joomla. Разметка аналогична.

<div class="container main">
  <div class="row">
    <div class="col-sm-12">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </div>
  </div>
</div>

4. Блок с позицией модуля position-1. Аналогично первому блоку делаем во всю ширину страницы, выводим модули в позиции position-1.

<div class="container-fluid position1">
  <div class="row">
    <div class="col-sm-12">
    <jdoc:include type="modules" name="position-1" style="xhtml" />
     </div>
  </div>
</div>

5. И последний блок для базового шаблона - footer.

<footer>
  <div class="container-fluid">
     <jdoc:include type="modules" name="footer" style="xhtml" />
  </div>
</footer>

На этом верстка простого шаблона с использованием Bootstrap закончена, осталось добавить стили в созданный ранее файл style.css.

body {
font-size: 18px;
line-height: 1.42857143;
color: #333;
font-family:"Times New Roman",Georgia,Serif;
}
.header{
background:#1f5587;
height:50px;
color:#fff;
}
.blocks{
margin-top:30px;
}
.blocks .inner{
background: #add19a;
height:220px;
text-align: center;
margin-bottom: 15px;
}
.main{
margin-bottom:30px;
}
.position1{
background:#b6a48b;
height:300px;
}
footer{
background:#443f3d;
height:50px;
color:#fff;
}

Для установки на сайт необходимо все файлы добавить в архив с расширением ZIP и установить через менеджер расширений.

скачать

Click to refresh