Эта
статья является продолжением статьи
об этом замечательном бесплатном шаблоне
для 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++.
Как
делал это я:
- Убрать «маску» изображения рядом с логотипом.
Если
вы заметили, то изображение (точнее
изображения, т. к. шаблон имеет три
различных картинки по умолчанию, которые
он показывает в случайном порядке)
покрыто по краям «туманом». И если Вам
необходимо избавится от него, просто
удалите\переименуйте файл
\images\header-mask.png. (конечно, можно подправить
код шаблона, чтобы добиться того же
результата, но мне кажется новичкам так
будет проще. Но все таки, если хотите
подправить код, то вот он: в файле
\css\template.css строки
788-790 отвечают за маску
/*
Header mask ---*/
.ja-headermask
{
background:
url(../images/header-mask.png) no-repeat top right;).
- Увеличение/уменьшение количества картинок рядом с логотипом
Изображения,
которые шаблон использует в своей
работе, находятся в папке \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, где Х —
номера изображений).
- Изменение размеров картинки рядом с логотипом и положения самого логотипа
Например, мне необходимо было сделать
картинку шире и выше, чем стандартная
(шириной на всю страницу и разметить
логотип по ее центру).
Код отвечающий за логотип (файл
\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;
}
Ширина этой картинки зависит от ширины
исходного файла картинки. Т. е. если
хотите картинку на всю ширину сайта,
просто используйте в этом качестве
картинку, у которой ширина соответствует
желаемой вами.
- «Раскраска» меню.
Если стандартные цвета главного меню
вас не устраивают, их можно поменять на
свои, подправив некоторые файлы (хотя
конечно хотелось бы видеть данную
функцию в админке шаблоноа). Перед тем
как что-то менять, подумайте, а сможете
ли вы подобрать новые цвета главного
меню гармонично? Если да, тогда вот вам
поле для работы:
файл \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 (где я
«перекрасил» меню в синий цвет), где я
оставил комментарии в коде, какой
параметр за что отвечает.
Надеюсь, это кому-то поможет!
До свидания!
