Как изменить дизайн или шаблон в Joomla. Joomla как изменить шаблон
Как изменить (отредактировать) шаблон Joomla?
Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с photoshop< и css.
Итак, нам осталось изменить шаблон сайта. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь - yoursite.ru/templates\siteground-j15-1.
В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css - таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css).
Давайте рассмотрим файл index.php. В нем html-разметка отвечает за расположение элементов на странице. Все, что заключено в <jdoc /> или в <?php ?> - это программный код, отвечающий за вывод информации из базы данных или подключение других файлов. Например, тексты наших статей, название сайта... - все это хранится в базе данных и выводится на страницы с помощью программного кода. Для изменения шаблона нас интересует только html-разметка, программный код трогать не надо, иначе ваш сайт перестанет работать так, как должен.
Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему - плагин Firebug для браузера FireFox. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук):
Щелкаем по нему, внизу окна браузера откроется панель:
Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы - head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег - <div>
Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css
Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде - #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась:
Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с <div> и видим его содержимое: <div> - отвечает за левый угол и <div> - отвечает за правый угол. Ищем эти идентификаторы на странице template.css
Итак, левый угол - картинка header_top_left.jpg, правый угол - картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат:
Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его - <div>
Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это <div>, содержащий <div>, который в свою очередь содержит <div>. Ищем первые два идентификатора на странице template.css
Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700.
Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу):
А в таблице стилей поменяем синий цвет фона на коричневый:
Сохраняем и обновляем наш сайт в браузере:
Но на сайте-образце у нас расположена картинка. Для начала давайте ее добудем. Для этого идем на сайт-образец, щелкаем по картинке правой кнопкой мыши и выбираем пункт - Открыть фоновое изображение:
Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши - Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге <div>:
Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги <div> и <div> должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела (так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top), а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:
Теперь будем разбираться с <div>, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись слева - Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева - название и слоган, а другую справа - с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:
На странице index.php видим, что в <div> выводится ссылка с названием фирмы посредством программного кода, который мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из администраторской зоны, поменяв название сайта).
Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой - за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст:
Посмотрим на результат:
Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце:
Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец:
Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает тег <div>. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:
Все, с шапкой сайта разобрались. Теперь аналогичным образом разбираемся с главным меню и меню каталога товаров. Ничего принципиально нового уже не будет, поэтому поясню кратко.
За главное меню отвечает тег <div>, в таблице стилей видим, что фоновой картинкой для этого тега является top_menu_bg.jpg, открываем ее в photoshop и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает, у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.
Далее ссылки в меню надо сделать покрупнее и серыми, а при наведении курсора мыши - белыми. За ссылки в главном меню отвечает тег с, поменяем немного стили:
Теперь то же самое с меню каталога товаров, за него отвечает тег <div>. Синяя верхняя полоса - это фон для тега <h4> (menu_t.jpg), находящегося внутри тега <div>. Открываем эту картинку в photoshop и меняем цвет на коричневый. Вообще-то на сайте-образце цвет фона у меню белый, но мне кажется, что с коричневой полосой как-то симпатичнее. А вот внутри серый фон можно убрать, для этого надо поудалять свойства backgroud и border в стилях, отвечающих за пункты меню, а цвет самих пунктов сделать коричневым, а при наведении курсора мыши - подчеркнутым. Вот стили с изменениями :
И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули:
С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php :
Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его:
Теперь такая же ситуация у нас в <div>, хорошо бы убрать надпись "Русобои, Powered by Joomla! and designed by SiteGround web hosting", но она также подставляется программным кодом:
Мы также уберем этот код, но в теге с напишем название фирмы и значок копирайта:
Ну и, конечно, поменяем цвет на коричневый в стилях:
Вообще-то убирать ссылки на изготовителей шаблона считается неправильным, обычно их просто делают невидимыми, но в данном шаблоне такой возможности нет. Если вам не мешают данные ссылки, то можете их просто оставить.
Наш сайт сейчас выглядит вот так:
Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h2, h3, h4...) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно.
Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.
uscms.ru
Как изменить дизайн или шаблон в Joomla
Открываем браузер и набираем адрес нашего сайта - http://localhost/oboi. Сейчас наш сайт выглядит так:
Что можно сказать о его внешнем виде? Выполнен в серо-голубых тонах, а в шапке сайта находится логотип Joomla. Вряд ли это нам подойдет. За внешний вид сайта в Joomla отвечают шаблоны. Собственно сейчас мы видим шаблон по умолчанию. Но как вы понимаете его можно поменять.
Для этого нам сначала нужно попасть в администраторскую панель управления сайтом. Открываем еще одну вкладку в браузере и набираем адрес администраторской панели - http://localhost/oboi/administrator (т.е. к адресу сайта дописываем слово administrator). И видем страницу входа в административный раздел:
Вводим логин - admin, пароль - 1111 (или тот который указали вы при установке Joomla), нажимаем кнопку Войти и попадаем в администраторскую зону:
Именно отсюда идет управление сайтом. Назначение различных пунктов мы будем узнавать по мере освоения материала. Сейчас нас интересует, как поменять шаблон сайта. За это отвечает Менеджер шаблонов, который находится в пункте Расширения:
Щелкаем по нему и попадаем в Менеджер шаблонов.
Здесь в столбце Название шаблона перечислены имеющиеся на сайте шаблоны, а в столбце По умолчанию напротив шаблона, который установлен сейчас, стоит желтая звездочка. Чтобы поменять шаблон необходимо поставить галочку напротив необходимого шаблона и нажать на кнопку По умолчанию:
Желтая звездочка установится напротив выбранного шаблона. Теперь обновим в браузере наш сайт и увидим, что его внешний вид изменился:
Сейчас в Менеджере шаблонов всего 3 шаблона, небогатый выбор, но в Joomla предусмотрена возможность загружать и другие шаблоны. Для этого сначала надо найти в Интернете подходящий шаблон. Сделать это совсем несложно. Набрав в любом поисковике фразу "Шаблон для joomla 1.5", найдите тот, который нравится, и скачайте его к себе на компьютер.
Вообще к выбору шаблона можно подходить по-разному. Можно найти шаблон наиболее подходящий тематике вашего будущего сайта и использовать его в том виде, который есть. А можно найти шаблон наиболее подходящий по цветовому решению, а затем, обладая некоторыми навыками photoshop, html и css, подкорректировать шаблон под себя.
Сейчас мы воспользуемся первым вариантом, а в последнем уроке курса я покажу, как корректировать шаблоны.
Итак, просмотрев несколько вариантов, мной был выбран шаблон, наиболее подходящий к нашему сайту Русобои. Давайте установим его на наш сайт.
Для этого скачайте >шаблон siteground-j15 к себе на компьютер. Теперь идем в администраторскую зону: Расширения - Установка и удаление
Нажимаем на кнопку Обзор, выбираем наш шаблон siteground-j15-1.zip и нажимаем на кнопку Закачать файл:
Через несколько секунд Joomla сообщает, что шаблон удачно установлен:
Теперь мы снова идем в Расширения - Шаблоны и делаем только что установленный шаблон шаблоном по умолчанию (это мы уже умеем):
Переходим на вкладку нашего сайта, обновляем его и видим новый дизайн:
Сейчас дизайн нашего сайта мало похож на оригинал, но в последнем уроке, когда мы будем корректировать шаблон, вы убедитесь, что именно этот шаблон легче всего изменить под желаемый.
Итак, сегодня мы научились менять шаблоны на сайте Joomla. В следующий раз будем наполнять наш сайт материалами.
uscms.ru
Как изменить шаблон Joomla! | HOSTiQ
Чтобы изменить шаблон Joomla!, то есть внешний вид сайта, нужно уметь работать с CSS и HTML. Разберем как изменить CSS и сразу увидеть изменения с помощью Firebug, а также три расширения для работы с CSS: JowWow CSS Loader, HD-Custom CSS, Advanced Template Manager.Ссылка на курсы по CSS и HTML HTML предопределяет разметку контента, а CSS его визуальный вид. Когда идет речь о работе над дизайном сайта Джумла, в первую очередь реь идет об изменении CSS шаблона Joomla. Для этого нужно перейти в расширения, далее в менеджер шаблонов, выбрать необходимый шаблон и нажать кнопку «Изменить».
Шаблон располагается в папке templates. Обычно большая часть таблиц стилей лежат в папке css. Некоторая часть файлов может быть вынесена в отдельные папки menu, иногда в blocks. Во многих шаблонах реализована возможность менять цветовую палитру сайта и шрифты прямо из публичной части сайта. Но этого явно мало для того, чтобы значительно изменить сайта.
Попробуем изменить CSS части сайта в онлайн-режиме. Для этого будем использования расширение Firebug. Это дополнение для Firefox, которое показывает информацию о CSS и HTML веб-страницы. Устанавливаем Firebug, после щелкаем правой кнопкой мыши на любом элементе страницы и нажимаем Inspect element with Firebug. Внизу экрана откроется окно. Слева HTML, справа - CSS.
Прямо здесь можно попробовать провести изменения. Размер шрифта, сам шрифт, цвет фона, что угодно. Эти изменения отображаются только для вас. Так что веселиться можно сколько угодно. Те изменения, которые вам действительно нужны, можно скопировать и после внести их в CSS файл шаблона.
Что можно сделать дальше для того, чтобы разобраться в работе с CSS? Хочу порекомендовать отличный курс наcodecademy, ссылку можно посмотреть в описании к видео, у них есть отличные курсы по CSS и HTML. Можно заниматься и по ходу дела применять свои знания на своем же сайте.
Быстрый хостинг с хорошей поддержкой и установленной системой для создания сайта на Joomla: Ищите нас в соцсетях:Facebook: Google+: Instagram:
aworlds.com
