Дизайн создаваемого сайта имеет большое значение. И даже не столько красивый шаблон, сколько удобство показа информации и элементов управления. Если пользователь не увидит кнопку регистрации на сайте, как только захочет зарегистрироваться, то велика вероятность того, что это желание у него пропадет. Таким образом, из-за неправильно построенного дизайна, будет потерян клиент или читатель. Сегодняшняя статья о том, как выбирать, устанавливать и использовать шаблоны Joomla.
«Твой Интернет». Часть 6. Управление дизайном Joomla.

Дизайн создаваемого сайта имеет большое значение. И даже не столько красивый шаблон, сколько удобство показа информации и элементов управления. Если пользователь не увидит кнопку регистрации на сайте, как только захочет зарегистрироваться, то велика вероятность того, что это желание у него пропадет. Таким образом, из-за неправильно построенного дизайна, будет потерян клиент или читатель. Сегодняшняя статья о том, как выбирать, устанавливать и использовать шаблоны Joomla.

Выбор шаблона Joomla

Сейчас в интернете можно найти просто огромное количество шаблонов Joomla. Условно их можно поделить на 2 категории:

  1. Бесплатные шаблоны
  2. Коммерческие шаблоны

Бесплатные шаблоны Joomla хороши прежде всего тем, что за них не нужно платить, а значит можно, как говориться, «спать спокойно». Но, как правило, их внешний вид сильно проигрывает коммерческим. Хотя и среди бесплатных шаблонов много достойных. Использовать такие шаблоны лучше для сайтов-порталов, где не нужен навороченный дизайн, а наоборот, требуется как можно больше свободного места под информацию и функционал.

Коммерческие шаблоны отличаются от бесплатных, прежде всего красивым дизайном (для некоторых есть техподдержка и другие приятные мелочи). Главный недостаток, соответственно ,  платность. В Интернете  довольно много сайтов, где коммерческие шаблоны можно скачать и использовать абсолютно бесплатно. Но в таком случае существует вероятность появления претензий от законного хозяина шаблона, а значит «спать спокойно» не получится.

Мое мнение - нужно использовать бесплатные шаблоны, дорабатывая их под свои нужды, либо брать платные и переделывать так, чтобы никто и не узнал. Тогда и претензий не будет. Лучшие из бесплатных шаблонов будут публиковаться на этом сайте в разделе «Шаблоны Joomla».

Управление шаблонами Joomla

Какой бы из шаблонов ты не выбрал, его правки под свои нужды не избежать. Установка шаблона проводится через пункт меню Расширения -> Установить/Удалить. В строке «Файл пакета» выбираешь архив с шаблоном и жмешь «Загрузить файл» Всё. Шаблон установлен. Для управления шаблонами Joomla нужно зайти в «Менеджер шаблонов» (Расширения -> Менеджер шаблонов). Появится список всех установленных шаблонов, в котором будет присутствовать и твой. Для того, чтобы назначить шаблон для сайта, ставишь точку напротив нужного и жмешь кнопку «По умолчанию» (в верхнем правом углу). Теперь сайт отображается в новой «шкурке».

Если при выборе шаблона нажать на ссылку с его названием, то появится окно настроек этого шаблона. Здесь ты можешь привязать его не ко всем, а только к определенным страницам сайта, и поменять некоторые параметры отображения (доступны не во всех шаблонах.) Главными же настройками являются кнопки «Редактировать HTML» и «Редактировать CSS» Редактор HTML позволяет изменять структуру частей сайта, расположение модулей и.т.д. В общем, он работает с «каркасом сайта». Редактор CSS отвечает за стилевое оформление. С его помощью можно менять цвета, шрифты и др.  С помощью этих редакторов с шаблоном Joomla можно сделать практически что угодно. Все зависит от того, насколько хорошо ты знаешь html и CSS. Если ты не знаком с этими технологиями, не отчаивайся. Когда я только начинал заниматься сайтами, то тоже не знал html и  css. Поскольку шаблоны уже написаны, придумывать код тебе не нужно, только подправлять. Для решения этой задачи существует инструмент, который очень сильно облегчает жизнь веб-мастерам. О нем далее...

Firebug для Firefox - лучшее расширение для веб-мастера

О том, что такое Firefox, ты, наверное, уже наслышан,  а возможно и используешь его сейчас, читая эту статью. Если нет - рассказываю. Firefox (скачать Firefox можно здесь) - браузер для просмотра страниц интернета (типа Internet Explorer). Свою известность он завоевал, прежде всего, огромным количеством различных расширений, для работы в Интернете. Одним из таких расширений является Firebug. Firebug позволяет при наведении курсора мыши на какой-либо элемент страницы видеть hml и CSS коды данного элемента. И, что еще более важно, меняя код, видеть как  меняется отображение элемента. В общем, лучше один раз увидеть. Устанавливай Firefox, затем через него заходи по этой ссылке и загружай Firebug. После установки и перезапуска Firefox в нижнем правом углу появится значок жука. При нажатии на него в нижней части всплывет окно. Если нажать кнопку Inspect (в последней версии вместо этой кнопки картинка фонарика) и поводить курсором по странице, можно видеть, как в нижней части меняется html-код (слева) и CSS-код (справа). Таким образом, даже не зная html и CSS, ты сможешь подредактировать код и добиться нужного тебе оформления (только не забудь, что изменения должны вноситься в редакторе, в настройках шаблона в админке).

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.4736842105263 1 1 1 1 1 4.47

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

0 # Таблицы!!!Kiri 20.10.2010 18:03
У меня тоже вопрос, прописал в CSS стиль для таблицы, выглядит вот так:
.param {width:100%; border-collapse:collapse;}
.th1 th {background:#6699cc; text-align:center; padding:3px 0 5px 1px; font-family:"Arial", Verdana, sans-serif; font-size:13px; color: #ffffff; border-right:0px solid #ffffff;}
.th2 th {font-weight:normal; text-align:center; padding:3px 0 5px; border-bottom:0px solid #6699cc; border-right:0px solid #F2EDE5;}
.param td {text-align:center; padding:5px 5px 5px 5px; font-size:11px; border-right:0px solid #ffffff;}
.param .sLine td {background:#e2edf9;}
.param .tLine td {background:#ffffff;}
.param .last {border-right:0;}
.th1 .first {background:#6699cc url(../images/tf.gif) no-repeat 0 0;}
.th1 .last {background:#6699cc url(../images/tl.gif) no-repeat 100% 0;}
.param p {margin:0; padding:0;}

здесь пример http://www.toursspecial.msk.ru/new/index.php/aviabilety/turcziya

Вопрос, возможно это как ни будь интегрировать видимо в TuneMsi или как там его или в joomla чтоб например др. человек не сидел и не прописывал теги () при редактировании раздела, а все делал через визуальный редактор? Помогите кто может пожалуйста! Буду учень признателен!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Таблицы!!!Wedal 21.10.2010 02:44
Kiri, есть такой редактор для Joomla - JCE. Он не только позволяет создавать таблицу прямо в визуальном редакторе, но даже вставлять таблицу из word'а, автоматически генерируя все теги. Правда есть косяки и у него, но еще одна отличная возможность:
вы создали таблицу, со стилями(вроде той, про которую писали). Далее в JCE нажимаем кнопочку отображения исходного кода. Появляется html-код таблицы. Просто копируем его. Создаем новый материал и опять же в режиме исходного кода вставляем. Вуаля, появляется наша таблица. Остается только заполнить ее в визуальном редакторе нужными данными.
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Таблицы!!!Kiri 21.10.2010 08:11
А чем он отличается от tyne mce ?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: RE: Таблицы!!!Wedal 22.10.2010 08:43
Kiri, попробуйте и сами все поймете.
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Таблицы!!!Kiri 21.10.2010 09:47
То есть как я понял, сделать это как в Ворде выбрать стиль таблице, невозможно?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: RE: Таблицы!!!Wedal 22.10.2010 08:44
Kiri, выбрать стиль - нет. Нужно его создать и потом копировать, либо поместить в CSS.
Ответить | Ответить с цитатой | Цитировать
0 # расширение для веб-мастераrobert 04.10.2010 13:17
Вот еще одно расширение для Лисы - Web developer, по моему даже превосходит Firebug.
Вот ссылочка https://addons.mozilla.org/ru/firefox/addon/60/developers.
Вообще если надо создать красочные шаблоны, для презентационных сайтов советую использовать прогу: artisteer.
Создает удивительные валидные шаблоны в стиле Web-2.
Программа платная ,но.. вы знаете, что делать дальше.

Спасибо админ за замечательный сайт,я здесь нашел себе фотогалерею которая мне была нужна.
У меня недавно был заказ на сайт с разными эффектами, ваш
Morfeshow всех устроил .
Я был готов выдернуть и выкинуть свой комп и в придачу свои горячие мозги, с балкона 12 этажа.
Ошпарил весь инет которая кишма кишит модулями, плагинами и компонентами joomla!
Потом залез на сайты великих интернет "горе" предпринимателей joomla , которые продают свои"великолепные уроки".
Думал все или я тупой или они кидают просто так всех.
Сегодня еще раз рискнул, набрал в поисковике Google длинное слово:
примеры установки простой и надежной фоото галереии на cms lommla! 1.5
И знаете, вы вышли в первой десятке .
С первого взгляда на сайт, я определил, что этот человек грамотен, здесь воды не будет, ,потому что дизайн не крикливый ,сайт не увешан спец моргалками или светофорами .
Как умный человек предоставляет материалы на скачку через бесплатный хостинг.
Огромное Спасибо за труд !!!
Ответить | Ответить с цитатой | Цитировать
0 # Быстрый старт с шаблономАнтон 20.08.2010 00:26
Зря не рассказываете про Quickstart - очень бы помогло многим. Я долго не мог понять, почему при закачке шаблона он не такой как на заявлнной картинке. Не сразу было ясно что дело в ДЕМО данных - о которых вы рассказываете в разделе об установке джумлы. Саму джумлу оказывается можно не качать (так как её демо данныме не ко всем шаблонам подходят), а установить всё с Quickstart шаблона - так проще получить изначально нужный дизайн.
Ответить | Ответить с цитатой | Цитировать
0 # QS - делюсь опытом далееАнтон 21.08.2010 23:30
Извините Виталий, если я отхожу от задуманных вами целей комментов: просто очень хочется поделиться опытом, там где у меня возникали вопросы, но ответ удалось найти самостоятельно.
Речь опять о Quick Start вариантах в скачиваемых архивах шаблонов. Как я уже говорил - такие архивы включают в себе и саму джумлу, и желаемый шаблон с собственными демо данными - это очень удобно, так как отдельно джумлу с её сайтом по умолчанию ставить не нужно (её демо данные могут не подойти к нашему шаблону). Но как правило скачиваемые шаблоны - иностранные, а иностранный производитель не включает Русский язык в разработку своего шаблона в QS, и в итоге после установки вебсайта (по вашему алгоритму части 4 этого раздела, только из архива QS шаблона, а не из архива джумлы 1.5.18-20), админка Джумлы получается на английском. Чтобы побороть этот недуг нам понадобится и QS архив шаблона, и архив Джумлы (например 1.5.20 - но тут наверное важно чтобы версия 1.5.хх джумлы в обоих архивах совпадала). Эти 2 арива будут иметь полностью идентичные папки и файлы. Находим в архиве джумлы папку administrator\language и переносим из неё папку русского языка (ru-RU) в идентичную папку в архиве QS шаблона. Затем делаем установку вебсайта из архива QS шблона (по алгоритму вашей 4-й части), и когда всё заработает, если админка ещё будет на английском, то в менеджере языков для администратора (в админке джумлы) уже будет доступен руский язык, который, собственно, выбираем по умолчанию.
Есть ещё папка language в головной директории архива джумлы, но она видимо к делу не относится (хотя я тоже копировал оттуда русский язык в идентичную папку QS). Тут тогда есть вопрос: "а к чему относится этот язык?"
Может кому-то в таком виде информация покажется слишко детально изжеванной, но по многим вопросам мне очень нехватает именно таких размусоленных деталей. И думаю я не один такой ;)
Ответить | Ответить с цитатой | Цитировать
0 # RE: QS - делюсь опытом далееWedal 22.08.2010 06:27
Антон, правильно, что вы делитесь информацией.

Что касается папок language, то тут вот что:
как известно, Joomla имеет два интерфейса, так называемые фронтэнд (frontend) и бэкэнд (backend). Frontend - внешняя, лицевая часть сайта, та, которую видят пользователи. Backend - внутренняя часть, админка. Та папка, которую вы копируете, переводит backend, а та, про которую задали вопрос - frontend. Вот и все.
Ответить | Ответить с цитатой | Цитировать
0 # Шаблон для JoostinaВиктор 08.08.2010 19:57
Цитирую Wedal:
Анна, эта ошибка возникает в 2 случаях:
1) Шаблон для Joomla 1.5, а вы используете Joomla 1.0
2) Архив ...


У меня наверно сходный проблем. Я пытаюсь работать с Joostina, надеялся что могу применить богатые knowhow и шаблоны для Joomla. Установил два Джумла-шаблона, но кнопка "По умолчанию" (там в админке оформление немножко различно) не срабатывает. Пока новичок в CMS и работаю на локалном. Можете ли посоветуете мне что-нибудь? До сих пор не нашел такой чудесный сайт о Joostina, как Ваш! (И простите меня за ошибки в тексте, для меня русский не родной язык).
Ответить | Ответить с цитатой | Цитировать
0 # RE: Шаблон для JoostinaWedal 09.08.2010 06:23
Виктор, могу посоветовать использовать Joomla 1.5, а в дальнейшем Joomla 1.6 (когда выйдет). Joostina это переделанная Joomla, которой за основной Joomla никогда не угнаться.
Ответить | Ответить с цитатой | Цитировать
0 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Я 31.07.2010 10:11
Цитата:
Firefox ... - браузер для просмотра страниц интернета (типа Internet Explorer)
Оооо. Это очень большой комплимент для ИЕ. Не ФФ - что-то типа ИЕ, а, скорее, наоборот: ИЕ - жалкое подобие ФФ и других нормальных браузеров. Только ИЕ8 стал более-менее адекватным, но от тормозов он так и не избавился.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Wedal 02.08.2010 06:32
Я, полностью согласен, но людям, понятия не имеющим о Firefox, так проще понять что это.
Ответить | Ответить с цитатой | Цитировать
0 # ПодпискаAlexander 02.07.2010 09:41
Хотел у Вас поинтересоваться как реализована email подписка на новые статьи на Вашем сайте? Каким модулем или компонентом?
Ответить | Ответить с цитатой | Цитировать
0 # RE: ПодпискаWedal 04.07.2010 03:56
Alexander, через feedburner.com
Ответить | Ответить с цитатой | Цитировать
0 # firebugTRSteep 27.05.2010 11:16
Использовал firebug, чтобы посмотреть как сделано, но что им можно править онлайн - не знал.
Пойду поковыряю, как раз все не могу сделать всплывающее меню на джумле + css
Ответить | Ответить с цитатой | Цитировать
0 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Анна 12.05.2010 09:01
Блоги для джумловодов? С community builder?? Было бы здорово!
Ответить | Ответить с цитатой | Цитировать
0 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Анна 12.05.2010 08:03
Хи. Я вот только сейчас наконец нашла, где можно зарегаться)
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Wedal 12.05.2010 08:09
Анна, это ерунда. Чистая формальность, не дающая особых преимуществ. Скоро откроется регистрация, где все будет намного интереснее.
Ответить | Ответить с цитатой | Цитировать
0 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Анна 12.05.2010 04:08
Все понятно. Спасибо! Файла TemplateDetails.xml в папке шаблона действительно нет. И не должно быть :) Я брала "Исходный шаблон". На котором вы показываете, как его превратить в джумловский.
Хочется же научиться, а не готовое брать.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Анна 08.05.2010 08:49
Вот здесь я застряла(
Взяла шаблон отсюда http://wedal.ru/shabloni_joomla/shablony-joomla-chast-3-delaem-pervyjj-shablon.html
Не знаю в какую папку положить. Просто создала папку и туда положила business_72.zip
Дальше иду Расширения/Установка, удаление/Установить/Закачка файла пакета/Выберите файл
Выбираю ваш zip, нажимаю "Закачать файл и установить", джумла пишет: "Ошибка, невозможно найти в пакете XML-файл установки.
Что я не так делаю? Может в какую-то конкретную папку нужно зип шаблона поместить? Или разархивировать предварительно?
Ответить | Ответить с цитатой | Цитировать
+1 # RE: RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.Wedal 08.05.2010 15:34
Анна, эта ошибка возникает в 2 случаях:
1) Шаблон для Joomla 1.5, а вы используете Joomla 1.0
2) Архив должен содержать в себе не вложенный в другие папки файл TemplateDetails.xml. Если его нет, то, возможно, шаблон заархивирован некорректно. Я поверю шаблон. А вы скачайте шаблон из последней статьи серии про шаблоны. Он работает правильно 100%.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: «Твой Интернет». Часть 6. Управление дизайном Joomla.оксана 26.03.2010 15:54
Помогите!!! У меня в категории, в разделе краткое описание и описание товара вместе с текстом выходит HTML описание, как все вернуть назад?
Ответить | Ответить с цитатой | Цитировать
0 # Firebugолег 27.02.2010 14:33
Firebug это конечно , хорошо. Но, все редактирование шаблона джумлы у меня так и заканчивается в окне этого расширения. В окне HTML виден редактируемый код, редактируется, но при попытке найти этот код и внести изменения в редакторе HTML , в настройках шаблона в админке, этот код не обнаруживается. Так как там уже файл index.php Как здесь быть? Джумла 1.5.15
Ответить | Ответить с цитатой | Цитировать
0 # RE: FirebugWedal 27.02.2010 17:50
олег, шаблон Joomla состоит из html+php. А до пользователя доходит только сгенерированная html-страница. Тут ничего не поделаешь. Нужно просто понимать что есть что в index.php.
Советую вам прочитать серию статей "Работа с шаблонами Joomla"
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 01.02.2010 12:35
Tom-tom, наверное, вы имеете ввиду Div'ы. Да, с ними действительно сложнее работать. В данном случае моя помощь может быть только платной. Если интересно - пишите в обратную связь.
Ответить | Ответить с цитатой | Цитировать
0 # Tom-tom 31.01.2010 12:01
Здраствуйте Wedal, во первых, спасибо за проведенную работу, сайт очень полезен, добавил к себе в закладки=) А вопрос у меня в следующем, есть шаблон html+css, отлично мне подходящий, заменить пару картинок и прям то, что я себе представлял=)Проблема в том что я его никак не могу подогнать под джумлу, дело в том что сверстан он не с помощью таблиц( и ) а с помощью тегов , как поступить в данном случае, я понятия не имею, при всех моих попытках "натянуть" его на джумлу, сбиваются все стили, появляется какая то каша. Надеюсь на вашу помощь=)
Ответить | Ответить с цитатой | Цитировать
0 # Алексей 30.01.2010 09:57
Кстати, подскажу небольшое багло на сайте - когда публикуешь комментарий, он попадает на предварительную проверку. Так вот, надпись, извещающая об этом пользователя, некрасиво налазит на пунктирную линию под именем пользователя. ФФ3, может в 3.5 все ок.
.................................
"Спасибо! Ваш комментарий ожидает проверки."

Пост публиковать этот не надо, так, на заметку:)
Ответить | Ответить с цитатой | Цитировать
0 # Алексей 30.01.2010 09:44
Что же, сложная задача не пугает. Ведь "дойти" до того, чтобы задать такой вопрос было тоже непросто:)
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 29.01.2010 10:22
Алексей, шаблон для Joomla - это тоже самое, что и скин для winamp'а или тема для Windows, в общем то, что меняет внешний вид сохраняя все функции.
"Натянуть свой дизайн" - довольно сложная задача. Ей посвящена серия статей "Работа с шаблонами Joomla"
Ответить | Ответить с цитатой | Цитировать
0 # Алексей 29.01.2010 08:15
Только начал разбираться с джумлой, поэтому вопрос может быть некорректным:
- если натягивать свой дизайн на джумлу, как быть в этом случае? Что имеется ввиду, под понятием "шаблон для джумлы"?
Ответить | Ответить с цитатой | Цитировать
0 # Reklaman.com 23.01.2010 10:31
А еще шаблоны можно устанавливать простым копированием папки с шаблонов в папку templates на сервере.
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 30.11.2009 20:25
Аааа нашла :) В настройках статей находится. Извиняюсь за панику :)))
Ответить | Ответить с цитатой | Цитировать
0 # Евгения 30.11.2009 19:47
У меня такой вопрос, может конечно не в тему... Как убрать отображение ссылки "Читать дальше". В джумле нашла только строчку, где можно сменить надпись. А как вообще ее убрать? Это же лишнее для сайта и дизайн портит (давно считается уже дурным тоном ссылки типа "Подробнее"), и раздражает, не знаю как других, но мне глаз режет :)
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 14.10.2009 22:48
Валера, возможно. Но есть ведь еще такое понятие, как "совесть". Да и компании, производящие профессиональные шаблоны, рано или поздно начнут отстаивать свои права и в нашей стране.
Ответить | Ответить с цитатой | Цитировать
0 # валера 14.10.2009 15:01
@о в таком случае существует вероятность появления претензий от законного хозяина шаблона, а значит «спать спокойно» не получится.@
________________________

как юрист скажу - доказывание что этот шаблон принадлежит автору очень сложно и имеет смысл только для сайтов уровня mail.ru
Ответить | Ответить с цитатой | Цитировать

Вверх