Шаблон JA_Purity II на Joomla 1.7. Часть 2.

Эта статья является продолжением статьи об этом замечательном бесплатном шаблоне для Joomla 1.7. В ней я хочу предложить вашему вниманию способы тонкой настройки этого шаблона.

Во-первых, как и некоторые другие шаблоны, можно что-то подправить на вкладке «Layouts». Например, мне необходимо было удалить «ненужный» блок управления из лицевой части сайта.

На вкладке «Layouts» редактируем (нажимаем иконку с карандашом) «расположение по умолчанию». В открывшемся окошке с кодом нам необходимо удались строку

<block name="cpanel" type="usertools/cpanel">

и нажать кнопку «Save». С помощью этих файлов можно также менять расположение блоков. Заметьте, если мы изменили что-то, то рядом с измененным материалом появится ссылка «Reset to default» - с ее помощью можно можно восстановить «заводские настройки». Весьма полезная штука при экспериментах с шаблоном ;-), спасибо разработчикам!

Ссылка "Reset to default" позволяет отменить все изменения в соответствующем файле шаблона

Если же вы хотите оставить данную панель управления, но просто отключить некоторые возможности (или наоборот включить :-)), то можно воспользоваться секцией «User Tools» на вкладке «Profiles». На ней можно указать, что будет доступно пользователю с лицевой стороны сайта, а что нет.

Однако, мне также необходимо было изменить «цветовую гамму» меню и немного изменить размеры изображения рядом с логотипом, а админка шаблона этого сделать не позволяла. Если Вам также необходимо это сделать, придется править код шаблона. Все файлы шаблона, которые нам понадобятся, находятся в папке шаблона \templates\ja_purity_ii\. Будем считать ее корневой для нашей статьи (т. е. все пути ниже будут «отсчитываться» от этой папки. Редактирование кода можно делать в любом текстовом редакторе, например блокноте (в контекстном меню файла выбрать "открыть с помощью"). Но все таки лучше и проще это делать в Notepad++.

Как делал это я:

1. Убрать «маску» изображения рядом с логотипом.

Если вы заметили, то изображение (точнее изображения, т. к. шаблон имеет три различных картинки по умолчанию, которые он показывает в случайном порядке) покрыто по краям «туманом». И если Вам необходимо избавится от него, просто удалите\переименуйте файл \images\header-mask.png. (конечно, можно подправить код шаблона, чтобы добиться того же результата, но мне кажется новичкам так будет проще. Но все таки, если хотите подправить код, то вот он: в файле \css\template.css строки 788-790 отвечают за маску

/* Header mask ---*/

.ja-headermask {

background: url(../images/header-mask.png) no-repeat top right;).

2. Увеличение/уменьшение количества картинок рядом с логотипом

Изображения, которые шаблон использует в своей работе, находятся в папке \images\header.

Код, который отвечает за их выборку и отображение находится в файле \blocks\head.php строки 48-52

#ja-header .main {

background-image: url(

<?php echo T3Path::getUrl('/images/header/header'. rand(1,3).'.jpg'?>

);

}

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

'/images/header/header'. rand(1,3).'.jpg'

на

'/images/header/header1.jpg' — где header1.jpg — картинка, которую вы хотите использовать (можно заменить стандартную на свою в папке /images/header)

Или же, если хотите использовать больший набор картинок, замените цифру 3 на то количество картинок, которое хотите использовать. (не забудьте поместить их с именами headerХ.jpg в соответствующую папку /images/header, где Х — номера изображений).

3. Изменение размеров картинки рядом с логотипом и положения самого логотипа

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

Код отвечающий за логотип (файл \css\template.css, строки 338-342):

h1.logo a {

background: url(../images/logo.gif) no-repeat center;./*картинка лого и ее выравнивание*/

display: block;

height: 79px;/*высота лого*/

width: 600px;/*ширина лого — меняя ее, можно управлять горизонтальным положением лого ;-)*/

Код отвечающий за картинку в хедере (файл \css\template.css, строки 1215-1219):

#ja-header .main {

background: url(../images/header3.jpg) no-repeat right top #333;

height: 119px;/*устанавливает высоту картинки в хедере*/

padding: 0;

}

Ширина этой картинки зависит от ширины исходного файла картинки. Т. е. если хотите картинку на всю ширину сайта, просто используйте в этом качестве картинку, у которой ширина соответствует желаемой вами.

4. «Раскраска» меню.

Если стандартные цвета главного меню вас не устраивают, их можно поменять на свои, подправив некоторые файлы (хотя конечно хотелось бы видеть данную функцию в админке шаблоноа). Перед тем как что-то менять, подумайте, а сможете ли вы подобрать новые цвета главного меню гармонично? Если да, тогда вот вам поле для работы:

файл \css\template.css, строки 1211-1213

/* HEADER

--------------------------------------------------------- */

#ja-header { background: #333; position: relative; z-index: 10; }/* меняет фон вокруг верхней картинки (333 — код цвета, можете указать свой)*/

файл \css\template.css, строки 1241-1247

/* Main Nav ---*/

#ja-mainnav {

background: url(../images/grad1-mask.png) repeat-x top #444;/*цвет фона главного меню, по умолчанию 444*/

border-top: 1px solid #666;

line-height: 1;

position: relative;

z-index: 11;

}

Дальнейшая раскраска меню производится с помощью файлов, находящихся в папке \css\menu. Как видно по названиям файлов, каждый из них отвечает за оформление своего типа главного меню. Чтобы не нагружать лишним текстом, можете скачать пример файла mega.css (где я «перекрасил» меню в синий цвет), где я оставил комментарии в коде, какой параметр за что отвечает.

Надеюсь, это кому-то поможет!

До свидания!