Шаблоны сайта

Материал из Документация JoostinaCMS

Перейти к: навигация, поиск

Содержание

Для чего нужен шаблон?

Для того чтобы привести внешний вид сайта в соответствие с вашими требованиями, необходимо создать новый шаблон или изменить уже имеющийся. Шаблон задает расположение элементов страницы, отвечает за вывод содержимого сайта и его внешнее форматирование. Под содержимым подразумеваются компоненты, модули, новости, статьи и другая информация. Оформлением всего вышеперечисленного занимаются CSS - стили вашего шаблона (файл template_css.css). Список установленных шаблонов и доступные действия над ними можно увидеть в "Менеджере шаблонов" (находится в админцентре: "Сайт" - " Шаблоны " - "Шаблоны сайта").


Состав шаблона

Папка шаблона расположена в папке /templates вашего сайта. В состав шаблона входят следующие файлы:

Файл index.php

Определяет базовую разметку страницы вашего сайта. Содержит переменные, информацию о модулях и их позициях. Структура данного файла (дополнить на примере с разъяснениями, дописать всю информацию об этом файле)

CSS

Папка CSS со вложенным как минимум одним файлом. Отвечает за оформление блоков страницы (цвета, размеры шрифтов и т.п.). Чаще всего имеет название template_css.css. В одном шаблоне можно использовать несколько CSS файлов, например, module.css (для оформления стиля модуля), hack.css (для отдельного вида браузера). Если файлов css несколько, то пути к ним должны быть прописаны в index.php шаблона, либо ... Также необходимо отметить, что в корневой папке шаблонов также есть папка CSS со стилями по умолчанию для ...

XML-файл

templateDetails.xml. Необходим для инсталяции шаблона из админки Joostina и содержит служебную информацию о нем. Находится в корневой папке шаблона. В файле templateDetails.xml находится вся информация о шаблоне: автор, дата создания и т. д. Кроме этого, здесь описываются все файлы (изображения, css, php и т. д.), входящие в состав шаблона.

Пример templateDetails.xml стандартного шаблона

<mosinstall type="template" version="1.0.x">

<name>Название шаблона</name>
<creationDate>11/12/06</creationDate>
<author>Автор</author>
<copyright>GNU/GPL</copyright>
<authorEmail>author@email.com</authorEmail>
<authorUrl>www.joom.ru</authorUrl>
<version>1.0</version>
<description> Пример templateDetails.xml обычного шаблона </description>
<files>
<filename>index.php</filename>
<filename>js/ie.js</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/header.png</filename>
<filename>images/background.png</filename>
<filename>template_thumbnail.png</filename>
</images>
<css>
<filename>css/base.css</filename>
<filename>css/norightcol.css</filename>
<filename>css/template_css.css</filename>
</css>

</mosinstall>

Описание разделов templateDetails.xml

  • mosinstall — содержит информацию для инсталлятора Joomla. Параметр type="template" указывает, что устаналивается шаблон.
  • name — название шаблона. В процессе установки будет создана папка с идентичным именем, поэтому в названии шаблона нельзя использовать пробелы. (Поправка! Пробелы использовать можно, но при создании папки шаблона они будут заменяться на символы подчеркивания. Также, если в названии шаблона будут использоваться символы верхнего регистра, то при создании папки шаблона все симовлы будут заменены на строчные.)
  • creationDate — дата создания шаблона. Может быть «8 Мая», «19/08/06» и т. д.
  • author — имя автора шаблона. Можете использовать любое имя.
  • copyright — информация об авторских правах на шаблон.
  • authorEmail — E-mail автора шаблона.
  • authorURL — ссылка на веб-сайт автора.
  • version — текущая версия шаблона.
  • description — описание шаблона. Можете написать здесь, какой вы хороший мастер верстки и смогли сделать такой замечательно-распрекрасный кроссбраузерный шаблон в соответствии с XHTML. :)
  • files — здесь указываются файлы, входящие в состав шаблона: php- и другие файлы, но не изображения или файлы css. Каждый файл должен быть заключен в контейнер <filename></filename>.
  • images — аналогично файлам, только в этом разделе указываются изображения, входящие в состав шаблона. Также, каждое изображение должно быть заключено в контейнер.
  • css — аналогично, только здесь указываются файлы css-стилей. Как и в случае с файлами и изображениями, каждый css-файл должен быть заключен в контейнер <filename></filename>.

При создании этого файла помните, что templateDetails.xml — это XML-файл, то есть должен строго соответствовать стандарту и всякие вольности в описании просто недопустимы.

Файл графического предпросмотра

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

Дополнительно

Как правило, в папке шаблона могут быть еще папки картинок images (структура которой также может быть многовложенной в случае сложного шаблона), папки с пользовательскими скриптами js (меню, например)

Как установить новый шаблон?

Есть два способа установки шаблона: с помощью инсталлятора и вручную. Вручную как правило устанавливаются шаблоны с неправильным или отсутствующим файлом templateDetails.xml

Автоматическая установка

В админцентре выберите "Сайт" – “Шаблоны” - "Шаблоны сайта” – кнопка “Создать” (или “Сайт” - “ Шаблоны ” – “Установка нового шаблона”). Далее выберите архив с шаблоном на вашем жестком диске (кнопка “Обзор”) и нажмите кнопку "Загрузить и установить". Затем нажмите “Продолжить…” или направляйтесь в "Сайт" - " Шаблоны " - "Шаблоны сайта". Вы можете увидеть название только что установленного шаблона в списке других шаблонов. Выберите шаблон и нажмите "Сделать по умолчанию" или “Назначить” (для назначения шаблона конкретной странице/страницам вашего сайта).

Ручная установка

Распакуйте шаблон в папку на локальном компьютере и загрузите её по FTP на сайт в папку /templates. Убедитесь в том, что структура шаблона соблюдена верно. Идем в админке по известному уже направлению "Сайт" - " Шаблоны " - "Шаблоны сайта". Вы можете увидеть название только что загруженного шаблона в списке других шаблонов. Если этого не произошло, чистим кэш joostina (Инструменты -> Очистить весь кэш), обновляем страницу шаблонов, минуя кэш браузера (в опере F5).

Альтернативный шаблон для определённого раздела

  • Авторизуемся в панели администрирования;
  • Выбираем в меню пункт "Сайт" - "Шаблоны" - "Шаблоны сайта";
  • Открывается страница "Шаблоны [ Сайт ]";
  • В списке выбираем альтернативный шаблон, который мы хотим назначить определенным разделам, и нажимаем кнопку "Назначить";
  • В открывшемся окне выбираем страницы сайта (пункты меню), для которых хотим назначить выбранный шаблон. Если необходимо, чтобы шаблон отображался на нескольких страницах, отмечаем позиции, используя клавишу "Ctrl";
  • Нажимаем кнопку "Сохранить".


Подходят ли для Joostina шаблоны от Joomla?

Поскольку Joostina основана на Joomla 1.0.х, шаблоны для Joomla версии 1.0.х будут работать и на Joostina. Шаблоны от Joomla 1.5 на Joostina не пойдут, без предварительной переработки кода шаблона.

Установка шаблона неудачна… Почему?

Скорее всего, все дело в файле templateDetails.xml – либо он отсутствует, либо есть несоответствие между файлами самого шаблона и их описанием в templateDetails.xml. В этом случае попробуйте распаковать шаблон в папку на локальном компьютере и загрузить её по FTP на сайт в папку /templates.


Как можно изменить шаблон?

Шаблон - это папка, находящаяся в папке /templates вашего сайта, в которой хранятся файлы xml, php, css и изображения. Вы можете изменить эти файлы через специальные программы или через интерфейс админцентра. В админцентре выберите "Сайт" - " Шаблоны " - "Шаблоны сайта". Далее выберите шаблон, который собираетесь изменить. После чего нажмите кнопку "Ред. HTML" или "Ред. CSS".

В данном случае HTML - это главный файл, в котором осуществляется вывод содержимого сайта. В папке шаблона этот файл называется index.php.

Всемирная паутина основана на HTML . HTML – это не язык программирования, а язык описания и форматирования (разметки) текста. Текст при этом состоит из различных структур: заголовков, списков, частей, выделенных жирным или наклонным шрифтом, таблиц и т.д. HTML работает с помощью “Тегов” (tags). Тег имеет открывающую и закрывающую формы. Например, заголовок первого уровня может выглядеть следующим образом:

<h1> Это заголовок первого уровня </h1> .

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

CSS - это стили вашего шаблона, описанные в файле template_css.css. Каскадные таблицы стилей (Cascading Style Sheets или CSS) – это расширение HTML . CSS – также не является языком программирования. С помощью CSS команд можно сделать оформление каждому элементу шаблона.


Картинки в шаблоне

Редактирование/замена картинки

Идем в папку шаблона (напомним, она находится в папке /templates сайта), открываем папку images и смотрим все рисунки. Как только находим нужный - меняем его на свой с такими же размерами, именем и расширением (в случае необходимости замены), либо правим его в стороннем графическом редакторе (фотошопе, например).

Удаление картинки из шаблона

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

Изменение свойств отображения картинок

Добавление/удаление ссылки

[Описать процедуру добавления/удаления ссылок, возможно с глобальными переменными]

Чтоб картинка "не цеплялась" для перетаскивания

Очень интересно, как это делается.

Другое [предлагайте]

Что такое позиция модулей в шаблоне?

Позиция модулей - это область шаблона, предназначенная для отображения опубликованных в ней модулей сайта. В одной позиции могут быть опубликовано неограниченное количество модулей. Порядок отображения модулей в позиции настраивается в Менеджере модулей административной панели Joostina.

Позиции для модулей задаются в файле index.php шаблона с помощью функции mosLoadModules.


Как узнать, какие есть позиции модулей в шаблоне?

Для определения имеющихся позиций модулей в шаблоне существует два метода:

1. Найти в файле index.php шаблона все вызовы функции mosLoadModules, и посмотреть первый аргумент этой функции.

2. Установить интересующий шаблон на сайт, а затем в адресной строке браузера после имени сайта добавить /?tp=1, т.е.

http://Имя_сайта/?tp=1


Как добавить новую позицию в шаблон?

Прежде всего, для создания новой позиции в шаблоне, вам необходимо определиться с названием позиции. Существующие позиции сайта вы можете посмотреть в Админцентре: "Сайт" - "Шаблоны" - "Позиции модулей". После того, как вы выбрали название позиции, откройте index.php вашего шаблона и добавьте строку

<?php mosLoadModules('position_name',style);?>

в нужное место, где 'position_name' - это название позиции, а style - стиль отображения модулей (необязательный параметр). Например, для позиции right, нужно добавить строку <?php mosLoadModules('right');?>

Поддерживаются следующие стили:

  • mosLoadModules( 'position_name' ) — используется для стандартного вывода модулей в таблицах
  • mosLoadModules( 'position_name', 1 ) — используется для вывода модулей горизонтально
  • mosLoadModules( 'position_name', -1 ) — используется для вывода модулей без таблиц и блоков div, у модуля не будет заголовка
  • mosLoadModules( 'position_name', -2 ) — используется для вывода модулей блоками div
  • mosLoadModules( 'position_name', -3 ) — используется для создания в модуле круглых углов

Параметр style отвечает за способ вывода модулей в позиции. А внешнее оформление модулей задается уже непосредственно в файле template_css.css шаблона


Переменные шаблона

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


Перечень переменных

В Joostina используются следующие переменные.....


Правила оформления переменных при внесении в шаблон

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

Источник — «http://wiki.joostina.ru/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B_%D1%81%D0%B0%D0%B9%D1%82%D0%B0»