Как написать шаблон для joomla 2.5

imagesКак написать шаблон для joomla 2.5

   И так, рано или поздно поработав немного с сайтом, будь он на joomla или другой CMS многие задаются таким вопросом. Как можно самому создать свой собственный шаблон для сайта.

  В интернете, конечно же, есть куча разных бесплатных или платных шаблонов и конечно же есть довольно хорошие шаблоны, созданные профессионалами. Но руки все равно чешутся создать что - то индивидуальное и оригинальное.
  В этой статье я расскажу, как сверстать простой шаблон для сайта и создать из этого шаблона, шаблон который будет работать с CMS joomla.
  Я не буду здесь отделять верстку от создания шаблона. Просто напишу, где заканчивается верстка, а где мы начинаем переделывать наш простой html шаблон, в шаблон для joomla.
 

 

  И так для начала мы сверстаем простой шаблон в html формате. Здесь я не буду верстать красивый шаблон, а сделаем самый простой резиновый шаблон и подключим к этому шаблону CSS стили и Jvascript. Для начала создадим все основные папки, которые нам нужны будут для создания шаблона.

images

 

  Так как я уже писал раньше, я не стал делить создание шаблона на верстку и на переделку в шаблон, поэтому я создал сразу все папки, которые нам понадобятся при создании шаблона. На первом этапе нам понадобится папка CSS – в которой будут лежать наши файлы, со стилями для шаблона. Папка images – в которой будут хранится картинки, для шаблона, в папке js – будут находится файлы и библиотеки javascript. Ну а папка images нам уже понадобится при создании самого шаблона, в этой папке будут хранится все картинки которые используются в шаблоне.
  Теперь нам нужно добавить в эти папки основные файлы, такие как index.html и template.css. Файл template.css это основной файл со стилями для шаблона joomla пока его можно конечно же и по другому назвать, но я решил, что так будет проще и не нужно потом его переименовывать и менять пути в названиях. Так же я сразу размещаю файлы в те папки, в которых они должны находиться при создании шаблона. Это так же в дальнейшем нам поможет в том, что не нужно будет переписывать все пути к картинкам в стилях и в самом коде шаблона.
  Все эти файлы можно, конечно писать и вручную, к примеру, в Notepad++ или даже в обычном блокноте, но я пользуюсь программой Dreamweaver, это очень упрощает написание кода. Поэтому я буду показывать все именно в этой программе.
И так создаем два файла template.css и index.html. Файл template.css помещаем сразу в папку CSS, а файл index.html размещаем в корневой папке нашего шаблона. Так же добавим сразу файлы javascript, в папку js. Скажу сразу, что без этих файлов скрипта можно и обойтись.
  Просто используя стили CSS но при помощи этого скрипта, который написан в файле equalHeight.js и библиотеки jquery мы заставим наш шаблон работать так как нам нужно. А именно боковые колонки шаблона и блок основного контента, будет всегда динамически разворачиваться на ту высоту, на которую растягивается один из этих блоков. В зависимости от загружаемого в него содержимого.
  В общем, об этом дальше, а пока создаем два основных файла. Я думаю, что если вы собрались создавать шаблоны для сайта. То рассказывать как их создать в программе Dreamweaver вам не нужно так как с основами вы уже знакомы.
 

images

 

И добавляем наши файлы с скриптом.
Теперь у нас должна получиться вот такая конструкция.
 

images

 

  Это два файла, которые мы создали (template.css и файл index.html) и файлы скрипта (equalHeight.js сам скрипт и файл библиотеки jquery.js) которые мы добавили в папку js. Файлы скрипта вы можете скачать здесь.
  Теперь нам остается только прописать основной код для файла index.html, который я написал ниже.
(Просто добавьте приведенный ниже код между тегами <body> и </body>)
 

<div id="wrapper">
     <div id="header">Шапка сайта</div>
        <div id="allcontainer">
            <div id="sidebar_L">
             <div id="sidebar_La">Левая колонка</div>
            </div>
            <div id="sidebar_R">
             <div id="sidebar_Ra">Правая колонка</div>
            </div>
         <div id="container">
             <div id="content">Основной контент</div>
            </div>
        </div>
        <div id="clear"></div>
    </div>
    <div id="footer">Подвал сайта</div>

 

Так же между тегами <head> и </head> подключим наши стили CSS и файлы скриптов к нашему шаблону.

<link href="css/template.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/equalHeight.js" type="text/javascript"></script>

 

Теперь открываем наш файл template.css и пишем в этот файл стили для нашего шаблона.

@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 text-decoration:none;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 font-weight: bold;
}

html{
 height:100%;
 }

body{
 height:100%;
 margin:0 auto;
 min-width:1100px;
 max-width:1900px;
 background-color:#666;
 }
/*-----#wrapper----------*/
#wrapper{
 min-height:100%;
 width:94%;
 margin:0 auto;
 }
/*-----------#header---------------*/
#header{
 width:100%;
 height:200px;
 margin:0 auto;
 background-color:#0F0;
 }
/*-------#allcontainer------------*/
#allcontainer{
 width:100%;
 }
/*--------#container-------------*/
#container{
 width:100%;
 background-color:#FFF;
 }
/*--------#sidebar_L----------------*/
#sidebar_L{
 width:250px;
 float:left;
 background-color:#09F;
 }
/*-------#sidebar_R--------------*/
#sidebar_R{
 width:250px;
 height:200px;
 float:right;
 background-color:#F90;
 }
/*--------#clear----------------*/
#clear{
 height:50px;
 width:100%;
 clear:both;
 }
/*--------#footer---------------*/
#footer{
 height:50px;
 width:94%;
 margin-top:-50px;
 margin-left:auto;
 margin-right:auto;
 background-color:#0F0;
 }

 

   Теперь дальше изменяем файл скрипта equalHeight.js, а именно, в строке №17 прописываем id наших блоков, которые должны быть одинаковой высоты.


setEqualHeight($("#sidebar_L,#sidebar_R,#container"));

  В примере шаблона который вы скачаете ничего менять не нужно, он уже написан правильно и будет работать, для этого вам нужно просто разархивировать его и двойным кликом запустить файл index.html
  Но если вы пишете свой скрипт то естественно названия блоков у вас могут быть другие….
  Вот в принципе и все, верстка простейшего резинового шаблона закончена, но это пока еще просто html шаблон и он конечно же с joomla работать не будет. И теперь нам нужно просто этот шаблон переделать под шаблон joomla.


Скачать пример этого шаблона.

 

Следующая

 

Комментарии   

 
# Вова 08.04.2013 19:58
Уважаемый где у тебя XML-файл?
Ответить | Ответить с цитатой | Цитировать
 
 
# Админ. 09.04.2013 08:47
Цитирую Вова:
Уважаемый где у тебя XML-файл?

Я вначале думал стоит ли вообще публиковать такой грубый и тупой комментарий. В тексте этого комментария некоторые слова изменены автоматически, с целью поддержания нормального общения пользователей и Т.Д.
Так вот специально для вас Вова, если у вас в семье такое общение считается нормой и вы общаетесь только на таком тупом диалекте.
То не судите всех по себе. Так же если вы считаете себя умнее остальных, то у вас должна быть хотя бы одна извилина для того, что бы понять, что в этой статье написана только верстка в html.
А само создание шаблона описано в следующих статьях.
И специально для таких как вы, у кого броня в три пальца, есть ссылки в конце каждой статьи, " Следующая / Предыдущая" с помощью которых можно прочитать продолжение....
Этот ответ специально для Вовы к нормальным это не относится....
Ответить | Ответить с цитатой | Цитировать
 
 
# Flamme 10.12.2013 07:51
Подскажите пожалуйста, какое преимущество дает такой метод верстки?

Левая колонка


Правая колонка

Почему просто не сделать?

Левая колонка


Правая колонка


Спасибо за пояснение!
Ответить | Ответить с цитатой | Цитировать
 

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

В комментариях запрещается:
1) Писать оскорбительные выражения в сторону как администратора, модератора так и других пользователей сайта. (За такое нарушение сразу бан)
2) Реклама в любом ее проявлении, а так же рекламные ссылки на свои сайты, партнерские ссылки, для ссылки на свой сайт нужно использовать специальное поле для добавления ссылки.
3) Прежде чем писать комментарий и задавать вопрос обязательно убедитесь, что на ваш вопрос точно нет ответа на сайте. Так же на сайте есть форум, где вы можете задавать вопросы другим участникам этого форума...
ВНИМАНИЕ: ПРАВИЛА МОГУТ ДОПОЛНЯТЬСЯ И ИСПРАВЛЯТЬСЯ, В ТЕЧЕНИИ ВРЕМЕНИ СУЩЕСТВОВАНИЯ САЙТА БЕЗ ПРЕДУПРЕЖДЕНИЯ. ПОЭТОМУ ЧИТАЙТЕ ИХ ОБЯЗАТЕЛЬНО, ВО ИЗБЕЖАНИЕ НЕДОРАЗУМЕНИЙ.


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

 

 

 

Custom Search

 

 

Читаем так же:

Отправить в FacebookОтправить в Google BookmarksОтправить в TwitterОтправить в LinkedInОтправить в BobrdobrОтправить в LivejournalОтправить в MoymirОтправить в OdnoklassnikiОтправить в VkcomОтправить в Yaru