Учимся менять внешний вид сайта на CMS Joomla. Как поменять внешний вид своего сайта на базе cms joomla

Сайт программистов - Учимся менять внешний вид сайта на CMS Joomla

Одним из важных критериев популярности CMS Joomla, является достаточно простая смена оформления сайта. Внешний вид сайта на Joomla можно изменить несколькими способами. Выделим 3 из них:

1. Скачать и установить готовый шаблон, в том виде, в котором он выложен в сети.Существует масса сайтов, где можно бесплатно скачать шаблоны для CMS Joomla. При желании, каждый сможет выбрать для себя подходящую тему оформления. Нужно всего лишь перейти в администраторскую панель, выбрать пункт Расширения - Установить/Удалить, выбрать архив с шаблоном и все. После того, как он установится, поставить его шаблоном по умолчанию. Минус данного способа в том, что другие люди, также могут использовать данный шаблон. Следовательно - теряется уникальность.

2. Уникализировать скачанный шаблон.Это, наверное, один из самых популярных способов. Т.е. Вы повторяете все, что описано в пункте первом, но при этом слегка меняете офомление: добавляете свой логотип, меняете базовые цвета, размер текста, заголовков, цвет ссылок и.т.п. Таким образом, Вы получаете уникализированый профессиональный шаблон.

3. Нарисовать и сверстать собственный шаблон.Для этого нужно иметь достаточные знания графических редакторов, хорошие знания html и css, и, естественно, знания работы joomla(чтобы суметь вставить нужные модули в созданный шаблон). Это самый сложный способ, однако он дает 100% уникальности.

В данном видеоуроке мы рассмотрим процесс переделки имеющегося шаблона под свои нужды.:

СОДЕРЖАНИЕ УРОКА:

- Введение

- Управление шаблонами. Основные настройки

- Как установить новый шаблон в Joomla. Краткий обзор файлов шаблона

- Как и где найти шаблоны для Joomla

- Установка шаблона и переделка его под свои нужды

Замена логотипа и настройка отображения модулей
Как поменять текст подвала
Как поменять иконку сайта
Быстрый поиск стилей элементов для их дальнейшего редактирования. Плагин firebug

БОНУС: в дополнение к данному уроку, я предоставляю Вам сборку простых и быстрых шаблонов под Joomla 1.5. в количестве 100 штук. Каждый шаблон снабжен большим скриншотом , по которому можно сразу оценить как он будет выглядеть.

Скачать видеоурок "Как изменить внешний вид сайта на CMS Joomla" + бонус

Скачать только бонус (100 быстрых шаблонов для joomla 1.5)

Скачать весь обучающий курс по Joomla (374 Мб)

vbs-bat-wirus.ucoz.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

Урок 3. Меняем дизайн сайтаю. Как создать свой сайт

Открываем браузер и набираем адрес нашего сайта - http://localhost/oboi. Сейчас наш сайт выглядит так:

Щелкаем по нему и попадаем в Менеджер шаблонов.

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

Для этого скачайте шаблон siteground-j15-1.zip к себе на компьютер. Теперь идем в администраторскую зону: Расширения - Установка и удаление

Нажимаем на кнопку Обзор, выбираем наш шаблон siteground-j15-1.zip и нажимаем на кнопку Закачать файл:

Через несколько секунд Joomla сообщает, что шаблон удачно установлен:

Переходим на вкладку нашего сайта, обновляем его и видим новый дизайн:

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

Предыдущий урок Вернуться в раздел Следующий урок

www.site-do.ru

Как изменить (отредактировать) шаблон 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 3.x Документация v3-2

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

Установка Joomla CMS

Проверьте выполнение всех подготовительных шагов и наличие требуемых программ.

Откройте браузер и пропишите путь к директории Joomla в адресной строке браузера (например http://your_domain_name/joomla). Должен появиться экран установки Joomla CMS:

Шаг 1 Configuration (Конфигурация сайта)

В выпадающем меню "Select Language (Выбрать язык)" выберите язык установки Joomla.

Внимание: выпадающее меню "Select Language (Выбрать язык)" позволяет выбрать лишь язык процесса установки Joomla. Данная опция не влияет на язык веб-сайта.

Нужно заполнить все поля формы в разделе "Main Configuration (Основные настройки)". Обязательные поля отмечены звездочкой *.

Заполните поля "Admin Email (Email администратора)", "Admin Username (Имя администратора)" и "Admin Password (Пароль администратора)" в правой колонке, чтобы создать пользователя нового веб-сайта Joomla с административными правами.

"Admin Email (Email администратора)", "Admin Username (Имя администратора)" и "Admin Password (Пароль администратора)" требуются для доступа в админ-панель веб-сайта Joomla Web. Храните их в надежном месте.

Рис 2. Установка. Joomla CMS. Шаг 1. Конфигурация сайта

Когда все данные введены, нажмите кнопку Next (Далее) в верхнем правом углу.

Шаг 2 Database (Конфигурация БД)

На втором этапе установки Joomla CMS необходимо ввести детали базы данных. Если они неизвестны, обратитесь к хостинг-провайдеру.

Поскольку Joomla устанавливается с нуля, нужно всего лишь ввести "Host Name (Название хостинга)", "Username (Имя пользователя)", "Database Name (Навзание базы данных)" и "Password (Пароль)". Остальные опции следует оставить по умолчанию, хотя возможны различия в зависимости от хостинг-провайдера.

Рис 3. Установка Joomla CMS. Шаг 2. Конфигурация БД

Когда введете детали, щелкните кнопку Install (Установить) в верхнем правом углу.

Шаг 3 (Overview) Обзор

Установка Joomla CMS почти завершена. На этапе Overview нужно определиться с установкой демо-данных Joomla.

Внимание: Демо данные необходимы, если требуется, чтобы веб-сайт Joomla выглядел полностью как на демо со всеми изображениями, текстом и настройками модулей. Для этого выберите демо-данные под названием "sample_theme###", где ### - это номер темы.

Выберите демо-данные для установки или нажмите "None (Нет)", если необходим пустой веб-сайт Joomla без содержания..

Рис 4-1. Установка Joomla CMS. Шаг 3. Overview (Обзор). Импорт демо-данных

Ниже можно проверить, являются ли детали конфигурации базы данных и доступа в админ-панель действительными, и отправить их на email.

Рис 4-1. Установка Joomla CMS. Этап 3. Обзор. Конфигурация

Можно проверить настройки установки и проверить соответствие хостинг сервера требованиям Joomla. Если присутствуют красные предупреждения в "Recommended settings (Рекомендуемые настройки)", обратитесь к хостинг-провайдеру за дальнейшей поддержкой.

Рис 4.Установка Joomla CMS. Шаг 3. Настройки сервера

По окончанию нажмите кнопку Install (Установить) в верхнем правом углу.

Шаг 4 Установка Завершена

Поздравляем! Вы установили Joomla

Рис 5. Установка Joomla CMS. Шаг 4. Установка завершена

С целью повышения безопасности удалите папку "Installation" из корневой директории Joomla .

Подсказка: Вы можете воспользоваться детальным видео туториалом Как установить движок Joomla 3

Внимание: если вы выполнили "Complete Installation (Полную установку)", можно пропустить разделы "Template Installation (Установка шаблона)", "Sample data installation (Установка демо-данных)" и "Extensions Installation (Установка расширений)", поскольку все эти элементы уже полностью установлены.

Теперь можно приступить к настройке веб-сайта Joomla CMS. Нажмите кнопку "Site (Сайт)" , чтобы открыть веб-сайт или "Administrator (Администратор)", чтобы перейти в админ-панель Joomla.