Блог Евгения Шматенко

В этом уроке мы научимся редактировать heder шаблона Joomla 1.7 на базе JA T3 Framework 2.0 — изменим внешний вид фона, логотипа и форму поиска. Руководство по созданию шаблона Joomla 1.7

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

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

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

Редактируем хедер.

Первым делом откройте результат прошлой нашей работы и акцентируйте внимание на шапке сайта:

Мы изменим его размер, зададим фон, сменим логотип, приведем в соответствие форму поиска и подгоним нашу С-Panel под грядущий дизайн. Приступим.

Работаем мы в Firefox 8.0.1 Настоятельно проустановить этот браузер, чтобы у нас все состыковалось. Запускаем расширение Firebug Lite методом нажатия левой клавиши мыши на жучка в верхнем правом углу Firefox:

В левой колонке «Рабочего пространства Firebug» находим строчку <div id="ja-header" class="wrap ">, которая отвечает за вывод нашей шапки, и нажимаем на + перед ней.

Находим вложеный <div class="main">, в этой строчке нажимаем на значение «div» благодаря чему вся строчка засветится синим цветом. В правой колонке, в этот момент, отобразятся CSS значения #ja-header .main, что в свою очередь отвечает за отображение части хедера выделенной красным прямоугольником в шапке (смотрим рисунок ниже):

Смотрим на отображение CSS стилей #ja-header .main  и удаляем значение которым он описывается. Таким образом мы избавляемся от нижней границы хедера, обрамляющую меню навигации сверху. Вместо них мы прописываем следующие значения { border: none; padding: 0;} так как у нас Хедер будет расширятся в зависимости от размеров логотипа.

В Firebug прописать дополнительные значения возможно двойным щелчком по интересующему нас классу, для изменения постоянной — также двойной щелчек по значению. После применения параметров Ferebug может автоматически добавить все нужные значения класса  касательно того или иного правила.

Применив вышесказанное получаем результат в ниже следующем скрине:

Следующий шаг. Идем в <div id="ja-header" class="wrap "> указываем его классу нижнюю границу {border-bottom: 1px solid #555; background: #333 }:

Находим файл template.css в пользовательской теме, по адресу z:\home\localhost\www\ваш_сайт\templates\ja_t3_blank\local\themes\iNove2\css\template.css открываем его в редакторе и вставляем новый css код который мы сгенерировали своими руками выше (сохраняем в кодировке UTF-8 (без BOM ) для нормального отображения русского языка):

/* HEADER ------------------------------
----------------------------------*/
/* Главный стиль хедера*/
#ja-header .main {
    border: medium none;
    padding: 0;
#ja-header {
    background: none repeat scroll 0 0 #333333;
    border-bottom: 1px solid #555555;
}

Другими словами, фиксируем там те изменения, которые мы производим.

Теперь приступим к изменению нашего логотипа, цвета CPanel и настроим форму поиска.

Открываем наш template.css и ниже прописываем описания значений logo.png после чего сохраняем наш файл:

/* Описание логотипа темы iNove2 ------------*/
h1.logo {width: 210px; height: 80px;}
h1.logo a {
	background: url(../images/logo.png) no-repeat left;
	width: 210px;
	height: 80px;
}

Из дополнительных материалов берем наш логотип «logo.png» и копируем его в нашу тему по адресу ...\ja_t3_blank\local\themes\iNove2\images\. Обновляем страничку сайта в браузере и получаем:

Изменим цвет Cpanel. Мы изменим ее кнопочку на белую стаичную и с серым оттенком активную. Для этого в левом рабочем пространстве Firebug мы находим ссылку указанную на скриншете, выделяем еепутем нажатия на на «<a» кода, добится автоматического поиска этого места мы можем направив курсор мыши на на прямоугольник панельки:

Выбрав требуемое мы увидим значения ссылки, где будет указан стандартный ее цвет, если мы нажмем на значек  наведем курсор на #555555 и меняем на b3b2b2:

Заходим во вкладку «стиль» Firebug-а и отмечаем галочкой «hover»:

Задаем такой же серый цвет активной ссылке, введя для нее значение #b3b2b2:

Давайте изменим шрифт заголовков Cpanel, тем самым выснив каким образом это возможно сделать. Менять будем вот эти заголовки:

Выбираем инструмент анализа Firebug (стрелочка на прямоугольнике) и наводим на один из заголовков, в результате чего активируем его код:

Добавляем в описание значения шрифта font-family: verdana,sans-serif.

И заключительным этапом будет добавление в template.css нашего кода, вы можете делать это в процессе дабы не забыть, что где меняли, я лично так и делаю:

/*Описание кнопки Cpanel*/
a#ja-cpanel-toggle {
background: #B3B2B2;
color: #CCCCCC;
}
a#ja-cpanel-toggle:hover, #ja-cpanel-toggle.open {
background: #B3B2B2;
color: #FFFFFF;
border: none;
}
/*Описание окна Cpanel*/
#ja-cpanel-main h3 {
font-family: verdana,sans-serif;
}

Сохраняем и приступаем к форме поиска. Выбираем нашу форму поиска, находим чистый, без описания #ja-search .inputbox и задаем ему значения:

#ja-search .inputbox {
background: #444444;
border-color: #555555;
color: #CCCCCC;
}

Добавим иконку поиска. Копируем в папку images  иконку search.png и вставляем в template.css ее описание:

form.search {
background: url («.../images/search.png») no-repeat center left;
padding-left: 25px;
}

Сохраняем и получаем результат:

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

Сегодня мы извлекли массу хороших уроков по разработке шаблонов с помощью JA T3 Framework. В следующем уроке мы поработаем над меню навигации — приведем его в достойный вид.

До встречи на страницах gradeup.org.ua.

Оглавление цикла «Цех конструирования шаблонов для Joomla»

Прежде чем задать вопрос, посетите страничку «FAG» может быть на него уже ответили!

С уважением, Ваш Евгений.