Итак, нам осталось изменить шаблон сайта, чтобы он стал похож на образец. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Файлы нашего сайта, как вы помните, находятся в C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь - C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi\templates\siteground-j15-1.
В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css - таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css).
Давайте рассмотрим файл index.php. В нем html-разметка отвечает за расположение элементов на странице. Все, что заключено в <jdoc /> или в <?php ?> - это программный код, отвечающий за вывод информации из базы данных или подключение других файлов. Например, тексты наших статей, название сайта... - все это хранится в базе данных и выводится на страницы с помощью программного кода. Для изменения шаблона нас интересует только html-разметка, программный код трогать не надо, иначе ваш сайт перестанет работать так, как должен.
Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему - плагин Firebug для браузера FireFox. Скачать его можно, например, здесь, далее открыть браузер FireFox, выбрать в меню Инструменты - Дополнения и в открывшемся окне включить расширение Firebug. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук):
Щелкаем по нему, внизу окна браузера откроется панель:
Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы - head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег - <div id="whitebox_t">
Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css
Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде - #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась:
Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с <div id="whitebox_t"> и видим его содержимое: <div id="whitebox_tl"> - отвечает за левый угол и <div id="whitebox_tr"> - отвечает за правый угол. Ищем эти идентификаторы на странице template.css
Итак, левый угол - картинка header_top_left.jpg, правый угол - картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат:
Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его - <div id="header">
Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это <div id="header">, содержащий <div id="header_r">, который в свою очередь содержит <div id="logo">. Ищем первые два идентификатора на странице template.css
Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700.
Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу):
А в таблице стилей поменяем синий цвет фона на коричневый:
Сохраняем и обновляем наш сайт в браузере:
Но на сайте-образце у нас расположена картинка. Для начала давайте ее добудем. Для этого идем на сайт-образец, щелкаем по картинке правой кнопкой мыши и выбираем пункт - Открыть фоновое изображение:
Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши - Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге <div id="header_r">:
Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги <div id="header"> и <div id="header_r"> должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела (так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top), а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:
Теперь будем разбираться с <div id="logo">, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись слева - Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева - название и слоган, а другую справа - с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:
На странице index.php видим, что в <div id="logo"> выводится ссылка с названием фирмы посредством программного кода, который мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из администраторской зоны, поменяв название сайта).
Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой - за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст:
Посмотрим на результат:
Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце:
Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец:
Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает тег <div id="whitebox">. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:
Все, с шапкой сайта разобрались. Теперь аналогичным образом разбираемся с главным меню и меню каталога товаров. Ничего принципиально нового уже не будет, поэтому поясню кратко.
За главное меню отвечает тег <div id="tabarea">, в таблице стилей видим, что фоновой картинкой для этого тега является top_menu_bg.jpg, открываем ее в photoshop и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает class="pill_l", у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.
Далее ссылки в меню надо сделать покрупнее и серыми, а при наведении курсора мыши - белыми. За ссылки в главном меню отвечает тег с id="pillmenu", поменяем немного стили:
Теперь то же самое с меню каталога товаров, за него отвечает тег <div id="leftcolumn">. Синяя верхняя полоса - это фон для тега <h3> (menu_t.jpg), находящегося внутри тега <div id="leftcolumn">. Открываем эту картинку в photoshop и меняем цвет на коричневый. Вообще-то на сайте-образце цвет фона у меню белый, но мне кажется, что с коричневой полосой как-то симпатичнее. А вот внутри серый фон можно убрать, для этого надо поудалять свойства backgroud и border в стилях, отвечающих за пункты меню, а цвет самих пунктов сделать коричневым, а при наведении курсора мыши - подчеркнутым. Вот стили с изменениями :
И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули:
С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php :
Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его:
Теперь такая же ситуация у нас в <div id="sgf">, хорошо бы убрать надпись "Русобои, Powered by Joomla! and designed by SiteGround web hosting", но она также подставляется программным кодом:
Мы также уберем этот код, но в теге с id="sgf" напишем название фирмы и значок копирайта:
Ну и, конечно, поменяем цвет на коричневый в стилях:
Вообще-то убирать ссылки на изготовителей шаблона считается неправильным, обычно их просто делают невидимыми, но в данном шаблоне такой возможности нет. Если вам не мешают данные ссылки, то можете их просто оставить.
Наш сайт сейчас выглядит вот так:
Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h1, h2, h3...) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно.
Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.
Урок 3. Меняем дизайн сайта
Урок 5. Расширения - устанавливаем редактор
Урок 6. Дорабатываем главную страницу и изучаем глобальные настройки
Урок 10. Делаем главное меню сайта
Урок 11. Создаем разделы и категории
Урок 12. Устанавливаем Phoca Gallery
Урок 15. Делаем меню каталога товаров
Предыдущий урок Вернуться в раздел уроки joomla
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как создать свой сайт → Уроки Joomla → Урок 16. Как изменить шаблон joomla
Как изменить шаблон joomla
Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с photoshop, html и css.Итак, нам осталось изменить шаблон сайта, чтобы он стал похож на образец. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Файлы нашего сайта, как вы помните, находятся в C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь - C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi\templates\siteground-j15-1.
В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css - таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css).
Давайте рассмотрим файл index.php. В нем html-разметка отвечает за расположение элементов на странице. Все, что заключено в <jdoc /> или в <?php ?> - это программный код, отвечающий за вывод информации из базы данных или подключение других файлов. Например, тексты наших статей, название сайта... - все это хранится в базе данных и выводится на страницы с помощью программного кода. Для изменения шаблона нас интересует только html-разметка, программный код трогать не надо, иначе ваш сайт перестанет работать так, как должен.
Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему - плагин Firebug для браузера FireFox. Скачать его можно, например, здесь, далее открыть браузер FireFox, выбрать в меню Инструменты - Дополнения и в открывшемся окне включить расширение Firebug. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук):
Щелкаем по нему, внизу окна браузера откроется панель:
Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы - head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег - <div id="whitebox_t">
Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css
Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде - #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась:
Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с <div id="whitebox_t"> и видим его содержимое: <div id="whitebox_tl"> - отвечает за левый угол и <div id="whitebox_tr"> - отвечает за правый угол. Ищем эти идентификаторы на странице template.css
Итак, левый угол - картинка header_top_left.jpg, правый угол - картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат:
Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его - <div id="header">
Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это <div id="header">, содержащий <div id="header_r">, который в свою очередь содержит <div id="logo">. Ищем первые два идентификатора на странице template.css
Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700.
Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу):
А в таблице стилей поменяем синий цвет фона на коричневый:
Сохраняем и обновляем наш сайт в браузере:
Но на сайте-образце у нас расположена картинка. Для начала давайте ее добудем. Для этого идем на сайт-образец, щелкаем по картинке правой кнопкой мыши и выбираем пункт - Открыть фоновое изображение:
Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши - Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге <div id="header_r">:
Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги <div id="header"> и <div id="header_r"> должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела (так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top), а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:
Теперь будем разбираться с <div id="logo">, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись слева - Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева - название и слоган, а другую справа - с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:
На странице index.php видим, что в <div id="logo"> выводится ссылка с названием фирмы посредством программного кода, который мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из администраторской зоны, поменяв название сайта).
Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой - за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст:
Посмотрим на результат:
Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце:
Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец:
Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает тег <div id="whitebox">. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:
Все, с шапкой сайта разобрались. Теперь аналогичным образом разбираемся с главным меню и меню каталога товаров. Ничего принципиально нового уже не будет, поэтому поясню кратко.
За главное меню отвечает тег <div id="tabarea">, в таблице стилей видим, что фоновой картинкой для этого тега является top_menu_bg.jpg, открываем ее в photoshop и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает class="pill_l", у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.
Далее ссылки в меню надо сделать покрупнее и серыми, а при наведении курсора мыши - белыми. За ссылки в главном меню отвечает тег с id="pillmenu", поменяем немного стили:
Теперь то же самое с меню каталога товаров, за него отвечает тег <div id="leftcolumn">. Синяя верхняя полоса - это фон для тега <h3> (menu_t.jpg), находящегося внутри тега <div id="leftcolumn">. Открываем эту картинку в photoshop и меняем цвет на коричневый. Вообще-то на сайте-образце цвет фона у меню белый, но мне кажется, что с коричневой полосой как-то симпатичнее. А вот внутри серый фон можно убрать, для этого надо поудалять свойства backgroud и border в стилях, отвечающих за пункты меню, а цвет самих пунктов сделать коричневым, а при наведении курсора мыши - подчеркнутым. Вот стили с изменениями :
И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули:
С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php :
Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его:
Теперь такая же ситуация у нас в <div id="sgf">, хорошо бы убрать надпись "Русобои, Powered by Joomla! and designed by SiteGround web hosting", но она также подставляется программным кодом:
Мы также уберем этот код, но в теге с id="sgf" напишем название фирмы и значок копирайта:
Ну и, конечно, поменяем цвет на коричневый в стилях:
Вообще-то убирать ссылки на изготовителей шаблона считается неправильным, обычно их просто делают невидимыми, но в данном шаблоне такой возможности нет. Если вам не мешают данные ссылки, то можете их просто оставить.
Наш сайт сейчас выглядит вот так:
Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h1, h2, h3...) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно.
Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.
Предыдущий урок Вернуться в раздел уроки joomla
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.