Your SlideShare is downloading. ×
Joomla! Day 2011 T3 framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Joomla! Day 2011 T3 framework

874
views

Published on

How to use T3 framework to create better templates.

How to use T3 framework to create better templates.

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
874
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Юрий Боев
  • 2. ВъведениеJA T3 Framework e трета генерация фреймуърк, създаден от JoomlArt.В 2.0 версията са добавени нови възможности като профили, плъгини,теми, нова структура, мобилни теми, както и нова меню система – Мегаменю.Фреймуъркът се състои от шаблон (JA T3 Blank) и плъгин (JA T3Framework Plugin)Демо: http://demo.t3.joomlart.com/joomla17/index.php/homepage
  • 3. Какво ново във версия 2.0• Представяне на Профилите – ново начин за управление на изгледа на сайта, както и на други настройки на шаблона• Административният панел е с оновен изглед и AJAX управление• Модулярен код – скриптове, които не се използват не се зареждат• Вградени Кеш и CSS&JS компресия• Нова структура – новият плъгин се заема с фреймуърк функциите
  • 4. Структура на плъгина
  • 5. Структура на шаблона
  • 6. Представяне на Изгледи и Блокове• Изгледите представляват файлове, които отговарят за генерирания в сайта код на шаблона• Блоковете са файловете, които съдържат модулните позиции, съдържат връзки към JS и CSS файлове и подготвят HTML генерирането на съдържанието на сайта: header, footer, pathway и др. модулни позиции се извикват в стандартните шаблони във файла index.php, а тук се извикват от отделни файлове• Главната идея на фреймуърка е уеб сайта да използва един шаблон, но с различни изгледи за всяко едно меню: различен изглед за блог страницата, за страницата с продукти, за началната страница и т.н., което до голяма степен е имплементирано вече в Joomla 1.7• Изгледите могат да бъдат редактирани в администрацията на шаблона, използвайки вградения редактор
  • 7. Стандартен изглед
  • 8. Изглед за мобилни устройства Изглед за мобилни устройства Изглед за iPhone
  • 9. Основни параметри на блоковете• Име на блока • <block name=“top”…> • Този атрибут служи за идентифициране на блока, тъй като има голяма възможност няколко блока да имат един и същи вид• Вид на блока • <block name=“header” type=“header”…> • Този параметър се използва за задаване на поведението и функционалността на блока и отговаря на имената на РНР файловете: • head.php • header.php • middle.php • footer.php
  • 10. Основни параметри на блоковете• Стил на блока • <block name=“top” style=“JAxhtml” …> • Този параметър определя изгледа на всички модули в даден блок. Тези стилове се дефинират в modules.php, намиращ се в your_site/plugins/system/jat3/base-themes/default/html Списъкът с предифинирани стилове е следният: - no style – към изгледа на модула се добавя само CSS класа на модула - raw – изчистен стил на модула – без ограждащи дивове или CSS класове - xhtml – основно използван за макро блокове като header, footer… - JAxhtml – нормален дизайн на модулите - Jarounded – заоблен стил на модулите
  • 11. Добавяне на допълнителни дивове• Код на блока • <block name=“top” markup=“2” …> • Нов параметър, чрез който се генерират допълнителни ограждащи дивове в началото и края на блока. markup=“1” е стандартна стойност
  • 12. Добавяне на допълнителни дивове• Код на блока • <block name=“top” markup=“3” …> • Добавя два допълнителни дива
  • 13. Добавяне на вътрешни дивове• Код на блока • <block name=“top” block-inner=“3” …> • Добавя допълнителни дивове, които ограждат блока.
  • 14. Добавяне на вътрешни дивове• Код на блока • <block name=“top” main-inner=“2” …> • Добавя допълнителни дивове, които се вграждат в main блока.
  • 15. Добавяне на вътрешни дивове• Код на блока • <block name=“top” wrap-inner=“2” …> • Добавя допълнителни дивове, които ограждат main блока.
  • 16. Премахване на дивове• Код на блока • <block name=“header” no-wrap=“1” …> • Премахва <div class=“wrap”> от всеки макро блок, който заема цялата ширина на шаблона (header, mainnav, middle, footer…)• Код на блока • <block name=“header” no-main=“1” …> • Премахва <div class=“main”> от всеки макро блок, който заема цялата ширина на шаблона (header, mainnav, middle, footer…)
  • 17. Широчини колоните• Широчина на средната колона • <block name=“middle” type=“middle” colwidth=“20” …> • Чрез този параметър се задава широчина на колоните в средната колона. Напр. Лявата и дясната ще имат широчина от по 20%, а основната колона ще заеме останалите 60%• Широчина на определена колона • <block name=“right” width=“25” …> • По този начин дясната колона ще заеме 25% от основната широчина на сайта
  • 18. Позиции в центъра на шаблона• Стандартни колони • Стандартно разположените в центъра колони са left, main и right. Те могат да бъдат разположени в различна последователност:
  • 19. Позиции в центъра на шаблона• Активиране на mass позициите • Активирането на допълнителните позиции над или под лявата, дясната или централната колона се извършва така:
  • 20. Spotlight параметри• Total width • <block name=“bottom-spotlight” type=“spotlight” totalwidth=“95” …>user6,user7,user8,user9,user10</block> • Тази настройка ще презапише стандартната ширина от 100%• Custom width • <block name=“bottom-spotlight” type=“spotlight” special=“user6” specialwidth=“25” …>user6,user7,user8,user9,user10</block> • special=“user6” – дефинира на кой модул ще бъде зададена специална широчина • specialwidth=“25” – дефинира широчината на модула
  • 21. Въпроси?
  • 22. Благодаря ви!