Форум русской поддержки Joomla!® CMS
06.12.2016, 04:47:16 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 30615 раз)
0 Пользователей и 1 Гость смотрят эту тему.
lindim
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34


Футбольный фанат


« : 23.09.2013, 16:44:20 »

Добрый день, перечитав весь форум так и не смог найти НОРМАЛЬНОГО! руководства по созданию шаблона Joomla 3 с использованием bootstrap, где было расписано от а до я, что бы даже нубу было понятно.

Записан
Efanych
Группа развития
*****

Репутация: +602/-0
Offline Offline

Пол: Мужской
Сообщений: 4319



« Ответ #1 : 23.09.2013, 16:51:30 »

http://bootstrap-ru.com
Записан
lindim
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34


Футбольный фанат


« Ответ #2 : 23.09.2013, 17:30:10 »


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

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #3 : 23.09.2013, 21:37:45 »

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

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

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34


Футбольный фанат


« Ответ #4 : 23.09.2013, 22:28:14 »

с нуля нет, переделывал готовый шаблон. Sad. но хочется с нуля сделать.
Записан
RAZORG1991
Давно я тут
****

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #5 : 23.09.2013, 23:02:15 »

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

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34


Футбольный фанат


« Ответ #6 : 24.09.2013, 09:22:06 »

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

спасибо, сейчас буду разбираться.
Записан
RAZORG1991
Давно я тут
****

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #7 : 24.09.2013, 10:21:05 »

Вот тут 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
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 34


Футбольный фанат


« Ответ #8 : 24.09.2013, 12:36:51 »

Спасибо огромное, вот такого ответа я ждал  Cheesy
Записан
thesan
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 43



« Ответ #9 : 17.12.2013, 15:21:02 »

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

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #10 : 17.12.2013, 21:20:28 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 43



« Ответ #11 : 19.12.2013, 10:49:11 »

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

Он по дефолту грузится в <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
Support Team
*****

Репутация: +709/-0
Offline Offline

Пол: Мужской
Сообщений: 7522


Разраблю понемногу


« Ответ #12 : 19.12.2013, 11:49:22 »

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

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

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #13 : 19.12.2013, 21:25:19 »

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

Согласен

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

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

Репутация: +0/-0
Offline Offline

Сообщений: 2


« Ответ #14 : 19.12.2013, 23:07:35 »

Еще такое замечание в 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
Support Team
*****

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #15 : 19.12.2013, 23:10:52 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 2


« Ответ #16 : 19.12.2013, 23:20:32 »

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

Репутация: +862/-0
Offline Offline

Пол: Женский
Сообщений: 4723



« Ответ #17 : 19.12.2013, 23:55:40 »

Руководство - создание шаблона для Joomla 2.5
почитайте, общие принципы там описаны

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

Репутация: +0/-0
Offline Offline

Сообщений: 43



« Ответ #18 : 20.12.2013, 00:29:24 »

Меня сейчас интересует не только 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
Давно я тут
****

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 350



« Ответ #19 : 20.12.2013, 10:25:14 »

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

Ну можно впринципе
Записан
Ak4545
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 3


« Ответ #20 : 01.02.2015, 17:53:26 »

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

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 41



« Ответ #21 : 02.05.2015, 23:02:58 »

https://youtu.be/OyTYmctSf_E?list=PL1iqqU_TajIeLuhMrfQHuF4BuiVzL8Tds - Отличное руководство по созданию шаблона на bootstrap 3 для Joomla 3x ))))
Записан
AtomU235
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 10


« Ответ #22 : 17.12.2015, 11:02:05 »

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

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

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

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

Репутация: +22/-0
Offline Offline

Пол: Мужской
Сообщений: 150


Сайты 74


« Ответ #23 : 13.02.2016, 12:49:29 »

Всем привет!

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

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

Код
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 все сделает сама.

В нем реализуем любые наши мысли и идеи и для подключения потом используем
вместо
Код
<jdoc:include type="head" />
вот такое
Код
<jdoc:include type="myhead" />

Я немного ужал рассказ =) Потому что у себя я еще использую обертку для класса JDocumentHTML, потому как использую вместо jdoc синтаксис HAML... (кто-то скажет что мои вкусы очень специфичны Wink, но уж больно мне он понравился, лучшей альтернативы не придумать) и Joomla мне очень нравится  Smiley

Что в итоге:

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

Применение:

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


Если я чет не совсем внятно написал, задавайте вопросы, если я хрень несу то тоже исправьте ))) Я таким способом пользуюсь весьма давно и пока лучшей альтернативы не нашел
Записан
buyanov
Осваиваюсь на форуме
***

Репутация: +22/-0
Offline Offline

Пол: Мужской
Сообщений: 150


Сайты 74


« Ответ #24 : 13.02.2016, 14:58:27 »

Затрется при первом же обновлении. НЕЛЬЗЯ править ядро CMS. Учитесь обходиться только папкой шаблона. Если не хватает - пишите отдельно плагины, модули и компоненты.
Это наверно не к моему сообщению?  )))
Записан
Taatshi
Support Team
*****

Репутация: +430/-3
Offline Offline

Пол: Женский
Сообщений: 4717

Мама, я снова верстал во сне...


« Ответ #25 : 13.02.2016, 15:00:08 »

Да блин... уже удалила - не туда ))
Записан
buyanov
Осваиваюсь на форуме
***

Репутация: +22/-0
Offline Offline

Пол: Мужской
Сообщений: 150


Сайты 74


« Ответ #26 : 13.02.2016, 15:01:41 »

Да блин... уже удалила - не туда ))
Ахха ))) бывает, а я уж думал что чет где-то наморозил )))) Перечитывать начал свое
Записан
Wedal
Захожу иногда
**

Репутация: +13/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #27 : 22.03.2016, 09:32:49 »

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

Репутация: +22/-0
Offline Offline

Пол: Мужской
Сообщений: 150


Сайты 74


« Ответ #28 : 14.09.2016, 12:49:26 »

Мы практически отказались от Bootstrap =) Сетку только юзаем сейчас
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #29 : 14.09.2016, 13:53:00 »

А я и тут порекламирую отличную альтернативу — UIkit
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet