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

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5


Давно хотел поближе познакомиться с этим замечательным шаблоном основанном на T3 Framework и вот дошли руки. Ниже предлагаю вам небольшую инструкцию по использованию этого, без сомнения, интересного шаблона.

ДЕМО (поиграйтесь с размером окна брузера, вы увидите как шаблон автоматически адаптируется под него)

Мой тестовый сайт с установленным шаблоном http://dtkp.ru/

Шаблон бесплатен, скачать можно с оф.сайта http://www.joomlart.com/forums/downloads.php?do=cat&id=20433

Этот шаблон в первую очередь интересен тем, что он "как бы резиновый". Сам шаблон сверстан на CSS сетке grig, что подразумевает фиксированные размеры блоков, но в шаблон встроен механизм адаптации на JQuery плагине Masonry (разработчик David DeSandro) под разные разрешения экрана, то есть он автоматически подстраивает расположение колонок и блоков под то разрешение на котором он (сайт) в данный момент отображается. Причем он подстраивается под 4 типа размеров, под размер мобильного телефона (одна колонка, урезанное гланое меню), под размер планшета (2 колонки более расширенное меню) и под размеры настольных дисплеев. В шаблоне имеется дополнительная 6-ая колонка, которая появляется только на экранах с разрешение более 1440 рх по ширине.

И так начнем.

Установка

Скачав основной архив с шаблоном мы найдем в нем 4 папки.
component, plugin, quickstart и template
В папке quickstart содержится дистрибутив Joomla 2.5.4 со встроенным шаблоном и всем для него необходимым, но стоит учесть что эта версия Joomla не русифицирована и ее придется дополнительно обучить русскому языку.
В остальных трех папках находится сам шаблон, плагин T3 Framework и компонент "Менеджер расширений от JoomlArt" которые необходимы для нормальной работы шаблона. Если вы решили установить шаблон в ручную, то сначала установите плагин, потом компонент и в самом конце сам шаблон из соотв. папок. Установка идет как обычно, через менеджер расширений Joomla. Не забудьте проверить включились ли все установленные вами расширения.

Структура шаблона

Рабочие позиции для расположения модулей:
position-7, position-5 - две основных позиции, в которых и размещаются все блоки.
extra-col - та самая скрытая колонка, которая появляется только на широких экранах.
search и social - две позиции в верхнем правом углу для размещения блока поиска и соц.кнопок.
footer и footnav - 2 позиции внизу шаблона, во всю ширину.
debug - служебная позиция для работы режима отладки (использовать нельзя)



Основной блок контента расположен слева и имеет фиксированную ширину 3 блока (3х240 рх), блоки position-7, position-5, располагаются справа и автоматически распределяются по колонкам в зависимости от разрешения экрана, блок extra-col всегда раположен в крайней правой колонке и отображается на экранах более 1440 рх в ширину, в других случаях его не видно.
Сами блоки могут быть 3-х размеров, одинарного, двойного (суффикс: grid-double) и тройного (суффикс: grid-tripple) Для того что бы установить нужный размер блока на сайте вы должны указать CSS суффикс соответствующий нужной ширине, для одинарной ширины суффикс не нужен. Блок тройной ширины будет находится под блоком с основным контентом слева, но если экран шире 1440 рх, может перемещаться и в правые 3 колонки.



Блоки могут быть 5-ти цветов красного, черного, фиолетового, синего и зеленого. При помощи суффиксов вы можете назначить любой нужный вам.



И есть маленькая приятная штука, как небольшие бйджики вверху модуля, которые также при помощи дописывания суффикса можно добавить к блоку.



Вот пример некоторых суффиксов:

[пробел]grid-double[пробел]mod-contrast[пробел]contrast-blue - это модуль будет 2-ой ширины, синего цвета

[пробел]grid-double[пробел]mod-contrast[пробел]contrast-red[пробел]badge-photo - этот модуль будет 2-ой ширины, краного цвета и с изображением бйджа с фотокамерой

[пробел]grid-tripple[пробел]badge-hot - это модуль белого цвета 3-ой ширины с изображением бейджа с надписью HOT

Шаблон позволяем использовать в настройках любые гугл-шрифты, включая кирилические, можно гибко настраивать отображение блока с контентом (включать или выключать на нужных страницах сайта), очень гибкое главное меню (настраивается ширина выпадающих колонок, возможность добавить модули или изображения). В меню настроек шаблона множество ссылок на инструкции и видео уроки по использованию, настройке как шаблона, так и фреймворка Т3.

Если у вас возникнут вопросы, спрашивайте - отвечу.

P.S.
Так как я впервые написал подобный обзор-инструкцию и она получилась довольно объемная, то хочу спросить у вас, уважаемые форумчане, нужно ли добавить в этот пост инструкцию по настройке верхнего меню этого шаблона, по переопределению макетов вывода некоторых специфических частей шаблона (например как самостоятельно переопределить head шаблона, как настроить гугл-шрифты для кирилицы)
« Последнее редактирование: 21.07.2012, 13:59:59 от Marques »
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

Kocmoc

  • Осваиваюсь на форуме
  • 32
  • 2 / 0
Спасибо, очень нужный обзор! Строю сайт на этом шаблоне. И вся полезная информация очень нужна. Пиши еще. Очень интересует модуль "Хлебные крошки" (вроде так он называется. В стандартных шаблонах для него выделена своя позиция. В этом пока пришлось ограничится отдельным блоком на всех страницах, что не очень красиво. Еще у шаблона есть конфликт c  jQuery VirtueMart 2. (не появляется окно при добавлении товара в корзину). Причем если выключить  jQuery в VirtueMart, ошибка не исчезает, если убрать загрузку jQuery из шаблона, то окно появляется. Пока не решил данную проблему.
« Последнее редактирование: 10.07.2012, 06:34:38 от Kocmoc »
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Kocmoc, спасибо за ответ.

По поводу "хлебных крошек" - есть такая беда, но можно выводить этот модуль в блоке контента с помощью плагина "Загрузка модулей" используя в тексте статьи {loadposition} или {loadmodule}, хотя конечно это не так удобно, как с отдельным модулем. Количество позиций в этом шаблоне не спроста ограничено 3 рабочими и 2 нижними, это сделано для нормальной работы "главной фишки" шаблона, его адаптивности.

По поводу jQuery - скорее всего здесь конфликт нескольких одновременных подключений jQuery, так как сам шаблон использует библиотеку jquery-1.6.4.min.js и скрипты на ней. Попробую поглядеть как там обстоят дела, если что-то найду - напишу.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

Kocmoc

  • Осваиваюсь на форуме
  • 32
  • 2 / 0
Можно наверно попробовать выводить вверху каждой страницы, но для этого нужно вставлять код в каждый шаблон каждого компонента (Virtuemart: шаблон категории, шаблон страницы товара, корзина и т.д., В K2 то же самое). Сейчас есть 5 компонентов, а еще планирую 2 и в каждом вставлять эти хлебные крошки наверно муторно. Но пока на это нет время.  
Да в VirtueMart тоже вроде используется jquery-1.6.4.min.js.
Еще есть косяк в шаблоне. Страница корзины VirtueMart отображается контент блок, а все модули на этой странице отображаются под ним в один ряд. Такая же ошибка на странице описания фирмы в компоненте mosets tree 2.2.4, колонка extra при этом загружается на своем месте.    ,  
« Последнее редактирование: 10.07.2012, 16:11:10 от Kocmoc »
*

Kocmoc

  • Осваиваюсь на форуме
  • 32
  • 2 / 0
Не знаю понятно ли объяснил  ^-^ ::)
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Видимо так обрабатывает блоки скрипт перемещающий блоки в зависимости от ширины дисплея, весь шаблон рассчитан на то, что будут использованы простые HTML блоки. Хотя я бы наверно не стал делать на этом шаблоне магазин на основе VirtueMart, для него есть и свои шаблоны (хотя сомневаюсь что есть с такими возможностями), но ваш опыт интересен.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

lamov

  • Новичок
  • 4
  • 0 / 0
спасибо большое за обьяснения!
вот меня интерисует вопрос: как добавить картинку с текстом в меню, как здесь?


Спасибо за уделенное мне время!
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Объясню подробно, но завтра (то есть сегодня, но ближе к обеду), ибо сейчас спать хочется.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Доброе утро всем, поделитесь пожалуйста psd лого шаблона, вроде в архивах нет, может искал плохо. И со шрифтами трабла, на оригинале все ок, а когда русский прописываешь то текст сыпется, я так понимаю из-за того что шрифты кириллицу не поддерживают, кто нить подобрал шрифт ? Футер можно как нить подправить, лишнее удалить ? Но самое главное как настроить RSS и постраничный вывод всех постов на главной, а то у меня сейчас только с одной категории выводятся. И еще спросить хотел, кто нить шаблон оптимизировал, ну там лишнее удалял, стили или еще чего  ^-^
P.S.: я не трололо и не спамер, просто шаблон очень понравился, с Joomla! работаю всего пару дней  ;)
« Последнее редактирование: 19.07.2012, 11:32:52 от melomaniac »
*

lamov

  • Новичок
  • 4
  • 0 / 0
melomaniac, я убирал пару ссылок с футера...они припрятаны по всем папкам, загемороился :)
использовал поиск по тексту в тотал коммандере, и редактил.

вообще, я вот первый раз с Joomla работаю (больше по Dle), разбираюсь, тяжело по-началу. Без обзора Marques уже б "памёр" :D
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Ну что ж, начнем с меню.
В верхнем меню шаблона можно выводить картинки, текст, flash, и многое другое, так как мы можем вывести там содержимое произвольного модуля.

Для того что бы вывести любую картинку (ну или все что понадобится) мы должны предварительно создать модуль "HTML-код" и в этом модуле, при помощи визуального HTML-редактора (так же как и при создании материала) выводим картинку нужного размера, пишем текст, если надо, добавляем нужные элементы (только не стоит увлекаться). Сохраняем этот модуль и запоминаем его название, но позицию для вывода не указываем (оставляем поле пустым), не забываем включить его.

Далее создаем основной пункт меню в  mainmenu (ну или как у вас называется верхнее меню), это пункт может быть любым, на ваш выбор. В этом, созданном нами пункте, делаем подпункт меню и назначаем ему тип "Разделитель", открываем "Parameters (JA Extended)" и начинаем настройку.

Show Title - Yes или No - выбираем нужно показывать заголовок или нет (для обычного пункта меню выбор No просто скроет весь этот пункт, для модуля - скроет его название)

Add Description - Здесь можно ввести дополнительный текст, который отобразится в пункте меню более мелким шрифтом (не обязательно)

Columns - по умолчанию 1 (это количество колонок выпадающего меню, без необходимости менять не стоит)

Group - группировка пункта (по умолчанию No), для обыкновенного пункта меню обычно не применяется, но для нашего пункта (вывод модуля) нужно обязательно включить эту настройку - выбираем Yes

Submenu Width
Submenu Column Width
Submenu Column Width
- это настройка ширины выпадающего пункта меню, ширины колонок, и кокретной ширины каждой из колонок (если есть) - по умолчанию значения не указаны, определяются автоматически.

Additional class - необязательный параметр, добавляет кастомный класс, его торогать мы не будем

Submenu Content - ну и самый главный, для вывода модуля, пункт, выбор способа показа пункта меню. Имеет 3 типа:
    
    Child menu items - значение по умолчанию, выводит пункт меню как обычно, простое название.
    
    Modules - Выбор модуля который будет выводится в выпадающем меню. Отмечаем этот пункт и ниже в Select Modules выбираем созданный нами модуль по его названию.
    
    Module positions (при использовании русского языка в админке, может не иметь названия, глюк шаблона.) - выбрав эту настройку можно вывести опубликованный модуль с определенной позиции шаблона, дйствует так же как предыдущая настройка, но выводить модуль (модули) которые находятся в позиции, которую вы можете выбрать в списке ниже Select Positions

Ну вот в принципе и все. Можно выводить любые модули, но их отображения в некоторых случаях придется править в CSS, например можно вывести таким образом модуль входа в систему (mod_login), назвать корневой пункт меню "Вход", а подпунктом для него сделать вывод модуля входа и тогда при наведении курсора на пункт меню "Вход" - будет выпадать форма входа на сайт, или кнопка выхода, если вы уже авторизованны.
« Последнее редактирование: 19.07.2012, 23:09:41 от Marques »
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Доброе утро всем, поделитесь пожалуйста psd лого шаблона

PSD там нету, там есть просто картинка с лого называется logo-trans.png находится в /templates/ja_elastica/images/logo-trans.png

И со шрифтами трабла, на оригинале все ок, а когда русский прописываешь то текст сыпется, я так понимаю из-за того что шрифты кириллицу не поддерживают, кто нить подобрал шрифт ?

По поводу шрифтов (включения возможности выбирать кирилицу) напишу чуть позже, часика через 2, так как тема довольно интересная и не на пару слов.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Всем спасибо, буду потихоньку разбираться что да как. Чуть позже еще загляну. А psd могли и положить, да не все так безоблачно как казалось, для меня просто лого важно так как дизайнер с меня не очень, код еще можно подправить, а вот рисовать лого это будет что-то ^-^ Никак не пойму как вывести все новости на главной, а то у меня сейчас выводятся только с категории blog, хотя категорий несколько  !
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Да, сегодня не успеваю рассказать про подключение русских шрифтов... может быть к ночи или завтра. Про лого расскажу отдельно, а новости - просто сделайте главную страницу "Избранные материалы" выберите в настройке все категории (ну или те, которые нужны) и присваивайте новым материалам метку "Избранное". Это самый простой и гибкий вариант, есть еще несколько - на форуме об этом писали. Поищите.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Marques, спасибо  ^-^
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Пост о подключении Google Web Fonts и о том как подружить их с кириллицей.

Вообще-то странно, сам фреймворк (Т3) на котором сделан этот шаблон, вполне себе дружит с кириллическими символами, но вот создатели именно этого шаблона либо забыли его подружить с ними, либо просто русофобы. Ну да ладно... давайте разберемся.

Изменить шрифты в нашем шаблоне можно в настройке шаблона (менеджер шаблонов - клик на названии шаблона), на правой панели вкладка "PROFILES" блок "Google Font API Settings"
В этом блоке есть 8 типов шрифтов для разных областей шаблона, как то шрифты меню, шрифты основного контента или шрифты заголовков и так далее. Мы с вами выберем для экспериментов основной шрифт контента, который называется "Global".



После этого появится выпадающее окошко "GFont properties" в нем есть 3 основных строки:
 Font family - Выбор наименования шрифта (при начале набора текста (Англ.) появятся подсказки. Мы выберем шрифт Ubuntu
 Font variant - Вариант начертания (может быть один, а может и несколько. см. картинку ниже)
 Font subset - И самый главный для нас параметр, набор символов. Здесь нам надо обязательно выбрать cyrillic, иначе кириллица не будет отображаться у нас на странице. Также надо отметить, что не все символы имеют в своих наборах кириллицу, там где она есть, этот параметр будет доступен. Подробнее - http://www.google.com/webfonts/



Варианты начертания символов:



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

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

Открываем файл css.php который находится в :

ваш_сайт/templates/ja_elastica/blocks/css.php

и находим там строку 45 (примерно)

Код: php
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=<?php echo $gfonts ?>" />

эту строку нам нужно заменить на строку из файла фреймворка (или просто скопируйте строку которая расположена ниже) который находится в :

ваш_сайт/plugins/system/jat3/jat3/base-themes/default/blocks/css.php

и там ищем 94 строку :

Код: php
<link rel="stylesheet" type="text/css" href="<?php echo $protocol; ?>://fonts.googleapis.com/css?family=<?php echo $gfonts, $subsets; ?>" />

Как вы видите, в строке из нашего шаблона нет переменной $subsets которая и отвечает за передачу этого параметра серверу Google при подключении шрифта. В принципе вы можете не искать второй фал, а просто скопировать полную строку в ваш css.php из шаблона прямо отсюда.

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

Спасибо за внимание.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Если вы нашли какие-либо ошибки в моих инструкциях - пишите в личку, я исправлю.

Шаблон установлен на моем тестовом сайте, можно посмотреть на примере.

http://dtkp.ru/
« Последнее редактирование: 20.07.2012, 21:26:47 от Marques »
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

lamov

  • Новичок
  • 4
  • 0 / 0
еще появился вопрос, не знаю как решить..
в некоторых созданных категориях или материалах, блоки не выводятся вообще, не знаете, что может быть?
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Нужно смотреть привязку модулей к пунктам меню, это в настройках модуля, самый низ.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

lamov

  • Новичок
  • 4
  • 0 / 0
спасибо огромнейшее!!) только разбираюсь - убил целый день!
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Пожалуйста. Будут вопросы - пишите.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Если точнее, я делал так: идем в Расширения-Менеджер модулей, и там смотрим опубликован модуль или нет, плюс для каждого можно выбрать на каких страницах будет отображаться модуль. У меня сейчас другая проблема, т.к. главная  и само лого ведут на главную страницу, то пункт меню главная удалил, а как теперь сделать чтоб при клике по лого выводились все статьи не пойму  !
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Еще спросить хотел, в архиве в папке component лежит архив com_jaextmanager.v2.5.1.zip. Не подскажите для чего он нужен. Шаблон ставил с quickstarta  :o
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Пункт меню главная удалять нельзя, он должен быть по любому, его можно не показывать на сайте, этот пункт меню может быть где угодно, но он должен быть и быть включен. Иначе будут ошибки в работе движка. 

архив com_jaextmanager - это менеджер расширений от JoomlArt, в quickstart`е он уже установлен.
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

md_hedji

  • Осваиваюсь на форуме
  • 29
  • 3 / 0
Хотя я бы наверно не стал делать на этом шаблоне магазин на основе VirtueMart, для него есть и свои шаблоны
например можно?
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Примеров привести не могу, так как для интернет-магазинов предпочитаю другие CMS и в этом направлении с Joomla практически не работал. Но то что такие шаблоны есть, заточенные именно под вирт или JoomShopping знаю точно. Думаю в теме по электронной коммерции, на нашем форуме, вам расскажут больше. http://joomlaforum.ru/index.php/board,19.0.html
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

melomaniac

  • Новичок
  • 6
  • 0 / 0
Marques, добрый день, спасибо, хотел вам плюсик поставить, только вот никак не пойму как это сделать  ^-^
*

Marques

  • Завсегдатай
  • 1410
  • 190 / 9
  • Ctrl+F5
Маловато пока у вас еще сообщений, но все равно спасибо. :)
Зануда перфекционист, не признающий авторитетов, ищет легкую работу за большие деньги - http://dtkp.ru/ s@dtkp.ru
*

vv.leon

  • Новичок
  • 6
  • 0 / 0
Здравствуйте, уважаемый, Marques!
Подскажите из-за чего может не отображатся пункт меню в TOP
*

vv.leon

  • Новичок
  • 6
  • 0 / 0
и еще как вы добавили комментарии в контакте, что-то не получается...
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать свой шаблон quickstart?

Автор saiskyi

Ответов: 3
Просмотров: 5069
Последний ответ 19.02.2020, 19:29:01
от Bozhkov2
Как настроить шаблон?

Автор tromba

Ответов: 2
Просмотров: 2803
Последний ответ 15.08.2018, 15:29:56
от tromba
Как загрузить шаблон, и сделать его только для одной страницы?

Автор Ирина Поехали

Ответов: 5
Просмотров: 1651
Последний ответ 05.06.2017, 21:15:42
от effrit
Как вставить рекламу в мобильный шаблон ja_edenite?

Автор gorbi_U

Ответов: 3
Просмотров: 1428
Последний ответ 02.06.2017, 08:43:26
от gorbi_U
Шаблон JA_Edenite joomla2.5

Автор askvrk2

Ответов: 6
Просмотров: 2514
Последний ответ 29.05.2017, 09:29:08
от gorbi_U