X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Как самостоятельно создать шаблон joomla. Создание темы для джумлы своими руками
Алерт
Алерт
Topic Starter сообщение 25.10.2012, 5:36; Ответить: Алерт
Сообщение #1


ПРОЛОГ

Приветули. Моё имя – Кристина и я хочу поделится знаниями, как создавать шаблоны для Joomla собственными ручками, и в тоже время не затрачивая большое количество времени. Я постараюсь наглядно создать простенький шаблон и пояснить детально основные моменты, основываясь на собственном опыте разработке.

Вообще советую скачивать пустые готовые шаблоны и в последствии разукрашивать их как душе угодно, зачем изобретать колесо, когда оно уже давно есть. Но для тех, кто с Joomlой знаком совсем малость, советую один раз проделать это самостоятельно, что бы разобраться и быть объективным в решении возникших более сложных проблем в дальнейшем. Ну что ж..не будем катать вату, и начнём…


НАЧАЛО


Думаю тот, кто решил, создать шаблон для Joomla, знаком с ней хотя бы каплю, так что не стану рассказывать, что это за чудо-зверь эта Joomla и на что она способна (можно обновить свои знания и прочесть в вике об этом ещё разок http://ru.wikipedia.org/wiki/Joomla), от себя лишь добавлю, меня Joomla притягивает тем, что для неё существует большое количество халявных модулей, плагинов, шаблонов и прочих плюшечек и постоянные обновления, но отталкивает тем, что в продвижении не весьма хороша.

Задача: Реализовать простой шаблон для Joomla. Темой которого будет «Автобиография», мы создам простой шаблон –визитку.
На примере я реализую фиксированный шаблон.
Я набросала схематично, как будут располагаться основные блоки шаблона:

[img]http://s1.ipicture.ru/uploads/20121025/3GFpO0m1.jpg[/img]


Инструменты для реализации (которыми при разработки удобно использовать мне):
  1. Виртуальный сервер Denwer
  2. Dreamweaver (редактор, которым мне удобен, для написания кода)
  3. Браузер Opera (просматривать сайт и инспектировать элементы, некоторые предпочитают для этого использовать firefox Mozilla, но я предпочитаю, пользоваться Operой)
  4. Photoshop
  5. Пакет Joomla, я буду использовать версию 2.5.4


Подготовка:
  1. Устанавливаем пакет Denwer (http://www.denwer.ru/base.html) или любой другой удобный для вас виртуальный сервер, если вы вообще хотите работать на локалке.
  2. Создаём папочку на нашем виртуальном сервере, куда в последствии разархивируем Joomlу, я использую Denwer, и путь у меня такой Z:homelocalhostwwwназвание папки.
  3. Скачиваем Joomla, если в этом есть необходимость (http://joomlaportal.ru/) и разархивируем её в нашу папочку, которую мы создали на виртуальном сервере.
  4. Нажимаем «Strart Denwer» на рабочем столе и в браузере в адресной строке набираем http://localhost/ название папки / и приступаем к установке Joomla (как установить с лёгкостью можно прочесть в интернете).


СТАНДАРТНАЯ КОНСТРУКЦИЯ ШАБЛОНА



[indent=1]Итак, приступаем к самому вкусному. Заходим в папочку нашего проекта, где уже разархевирована Joomla и открываем папочку templates (тут хранятся все шаблоны Joomla), в ней мы уже видим: лежат снаднартные шабюлоны для Joomla.[/indent]

[img]http://s1.ipicture.ru/uploads/20121025/l7h62GOV.jpg[/img]

Создаём свою папочку и называем её, так как хотим назвать наш будущий шаблон. На примере, я назвала её «myshablon». При этом мы знаем, что названия чувствительны к регистру и в них не должно быть пробелов.

[img]http://s1.ipicture.ru/uploads/20121025/S4wT24Nq.jpg[/img]


В состав нашего шаблона мы должны создать обязательные два файла, templateDetails.xml и index.php, которые используются ядром Joomla.





[indent=1] templateDetails.xml - описывает шаблон в XML формате. Он действует как декларация, которая описывает все файлы и папки, которые входят в состав шаблона.[/indent]

[indent=1] index.php обеспечивает генерацию страниц.[/indent]

[indent=1]Остальные файлы и папки, являются не обязательными, но мы их всё же создадим:[/indent]

[indent=1] template_thumbnail.png –привьюшка шаблона, т.е миниатюрный снимок шаблона, после установки доступный для просмотра в "Менеджере шаблонов".[/indent]

[indent=1] index.html — защитный файл, ограничивающий доступ с файлам папки.[/indent]

[indent=1] component.php —файл, который отвечает за отображение страницы с печатью.[/indent]
[indent=1] сss – папка, в которой мы будем хранить CSS стили шаблона.[/indent]

[indent=1] Images – папка, которую мы будем использовать, как хранилище для изображений.[/indent]

[indent=1] html — папка, которая будет хранить дубликаты файлов (дубликаты применяются если необходимо изменить стандартное отображение модуля или компонента)[/indent]

[indent=1] javascript — папка, которая будет содержать наши скрипты javascript.[/indent]

[indent=1] favicon.ico — иконка нашего сайта[/indent]

[indent=1]По необходимости мы будем добавлять файлы, и соответственно вносить их названия в templateDetails.xml[/indent]
[indent=1]Вот что у нас собственно находится в папке нашего шаблона «myshablon»:[/indent]

[img]http://s1.ipicture.ru/uploads/20121025/HK8uj2Ot.jpg[/img]

Следующим шагом открываем файл templateDetails.xml он должен содержать метаданные, которые указывают Joomla имя автора, права использования, файлы и различные данные, необходимые для работы шаблона. Информация используется при установке шаблона в систему.
У меня получилось следующим образом:


[xml]<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <!--Подключение Doctype и html с языком: -->
<install version="1.6" type="template"> <!--эта директива является командой для инсталлятора. Опции указывают, что устанавливается шаблон для Joomla версии 2.5 -->
<name>myshablon</name> <!--имя шаблона, дложно называться в точности так же, как и название папки, учтите регистр -->
<creationDate>23 October 2012</creationDate> <!--дата создания -->
<author>Kristina</author> <!--имя автора -->
<authorEmail>kristina_rabota@mail.ru</authorEmail> <!--адрес email автора -->
<authorUrl>http://www.masterwebs.ru/</authorUrl> <!--адрес сайта автора, но я указала адрес нашего дружного сообщества -->
<copyright>Copyright © 2012 Dobrih del masterica Kristina. All rights reserved.</copyright> <!--информация о владельце прав использования шаблона -->
<license>CC</license> <!--вид лицензии на шаблон,я написаоа Creative Commons,что голосит о возможности пользования шаблоном Joomla! при обязательном упоминании авторства создателя шаблона -->
<version>2.5.0</version> <!--номер версии -->
<description>Пробное Создание шаблона</description> <!--описание шаблона -->
<files> <!--в этом блоке указываются файлы и папки, которые будут применяться в шаблоне, на данный момент наш шаблон содержит следующие файлы (Файлы заключены в теги <filename>, а папки <folder>) -->
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<folder>js</folder>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>component.php</filename>
</files>
<positions>
<position></position> <!--в этих тегах, мы в последствии будем описывать все доступные положения в шаблоне. Имена положений должны совпадать с тем, что определяется в файле index.php -->
</positions>
</extension>[/xml]

Теперь открываем файл index.php и тоже вписываем стандартное бла-бла-бла:

[php]<?php
/** Указываем автора шаблона, и лицензию, а так же предатвращаем непосредственный доступ к файлу
* @copyrightCopyright © 2012 Dobrih del masterica Kristina. All rights reserved.
* @Creative Commons
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication(); /* вызов функции, которая позволяет получать и использовать в шаблоне различные параметры*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XML выражения код php echo $this->language; выявляет из Joomlы информацию об используемом на сайте языке и вставляет ее в код шаблона-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" /> <!--вставляет в заголовок страницы развернутую информацию, которая устанавливается в настройках Joomlы -->
<!-- Подключаем стили -->
<link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<!-- Подключаем JS -->
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
<body>

</body>[/php]








СОЗДАНИЕ РАЗМЕТКИ ШАБЛОНА



Стандартная писанина в index.php окончена, теперь приступаем к телу.
Для создания скелета разметки, нам вполне подойдёт сервис http://csstemplater.com/– это неплохой онлайн-генератор html+css, который позволяют быстро сверстать основу для шаблона будущего сайта с использованием "блочной" вёрстки.

[img]http://s1.ipicture.ru/uploads/20121025/4Apw7bT0.jpg[/img]

В блоке DOCTYPE (директива стандарта: без него ваш код и CSS не пройдут проверку валидатором) нам предлагают выбрать один из четырёх вариантов:
  1. XHTML 1.0 Strict – включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.
  2. XHTML 1.0 Transitional - включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены. Разметка должна быть правильно XML оформлена.
  3. HTML 4.01 Strict - включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.
  4. HTML 5

Я выбрала вариант XHTML 1.0 Strict, постараюсь придерживаться этого стандарта и не использовать никаких переходных синтаксисов, писать код извращённым не валидным способом.

В блоке CSS Reset (сброс стилей) я выбрала вариант, с которым я ближе всего знакома, про остальные варианты, вы можете ознакомиться прямо там в справке.

Во всех остальных блоках, думаю разъяснять не нужно. Что касается размеров шапки, футера и правого сайдбара, в последствии мы возможно поменяем размеры уже в самом коде.
Так же выбрала сразу «прижать футер к низу», что бы он не прыгал, когда контент будет менять свою высоту, в зависимости от наполнения.
Далее нажимаем кнопочку «Получить ссылку» затем «Скачать .zip архив» и выбираем куда будет сохранён архивный файл нашего шаблона.
Распаковав архив в папке мы найдём HTML и CSS файлы.

Открываем наш сгенерированный HTML-файл и копируем, то что находиться между тегами <body></body> и вставляем его в index.php в теже теги <body>
Открываем папочку CSS нашего шаблона и для удобства я создам ещё порочку файлов, которые мне в последствии пригодятся:

[img]http://s1.ipicture.ru/uploads/20121025/Hp0osZqE.jpg[/img]

Fonts – в этой папке я буду хранить подключённые к шаблону шрифты;

Файл template будет ответственный у меня за стили всего шаблона;

Файлы layouts и modules за стили модулей и стили различных элементов в шаблоне. Я специально не подключала эти файлы в index.php, что бы показать, как можно подключить их другим образом, открываем template.css и пишем следующее:

@import url(layouts.css);
@import url(modules.css);


Всё, стили подключены.

Открываем наш сгенерированный файл CSS и копируем с него ту часть, которая принадлежит сбросу стилей, а так же общие параметры шаблона, и вставляем в наш файл шаблон template.css

Вот что должно получиться:

@import url(layouts.css);
@import url(modules.css);
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}


Оставшеюся часть кода мы копируем в файл layouts.css

Вот что должно остаться:

#wrapper {
width: 1280px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
height: 200px;
background: #FFE680;
}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
}
#content {
padding: 0 270px 0 0;
}

/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
float: left;
margin-right: -3px;
width: 250px;
margin-left: -250px;
position: relative;
background: #FFACAA;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1280px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
position: relative;
}




УСТАНОВКА ШАБЛОНА



Заходим в панель управления нашего сайта, сейчас на нашем сайте установлен стандартный шаблон Joomla, для того, что бы поменять его на наш шаблон первым делом нужно его найти и установить, для этого переходим
Расширения/менеджер расширений

[img]http://s2.ipicture.ru/uploads/20121025/5GUW11tL.jpg[/img]


Затем нужно попасть во вкладку «Поиск» и нажать кнопочку «Найти»

[img]http://s2.ipicture.ru/uploads/20121025/Kq5J6wVV.jpg[/img]
Начнётся процесс нахождения нашего шаблона, немного пошуршав, joomla нашла наш шаблон, если же выскакивают ошибки при нахождении или не находит вообще ничего, внимательно проверьте файл templateDetails, особенно обратите внимание, совпадает ли название папки шаблона с названием в тегах <name>. Далее проверьте все ли вы указали корневые папки и файлы, и правильные названия к ним, не забываем, что регистр чувствителен.

Далее мы ставим галочку на нашем шаблоне и нажимаем кнопочку «Установить»

[img]http://s2.ipicture.ru/uploads/20121025/Qp6mSAGR.jpg[/img]

После нажатия «Установить», тоже не должно возникнуть никаких ошибок, а появиться надпись «Поиск дистрибутивов выполнен успешно»:

[img]http://s2.ipicture.ru/uploads/20121025/mSbQ2r5b.jpg[/img]

Следующим шагом, мы установим наш шаблон по умолчанию, для этого на панели управления переходим: Расширения/менеджер шаблонов

[img]http://s2.ipicture.ru/uploads/20121025/UnvHjOSf.jpg[/img]



Здесь мы видим, что по умолчанию установлен шаблон Beez_20


[img]http://s2.ipicture.ru/uploads/20121025/i32sqrdG.jpg[/img]



Ставим галочку на наш шаблон и нажимаем кнопочку в форме звёздочки «Установить по умолчанию»


[img]http://s2.ipicture.ru/uploads/20121025/L5Vq5muD.jpg[/img]



Далее мы видим надпись, в синей рамке «Стиль назначен используемым по умолчанию.», и видим, что звёздочка загорелась жёлтым уже над нашем шаблон, эти показатели дают нам понять, что всё прошло успешно.



[img]http://s2.ipicture.ru/uploads/20121025/4s72jWGE.jpg[/img]



Теперь, если мы просмотрим наш сайт на данном этапе, то увидим вот такой вот результат:



[img]http://s2.ipicture.ru/uploads/20121025/1SWSzot3.jpg[/img]




Поздравляю, мы создали скелет шаблона, далее мы навешаем на него мишуры и наш шаблон значительно преобразится.





СТАДИЯ ДИЗАЙНА



Хороший дизайн, весьма весомая крупица разработки, т.к это зависит от посещаемости нашего сайта.
Вот какие правила нужно учитывать при создании дизайна сайта:
  1. Пользователь не должен утомиться (т.е не использовать контрасные цвета в большом количестве);
  2. Нужно учесть к какой тематике относиться ваш сайт и на какую аудиторию пользователей он рассчитан (от этого зависит и подбор цветовой гаммы, будет он строгим либо нет)
  3. Правило трёх либо четырёх правильно подобранных цветов на сайте никогда не подведёт.
  4. Расположение элементов сайта, должно быть юзабельным
  5. Буквы должны быть читабельными (Размер и цвет особенно важны)

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


Сейчас мы определим цветовую гамму нашего шаблона.
В правильной подборке цветовой гаммы для сайтов существует множество серверов, я предпочитаю использовать http://colory.ru там вы найдёте множество настроек, просмотреть как будет выглядеть сайт в выбранных вами цветах на примере и даже сможете экспортировать цвета в HTML документ.
Переходим на этом сайте во вкладку Генератор цветовых схем 2
Я подобрала 3 цвета, которые мне больше всего приглянулись для моего шаблона, буду использовать по большей части мягкие, добавочные цвета :


[img]http://s2.ipicture.ru/uploads/20121025/6RV6u3CS.jpg[/img]



ПРОРИСОВКА ЭЛЕМЕНТОВ




Шапку сайта я увеличила до 215px и хочу добавить градиент из мягких цветов.

Открываем Photoshop и в панели управления нажимаем Файл/Создать либо CTRL+N, открывается окно в котором мы выбираем следующие параметры (высоту и ширину, шапки нашего сайта и фон прозрачный):



[img]http://s2.ipicture.ru/uploads/20121025/1q91XLo4.jpg[/img]

Появилось полотно с прозрачным фоном, далее нам нужен инструмент «Градиент»:

[img]http://s2.ipicture.ru/uploads/20121025/eQU1sj31.jpg[/img]

Затем необходимо задать цвета градиенту, для этого щёлкаем дважды на нижний квадратик, и задаём ему необходимый цвет.

[img]http://s2.ipicture.ru/uploads/20121025/Oa1Oc4mc.jpg[/img]

Видим, какой на данном этапе у нас получится градиент:

[img]http://s2.ipicture.ru/uploads/20121025/SDv7ZUvA.jpg[/img]



Можно задать градиенту второй цвет, но меня устраивает этот. На своём созданном документе, я просто беру и растягиваю градиент снизу вверх, придерживая «Shift», что бы градиент получился ровный, и оттягиваю его повыше, что бы он получился более темнее (желтее).


[img]http://s2.ipicture.ru/uploads/20121025/L0r3k7AP.jpg[/img]

Вот что у нас вышло:

[img]http://s2.ipicture.ru/uploads/20121025/D30VhtZw.jpg[/img]

Скучновато. Сейчас я проведу линию, которая будет в последствии пересекаться с моим логотипом.
В панели выбираем инструмент «Линия»:

[img]http://s2.ipicture.ru/uploads/20121025/6mxrEdoF.jpg[/img]

Выбираем цвет и толщину линии:

[img]http://s2.ipicture.ru/uploads/20121025/x038CtVo.jpg[/img]
И проводим линию чуть ниже середины, придерживая «Shift», что бы она получилось ровной. Вот что у нас получилось:

[img]http://s2.ipicture.ru/uploads/20121025/QVS2NkKY.jpg[/img]

Сделаем нашу шапку ещё повеселее и добавим в правое место девушку. Я нашла картинку в png формате, которую я просто вставлю перетягивая слой девушки в наш документ.

Вот что у нас получилось:

[img]http://s2.ipicture.ru/uploads/20121025/yUCyF66W.jpg[/img]

Сохраняем нашу шапочку Файл/сохранить для web устройств в открывшемся окне, выбираем формат JPEG и нажимаем кнопку сохранить и указываем путь нашего шаблона в папку images, я назвала наше изображение header:

[img]http://s2.ipicture.ru/uploads/20121025/AFqRi1Hb.jpg[/img]


Теперь нужно открыть наш файл стилей layouts.css и задать нашей шапке шаблона, созданную только что нами картинку:


#header {
height: 215px;
background-image: url(../images/12-header.jpg);
}



Заодно уберём в index.php не нужные нам текста c подвала и шапки. И вот что у нас получилось:


[img]http://s2.ipicture.ru/uploads/20121025/6JFslVsM.jpg[/img]


Для футера я сделаю идентичный градиент, только создам документ с высотой 100px и шириной 5px, это изображения я просто продублирую по горизонтали. Вот такой код должен получиться для нашего подвала:

#footer {
width: 1280px;
margin: -100px auto 0;
height: 100px;
position: relative;
background-image: url(../images/footer.jpg);
background-repeat:repeat-x; /* дублируем картину по горизонтали*/
}



Вот что мы имеем на данном этапе:

[img]http://s2.ipicture.ru/uploads/20121025/jmrAhUcm.jpg[/img]


СОЗДАНИЕ ЛОГОТИПА



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

Открываем файл index.php и создаём ещё один блок в шапке, к которому присваиваем класс «logo» внутри него в тегах <p> пишем название нашего сайта. Для того, что бы наш логотип был кликабельным, замыкаем блок «logo»в теги <a>

<div id="header">
<a href=""><div id="logo"><p>  Кристина - добрых дел мастерица </p></div></a>
</div><!-- #header-->



Теперь нам нужно найти красивый нестандартный шрифт, который будет подходить нашему сайту

Для таких дел я пользуюсь сайтом http://www.xfont.ru/ где и выбрала шрифт «PFScandalPro-Black». Его я сохранила в папке cssfonts нашего шаблона.

Теперь его нужно подключить. Открываем стили нашего шаблона layouts.css и пишем следующее:

@font-face {
font-family: PFScandalPro-Black;
src: url(fonts/PFScandalPro-Black.ttf) format("opentype");
}


Таким образом мы указали к какому семейству принадлежит наш шрифт и путь его нахождения.
Теперь нашему блоку «Logo», мы задаём следующие стили, цвет шрифта я указала, такой же какой мы подобрали и линии в шапке:


.logo {
font-family:PFScandalPro-Black; /* Семейство нашего подключённого шрифта*/
color: #806c3a; /* Цвет шрифта*/
font-size:36px; /* Размер шрифта*/
padding-top: 95px; /* Отступ сверху*/
padding-left: 15px;  /* Отступ от левого края*/
}




В итоге вот, что у нас получилось:

[img]http://s2.ipicture.ru/uploads/20121025/ZIh771Lu.jpg[/img]




СОДАНИЕ МОДУЛЯ МЕНЮ




Приступим к созданию меню. Которое мы создам в шапке нашего сайта.

Открываем index.php и в шапке, после блока логотипа создаём ещё один блок с классом «topmenu», а внутри него создаём строчку кода, которая отвечает за название позиции. Это нужно для того, что бы отобразить наше меню на сайте.


Имя позиции name="topmenu", задавайте понятным, что бы не запутаться в последсвии, когда у вас будет много позиций.

Стиль позиции я выбрала, который задаётся Joomlой style="xhtml", вы можете создавать свои стили.

<div class="topmenu">
            <jdoc:include type="modules" name="topmenu" style="xhtml" />
      </div>



Теперь нам нужно создать несколько пунктов меню, и материалы к ним. Начнём с материалов. В панели управления заходим на Материалы/Менеджер материалов:

[img]http://s1.ipicture.ru/uploads/20121025/VX35CKDN.jpg[/img]


Нажимаем кнопку «Создать» и заполняем все необходимые поля, после чего нажимаем кнопку «Сохранить и закрыть»

[img]http://s1.ipicture.ru/uploads/20121025/c99D3DS5.jpg[/img]

Аналогично создаём остальные материалы. Для примера у меня будет пять пунктов меню, поэтому я создала пять материалов «Главная», «Обо мне», «Фотогалерея», «Интересности» и «Контакты».

Далее создаём пункты меню, переходим на Меню/Main menu

[img]http://s1.ipicture.ru/uploads/20121025/Me5FblTp.jpg[/img]

Здесь уже есть один пункт меню «Home», мы его просто переименуем в «Главная», укажем, что он является материалом и выберем наш материал.

[img]http://s1.ipicture.ru/uploads/20121025/OSo3IOyV.jpg[/img]

Остальные пункты меню мы создаём и подключаем к ним соответствующие материалы.

Теперь мы заходим в Расширения/Менеджер модулей

[img]http://s1.ipicture.ru/uploads/20121025/Fg18smRu.jpg[/img]

Здесь у нас уже есть модуль меню, не станем создавать новый, а используем его:

[img]http://s1.ipicture.ru/uploads/20121025/uUDxT3Fr.jpg[/img]

Я решила его переименовать как «Верхнее меню», также скрываем заголовок меню, выбираем соответствующую позицию нашего шаблона «topmenu», привязываем модуль ко всем страницам нашего сайта, и выбираем наше меню «Main Menu»

[img]http://s1.ipicture.ru/uploads/20121025/SBaeRe2m.jpg[/img]


Вот что у нас должно получиться на данном этапе:

[img]http://s1.ipicture.ru/uploads/20121025/Xf76ISQz.jpg[/img]

Наше меню нужно сделать горизонтальным и более симпатичным, открываем файл с нашими стилями layouts.css и задаём классу «topmenu» расположения нашего модуля меню

.topmenu { padding-left: 130px; padding-top: 40px;}

Затем с помощью браузера «Опера» мы проинспектируем элемент меню и найдём класс, которому мы зададим свои стили.

[img]http://s1.ipicture.ru/uploads/20121025/656tU2RJ.jpg[/img]

Открываем файл modules.css и задаём стили нашего меню, я задала такие:

.moduletable_menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 18px;
line-height: 30px;
font-weight: bold; /* Жирность текста */
}
.moduletable_menu li{
float: left; /* Сделали горизонтальным */

}
.moduletable_menu a{
color:#000000;
height: 30px;
width: 150px;
padding-top: 0px;
padding-right: 35px; /* Отступ справа пунктов меню друг от друга*/
padding-bottom: 0px;
padding-left: 5px;
}
.moduletable_menu a:hover{
color: #806c3a; /* Цвет ссылки при наведении*/
}



Вот какое меню получилось:

[img]http://s1.ipicture.ru/uploads/20121025/52pRFUyc.jpg[/img]



ОФОРМЛЕНИЕ КОНТЕНТА




Мы видим, что на нашем сайте, не отображаются наши материалы, сейчас мы это исправим.


Открываем index.php и внутри блока контента вставляем две строчки

<div id="content">
     <jdoc:include type="message" /> <!-- при необходимости вывод сообщений-->
     <jdoc:include type="component" /> <!-- вывод материала-->
</div><!-- #content-->



И зададим стили в файле layouts.css:


#content {
   padding: 20px 270px 10px 30px;
}
#content h1,h2,h3,h4 {
   color: #806c3a;
   padding-bottom: 30px;
}




Так же я в общем шаблоне template.css, задала другой цвет ссылок и убрала подчёркивание:


a {
color: #806c3a;
outline: none;
text-decoration: none;
}




Что бы у вас не отображались иконки печати, имя автора и т.п в материале, заходим в Менеджер материалов нажимаем кнопочку «Настройки» и скрываем, то что нам не нужно, я скрыла практически всё.



ПОДВАЛ. Создание нижнего колонтитула.



В подвале мы разместим нижний колонтитул, куда поместим текст с авторскими правами, можно было авторские права сделать другими способами, но на примере я покажу как сделать этим, для этого в index.php в footer добавим ещё одну позицию для модуля и назовём её «footer»:

<div id="footer">
    <jdoc:include type="modules" name="footer" style="xhtml" />
</div><!-- #footer -->


Теперь в панели администратора заходим в Менеджер модулей и нажимаем кнопочку «Создать» и выбираем «Нижний колонтитул

[img]http://s2.ipicture.ru/uploads/20121025/vI20FS55.jpg[/img]

В стилях футера я добавила две строчки, для того, чтобы отцентрировать нижний колонтитул:

line-height: 30px;
text-align: center;


Вот такой у нас получается сайт на данном этапе:

[img]http://s2.ipicture.ru/uploads/20121025/0WI5C1mw.jpg[/img]




ПРАВЫЙ БЛОК. Создание модуля поиска.



Аналогичным образом создадим в правом сайдбаре, позицию для модуля поиска и назовём её «search»

<div class="sidebar" id="sideRight">
       <jdoc:include type="modules" name="search" style="xhtml" />
</div><!-- .sidebar#sideRight -->



В панели управления переходим в Менеджер меню и нажимаем кнопочку «Создать», выбираем «Поиск»:

[img]http://s2.ipicture.ru/uploads/20121025/fme7wqSn.jpg[/img]


В открывшемся окошке заполняем необходимые поля, заголовок сайта я установила, что бы отображался, задаём позицию «Search», проверяем, что бы модуль отображался на всех страничка сайта и сохраняем:

[img]http://s2.ipicture.ru/uploads/20121025/LNDaeNne.jpg[/img]


Далее задаём стили правому сайдбару в файле layouts.css я задала такие:

#sideRight {
float: left;
margin-right: -3px;
width: 250px;
margin-left: -250px;
position: relative;
padding-top: 20px;
}


B вот что у нас вышло:

[img]http://s2.ipicture.ru/uploads/20121025/IgV5MU0Z.jpg[/img]





МЕЛКИЕ УКРАШЕНИЯ ДЛЯ ШАБЛОНА




Кинем взор на наш шаблон и подумаем, что ему ещё не хватает для полного совершенства и великолепия.

Добавим тень нашему сайту, для этого в файле layouts.css для #wrapper добавим следующее:

box-shadow: -18px 0 20px -20px #333, 18px 0 20px -20px #333;


И в файле template.css добавим более насыщенный цвет фона:

body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-color:#FFCC80;
}


В итоге у нас получился вот такой шаблон:

[img]http://s2.ipicture.ru/uploads/20121025/2q81uU5U.jpg[/img]


Правый блок пустоват, но в последствии он предусмотрен для баннеров и реклам.

Открываем файл templateDetails.xml и добавляем в него наши созданные позиции:

<positions>
    <position> topmenu</position>
   <position> search</position>
   <position> footer</position>
</positions>


Вообще это рекомендую делать это сразу после того как вы указали позицию в index.php, что бы потом не забыть.




ПРЕВЬЮ ШАБЛОНА




Теперь сделаем ПринСкрин нашего шаблона уменьшим его до размера 210x150 и сохраняем в формате.png, в корневой папке нашего шаблона.
Теперь если мы зайдём в менеджер шаблонов/выберем вкладку Шаблоны, то увидим миниатюрное изображение нашего шаблона.

[img]http://s2.ipicture.ru/uploads/20121025/VHSkUS1X.jpg[/img]

По желанию можно поменять faviconку нашего шаблона, вместо стандартной иконке Joomla.

Таким образом мы создали самый простой шаблон для Joomla.

А так же создать запасные позиции шаблона, это понадобиться для будущих ваших модулей сайта, сделать красивую 404 страничку. Но целью этой статьи было научиться элементарному, думаю с поставленной задачей мы справились в полном объёме! :)


При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

[img]http://www.masterwebs.ru/sp/seopult.gif[/img]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
anton1990
anton1990
сообщение 25.10.2012, 21:45; Ответить: anton1990
Сообщение #2


Статья хороша, написана доступным языком и это самое важное для новичка вроде меня. Буду пробовать свои силы, спасибо :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 25.10.2012, 21:58; Ответить: Алерт
Сообщение #3


Спасибо! Удачи в постижении! :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
chek_mw
chek_mw
сообщение 26.10.2012, 13:13; Ответить: chek_mw
Сообщение #4


Согласен. Статья замечательная. Искал как сдлеать шаблон для Joomla - везде так сухо про это, а тут я наткнулся на такую сочную статью. =)
Даже не поленился зарегистироваться, что бы вам myrka отзыв написать.
Вы действительно "Добрых дел мастерица" ^_^
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 20.11.2012, 20:54; Ответить: Алерт
Сообщение #5


Спасибо! Мне искренне приятно :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
llutz
llutz
сообщение 24.12.2012, 19:39; Ответить: llutz
Сообщение #6


Спасибо, на удивление просто и приятно читать.
Правда, когда пытался оформить ссылку, не смог сделать так, чтобы она была другого, чем текст, цвета. В css это вроде бы прописано понятно, а как это условие привязать непосредственно к шаблону?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4ernii77
4ernii77
сообщение 28.4.2013, 20:01; Ответить: 4ernii77
Сообщение #7


спасибо!огорчает то,что нет всех озображений к статье(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Исо
Исо
сообщение 25.5.2013, 19:02; Ответить: Исо
Сообщение #8


Это надо же запастись стольким терпением и альтруизмом, написать и объяснить так, что глаядя на все это, даже мухи сидевшие на экране моего монитора, теперь могут верстать. Кристина или как Вас там звать не знаю, но вы просто редкостное создание! :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Дмитрий П
Дмитрий П
сообщение 29.7.2013, 15:41; Ответить: Дмитрий П
Сообщение #9


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

хотя, попробовал проделать все по написанному и нашел много нестыковок, но все равно если есть голова там где она должна быть все получится...

Сообщение отредактировал Дмитрий П - 30.7.2013, 9:50
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Алерт
Алерт
Topic Starter сообщение 29.9.2013, 15:22; Ответить: Алерт
Сообщение #10


Это надо же запастись стольким терпением и альтруизмом, написать и объяснить так, что глаядя на все это, даже мухи сидевшие на экране моего монитора, теперь могут верстать. Кристина или как Вас там звать не знаю, но вы просто редкостное создание! :)

ой..ну прям растаяла от такого коммента :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 399 Вчера, 15:13
автор: LiveExpert
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 357 Вчера, 15:13
автор: LiveExpert
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29206 27.3.2024, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Делаю полностью уникальный дизайн для сайтов!
46 AlexDIZ 93537 26.3.2024, 20:03
автор: AlexDIZ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1124 26.3.2024, 14:13
автор: knezevolk


 



RSS Текстовая версия Сейчас: 29.3.2024, 18:32
Дизайн