Создание шаблона Joomla 3 с использованием bootstrap

  • 29 Ответов
  • 34886 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн lindim

  • ***
  • 34
  • [+]0 / [-]0
  • Пол: Мужской
  • Футбольный фанат
    • Просмотр профиля
    • Ахтырская доска объявлений
Добрый день, перечитав весь форум так и не смог найти НОРМАЛЬНОГО! руководства по созданию шаблона Joomla 3 с использованием bootstrap, где было расписано от а до я, что бы даже нубу было понятно.

<a href="http://ado.in.ua">Ахтырская доска объявлений</z>

*

Оффлайн Efanych

Создание сайтов, шаблонов, помощь в решении проблем.

*

Оффлайн lindim

  • ***
  • 34
  • [+]0 / [-]0
  • Пол: Мужской
  • Футбольный фанат
    • Просмотр профиля
    • Ахтырская доска объявлений
http://bootstrap-ru.com

ПОДЧЕРКИВАЮ: созданию шаблона Joomla 3! документацию по bootstrap я и так нашел!
<a href="http://ado.in.ua">Ахтырская доска объявлений</z>

*

Оффлайн RAZORG1991

ПОДЧЕРКИВАЮ: созданию шаблона Joomla 3! документацию по bootstrap я и так нашел!

Ну как бы тебе объяснить))) Скажи ты вообще когда-нибудь делал шаблоны на Joomla (неважно какой версии) самостоятельно с использованием чистого CSS, HTML и php?

*

Оффлайн lindim

  • ***
  • 34
  • [+]0 / [-]0
  • Пол: Мужской
  • Футбольный фанат
    • Просмотр профиля
    • Ахтырская доска объявлений
с нуля нет, переделывал готовый шаблон. :(. но хочется с нуля сделать.
<a href="http://ado.in.ua">Ахтырская доска объявлений</z>

*

Оффлайн RAZORG1991

с нуля нет, переделывал готовый шаблон. :(. но хочется с нуля сделать.
Создание обычного шаблона ничем не отличается от создания шаблона на bootstrap. Bootstrap - это всего лишь набор CSS стилей, точно таких как и в файле template.css. Просто файлы бустрапа подключаются в index.php шаблона и используются нужные тебе стили. Говоришь смотрел документацию бутстрап? - значит знаешь как его применять. Поэтому ищи материал по обычному созданию шаблонов Joomla. На заметку - создание шаблона Joomla 2.5 ничем не отличается от создания шаблона Joomla 3.0. Просто из бутстрапа легко применять сетку для верстки, чтобы сделать отзывчивый шаблон.
Вот собственно и все хитрости.

*

Оффлайн lindim

  • ***
  • 34
  • [+]0 / [-]0
  • Пол: Мужской
  • Футбольный фанат
    • Просмотр профиля
    • Ахтырская доска объявлений
Создание обычного шаблона ничем не отличается от создания шаблона на bootstrap. Bootstrap - это всего лишь набор CSS стилей, точно таких как и в файле template.css. Просто файлы бустрапа подключаются в index.php шаблона и используются нужные тебе стили. Говоришь смотрел документацию бутстрап? - значит знаешь как его применять. Поэтому ищи материал по обычному созданию шаблонов Joomla. На заметку - создание шаблона Joomla 2.5 ничем не отличается от создания шаблона Joomla 3.0. Просто из бутстрапа легко применять сетку для верстки, чтобы сделать отзывчивый шаблон.
Вот собственно и все хитрости.

спасибо, сейчас буду разбираться.
<a href="http://ado.in.ua">Ахтырская доска объявлений</z>

*

Оффлайн RAZORG1991

Вот тут http://likbez-net.ru/razrabotka-shablona-sajta-dlya-joomla-30.html можешь почитать про обычное создание шаблонов на Joomla 3.0. Достаточно не плохо написано как сделать минимальный рабочий набор полностью работоспособного шаблона.

Единственно, что еще добавлю: в папку CSS кидай CSS файлы бутстрапа (в этой же папке будет и твой файл template.css) и подключай их index.php, а в папку js - все js файлы бутстрапа. Или есть другой вариант: подключение бутстрапа из ядра, описано тут http://saity74.ru/joomla-base/139-podklyuchit-bootstrap-bez-standartnykh-stilej-joomla.html. Тогда тебе не надо вкидывать файлы бутстрапа  в свой шаблон. Но это годится только для 2-й версии бутстрапа, а уже вышел 3-й и он мне нравится несколько больше (но это чисто субъективное мнение).
Можешь вот эту темку почитать http://joomlaforum.ru/index.php/topic,273640.0.html - тут мы дискуссию вели по этому поводу, последнее слово за мной (и никто ничего не возразил))), значит все согласны)))
Решай сам на каком будишь делать свой шаблон. Отличий в бутстрапах 2-й и 3-й версии минимальны (это я к тому, что еще нет нормального перевода 3-й версии на русский), но в 3-м мне больше нравится система сеток (снова чисто субъективно) и есть еще некоторые интересные фишки. Смотрит тут http://getbootstrap.com
Еще такое замечание в index.php у тебя должен быть включен html5, а не html4, т.е. строчка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">должна выглядеть вот так:
<!DOCTYPE html> - и больше тулить сюда ничего не надо!

Единственно - браузеры бывают в таком случае не всегда правильно определяют кодировку. Тогда создаешь файл .htaccess (без всякого расширения) и пишешь там следующее:
AddDefaultCharset utf-8
AddCharset utf-8 *
<IfModule mod_charset.c>
    CharsetSourceEnc utf-8
    CharsetDefault utf-8
</IfModule>
Сохраняешь в utf-8 без bom и закидываешь в корень Joomla.
На этом пока все )))

*

Оффлайн lindim

  • ***
  • 34
  • [+]0 / [-]0
  • Пол: Мужской
  • Футбольный фанат
    • Просмотр профиля
    • Ахтырская доска объявлений
Спасибо огромное, вот такого ответа я ждал  :D
<a href="http://ado.in.ua">Ахтырская доска объявлений</z>

*

Оффлайн thesan

RAZORG1991
А вы когда подключаете в своем шаблоне бутстрап 3, то отключаете встроенный джумловский? Я смотрю по дефолту он грузится:
<script type="text/javascript" src="/media/jui/js/bootstrap.min.js">
Получается две версии подключено...
А то я тут мучаюсь с dropdawnmenu и подумываю отказаться пока от 3го бутстрапа.

*

Оффлайн RAZORG1991

RAZORG1991
А вы когда подключаете в своем шаблоне бутстрап 3, то отключаете встроенный джумловский? Я смотрю по дефолту он грузится:
<script type="text/javascript" src="/media/jui/js/bootstrap.min.js">
Получается две версии подключено...
А то я тут мучаюсь с dropdawnmenu и подумываю отказаться пока от 3го бутстрапа.
По дефолту в Вашем шаблоне он не должен грузится, если Вы его php командой джумловской не подключаете.
Выложите сюда все, что Вы написали между <head></head> в index.php вашего шаблона

*

Оффлайн thesan

Извините за долгий ответ, надо подписаться на тему.

Он по дефолту грузится в <jdoc:include type="head" />
там jquery, motools и bs.
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.min.css" />

<script type="text/javascript" src="/media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap.min.js"></script>
<?php $this->setGenerator(''); //SAN - unset meta generator?>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Joomla 3.2 у меня.
Был конфликт бутстрапа 3 и мутулс. Именно в dropdawn menu. Когда я кликал на пункт меню, он раскрывался, но потом при переходе на другой пункт - он пропадал. Тоесть ему присваивался стиль display:none. Погуглил, гдето на забугорном форуме написали что с мутулсом конфликт.
Я потом установил плагин (форумчане наши писали) который отключает motools, jwuery и бутстрап. В нем отключил, а в шаблоне сам подключил BS3 и JQuery. Сейчас вроде работает. Но беспокоит - нужен ли motools воотще гдето? вдруг что-то без него не будет работать?

*

Оффлайн b2z

  • *****
  • 7740
  • [+]739 / [-]0
  • Пол: Мужской
  • Разраблю понемногу
    • Просмотр профиля
    • NorrNext - расширения для Joomla! и Pagekit
Цитировать
Он по дефолту грузится в <jdoc:include type="head" />
По идее не должен грузится.

Цитировать
нужен ли motools воотще гдето? вдруг что-то без него не будет работать?
Его сейчас активно выпиливают из тройки, так что все должно работать на фронте. А вот в админке отключать не стоит.

*

Оффлайн RAZORG1991

Его сейчас активно выпиливают из тройки, так что все должно работать на фронте. А вот в админке отключать не стоит.

Согласен

Он по дефолту грузится в <jdoc:include type="head" />

Меня сейчас интересует не только head Joomla, а весь head. Я же написал все что между тегами <head></head> весь код
И за одно исходный код из браузера на выходе тоже между тегами <head></head> сюда выложите

*

Оффлайн sz

Еще такое замечание в index.php у тебя должен быть включен html5, а не html4, т.е. строчка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">должна выглядеть вот так:
<!DOCTYPE html> - и больше тулить сюда ничего не надо!

А можете подсказать, в данном руководстве, на которое Вы ссылку дали в файле templateDetails.xml

Цитировать
DOCTYPE – это очень важный параметр, на основании которого браузер решает, как ему отображать эту страницу.

<!DOCTYPE install PUBLIC "-//Joomla! 3/0//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/3.0/template-install.dtd">

Тоже надо менять на HTML5? И каким образом это сделать?

*

Оффлайн ELLE

в templateDetails.xml DOCTYPE не нужен. можно удалить эту строчку

*

Оффлайн sz

в templateDetails.xml DOCTYPE не нужен. можно удалить эту строчку
Благодарю, а у Joomla есть подробные руководства о создании шаблонов с детальным описанием что и как реализовано в связке административный раздел - веб сайт и как оно работает, желательно ориентированные на довольно низкий уровень знаний в области создания веб-сайтов.
« Последнее редактирование: 20.12.2013, 01:23:54 от sz »

*

Оффлайн ELLE

[topic=269673]
почитайте, общие принципы там описаны

для версии 3.x в принципе тоже самое
можете погуглить еще, информации предостаточно, но принцип один и тот же, +\- какие-то нюансы

*

Оффлайн thesan

Меня сейчас интересует не только head Joomla, а весь head. Я же написал все что между тегами <head></head> весь код
И за одно исходный код из браузера на выходе тоже между тегами <head></head> сюда выложите
Так я выше весь его и выложил. между тегами head.
А на выходе вот что:
<head>
  <base href="http://адрес_сайта.ru/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="ключевые слова" />
  <meta name="description" content="описание." />
  <title>титл</title>
  <link href="http://адрес_сайта.ru/?view=featured" rel="canonical" />
  <link href="/?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/templates/san/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/templates/system/css/system.css" />
<link rel="stylesheet" href="/templates/system/css/general.css" />
<link rel="stylesheet" href="/templates/san/css/template.css" />
<link rel="stylesheet" href="/templates/san/css/bootstrap.min.css" />
<script type="text/javascript" src="/media/jui/js/jquery.min.js"></script>
<script type="text/javascript" src="/templates/san/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Но это уже с отключенным с помощью плагина жумловских мутулс, бутстрап и jquery.
Включить их и показать код?

*

Оффлайн RAZORG1991

Включить их и показать код?

Ну можно впринципе

*

Оффлайн Ak4545

Спасибо огромное, вот такого ответа я ждал  :D
Спасибо огромное, вот такого ответа я ждал  :D
  не знаю это может не актуально уже но тем не менее делюсь http://www.youtube.com/playlist?list=PL1iqqU_TajIeLuhMrfQHuF4BuiVzL8Tds 

*

Оффлайн judedc

https://youtu.be/OyTYmctSf_E?list=PL1iqqU_TajIeLuhMrfQHuF4BuiVzL8Tds - Отличное руководство по созданию шаблона на bootstrap 3 для Joomla 3x ))))
Кто сможет преодолеть себя, избавится от боли бытия...

*

Оффлайн AtomU235

RAZORG1991
А вы когда подключаете в своем шаблоне бутстрап 3, то отключаете встроенный джумловский? Я смотрю по дефолту он грузится:
<script type="text/javascript" src="/media/jui/js/bootstrap.min.js">
Получается две версии подключено...
А то я тут мучаюсь с dropdawnmenu и подумываю отказаться пока от 3го бутстрапа.

Штатный бутстрап подключается при выводе иконок (печать, мыло и т.п.) вот в этом файле
layouts\joomla\content\icons.php
строка 12:
JHtml::_('bootstrap.framework');

Возможно и не только в этом :)

У меня была похожая проблема с dropdown-toggle. Решил оставлением штатного допиленного bootstrap.min.js. Подключаю только файл CSS от 3 версии. Проблем пока не заметил

*

Оффлайн buyanov

  • ***
  • 183
  • [+]27 / [-]1
  • Пол: Мужской
  • Сайты 74
    • Просмотр профиля
    • Сайты 74
Всем привет!

Хочу предложить свое решение подобных вопросов.
head в Joomla очень спорная вещь, вроде удобно, но иногда ужасно бесит ))))
Основная мысль (весьма радикальная) это отказаться от head и заменить его например на myhead, тогда для Joomla нужно сделать соответствующий рендерер, например
Код: (php) [Выделить]
class JDocumentRendererMyHead extends JDocumentRenderer {...} Рендереры Joomla лежат тут: (/libraries/joomla/document/html/renderer)

Почему рендерер? Меня натолкнуло на эту мысль вот что:
Идем в класс JDocument (/libraries/joomla/document/)
(это родительский класс для JDocumentHTML экземпляром которого является шаблон) и находим функцию loadRenderer

Код: (php) [Выделить]
public function loadRenderer($type)
{
$class = 'JDocumentRenderer' . $type;

if (!class_exists($class))
{
$path = __DIR__ . '/' . $this->_type . '/renderer/' . $type . '.php';

if (file_exists($path))
{
require_once $path;
}
else
{
throw new RuntimeException('Unable to load renderer class', 500);
}
}

if (!class_exists($class))
{
return null;
}

$instance = new $class($this);

return $instance;
}

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

В нем реализуем любые наши мысли и идеи и для подключения потом используем
вместо
Код: (php) [Выделить]
<jdoc:include type="head" />вот такое
Код: (php) [Выделить]
<jdoc:include type="myhead" />
Я немного ужал рассказ =) Потому что у себя я еще использую обертку для класса JDocumentHTML, потому как использую вместо jdoc синтаксис HAML... (кто-то скажет что мои вкусы очень специфичны ;), но уж больно мне он понравился, лучшей альтернативы не придумать) и Joomla мне очень нравится  ^-^

Что в итоге:

  • + мы имеем свой гибкий рендерер для head
  • + можем использовать настройки из шаблона
  • + нет никаких плагинов, хуков, хаков, евентов и прочего добра ))))
  • + мы не вмешиваемся в ядро (упаси господь)

Применение:

  • + вырезать весь JS (да вообще весь) если я пишу свой проект то я юзаю Gulp и у меня в тоге 1 js файл и 1 CSS, чужого мне не надо.
  • + запретить все инлайновые скрипты и стили
  • + можно дописать jdoc footer и туда перетащить все JS например


Если я чет не совсем внятно написал, задавайте вопросы, если я хрень несу то тоже исправьте ))) Я таким способом пользуюсь весьма давно и пока лучшей альтернативы не нашел
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

*

Оффлайн buyanov

  • ***
  • 183
  • [+]27 / [-]1
  • Пол: Мужской
  • Сайты 74
    • Просмотр профиля
    • Сайты 74
Затрется при первом же обновлении. НЕЛЬЗЯ править ядро CMS. Учитесь обходиться только папкой шаблона. Если не хватает - пишите отдельно плагины, модули и компоненты.
Это наверно не к моему сообщению?  )))
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

*

Оффлайн Taatshi

Да блин... уже удалила - не туда ))
ВЕРСТКА, САЙТЫ ПОД КЛЮЧ, УДАЛЕНИЕ ВИРУСОВ, МИГРАЦИЯ НА JOOMLA 3  /  ОТЗЫВЫ 
Минимальная ставка за платные услуги 1000 рэ Связь: telegram - Taatshi, почта - Taatshi на яндексе.

*

Оффлайн buyanov

  • ***
  • 183
  • [+]27 / [-]1
  • Пол: Мужской
  • Сайты 74
    • Просмотр профиля
    • Сайты 74
Да блин... уже удалила - не туда ))
Ахха ))) бывает, а я уж думал что чет где-то наморозил )))) Перечитывать начал свое
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

*

Оффлайн Wedal

Осмелюсь предложить свою, пока еще не слишком большую серию статей: Создание адаптивного шаблона Joomla с использованием Bootstrap.

*

Оффлайн buyanov

  • ***
  • 183
  • [+]27 / [-]1
  • Пол: Мужской
  • Сайты 74
    • Просмотр профиля
    • Сайты 74
Мы практически отказались от Bootstrap =) Сетку только юзаем сейчас
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов - мой сайт, телега, Хостинг

*

Оффлайн Shustry

  • *****
  • 6707
  • [+]736 / [-]3
  • Пол: Мужской
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
А я и тут порекламирую отличную альтернативу — UIkit
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!