Доброго времени суток, я столкнулся с кастомизацией шаблона на JA t3 Framework и решил поделиться некоторыми решениями.
Почему? - потому что часть информации на wiki-сайте - устарела. А также так как я далек от про, я рассматривал простые проблемы (такие вопросы часто возникают у новичков).
1. Берем quickstart или что вам более по душе, здесь:
http://www.joomlart.com/forums/downloads.php?do=cat&id=317 ++ если вы будете делать для Joomla 1.6 - то здесь:
http://www.joomlart.com/forums/downloads.php?do=cat&id=361 (ветка форума про 1.5, да и я делал под 1.5...поэтому с 1.6 сами как нибудь
)
2. Wiki ресурсы на эту тему (все на английском, но со скринами, местами с видео)
+
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/FAQs [внизу Вы найдете ссылки еще на 3 вики-статьи] + видео туториалы:
http://www.youtube.com/watch?v=NU2-a0lLKQ0 и
http://www.youtube.com/watch?v=u4GGnnvEjjM ++ (для тех кто не увидел)
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Overview [обзор фреймворка, есть ссылки где скачать актуальные версии]
++
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides [кастомизация блоков - ?tp=1 , и немного больше]
++
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Navigation [как сделать красиво меню, вставить туда видео и прочее]
UPDATE 09.04.11Нашел пару ссылок Ja T3 framework русский. Переводили через переводчик, слегка доделали.
++
http://vjoomla.ru/blogs/item/332-ja_framework.html++
http://vjoomla.ru/blogs/item/333-ja_t3_for-developer.html-- ниже описанное редактирование, и правда мудрено =) вариант с блоками, пожалуй, будет проще, но пока оставлю этот, так как времени написать про блоки нет.
UPDATE END3. Редактирование deault.php
Что мне было нужно? - добавить div выше хидера, и div ниже футера.
В вики статье написано, что файлы лежат то в local, то в core... на самом деле default.php на момент написания лежал здесь: /plugins/system/jat3/base-themes/default/page/default.phpОткрываем любым редактором и добавляем <div id="my_style"></div>
css стили сайта - /templates/
ja_t3_blank(название шаблона)/css/template.css
добавляйте в любое место
#my_style {бла бла бла ;}
css стили мега меню - /templates/ja_t3_blank/css/menu/mega.css
эта информация есть в вики, все данные там актуальны =) но на английском3.5 Пример (не знаю как назвать, 2 бэкграунда, что ли?)пусть 1й - фон - доски
2й фон - скатерть, причем верх и низ скатерти - как полагается, а середина тянется на всю высоту - которую занимают материалы.
Начнем с досок.
загрузите фон в /templates/ja_t3_blank/images
в
template.css находим
body#bd. (если нет - то пропишите)
body#bd {
background: url("images/ваш_фон.расширение_фона") no-repeat scroll center top; //здесь гуру могут поправить, вдруг что лишнего написал :D
}
Положим скатерть:
для того чтобы была верхушка и низ скатерти - добавим в default.php верхний и нижний дивы, а также добавим стили, где зададим им бэкграунды.
Открывайте /plugins/system/jat3/base-themes/default/page/default.php
Верх: после
<body id="bd" class="<?php if (!T3Common::mobile_device_detect()):?>bd<?php endif;?> <?php echo $this->getBodyClass();?>">
напишите
<div id="skat-header"></div>Низ: ищите похожий код
</div>
<div id="skat-bottom"></div> (прописываем здесь)
<?php if ($this->isIE6()) : ?>
<?php $this->showBlock('ie6/ie6warning')?>
<?php endif; ?>
Дивы добавлены, теперь правим CSS.
Открывайте: /templates/ja_t3_blank/css/template.css
добавляйте следующие строчки: (само собой то что, между { и } может быть иным)
#skat-header { background: url(images/skat-header.png) bottom no-repeat; //путь к верхней картинке
width: 1210px; //ширина
margin: auto; //центрирование
height: 152px; //высота
}
#skat-bottom { background: url(images/skat-footer.png) top no-repeat;
width: 1210px;
margin: auto;
height: 143px;
}
Отлично, осталось сделать середину, которая у нас будет тянутся по высоте материалов.
Для этого вам потребуется однообразная текстура. Можно либо скачать, либо сделать самому. Однажды мне помогла эта статья:
http://www.milovsky.ru/photoshop/seamless_texture.phpИтак, текстура есть, положим ее =)
Загружаем ее в /templates/ja_t3_blank/images
И прописываем в template.css следующее (как обычно, Если такого свойства нет, то его можно создать, или поискать что то связанное с ja-wrapper)
body.fs3 #ja-wrapper {
background: url(images/skat_bg.png) repeat-y; } //repeat-y - будет дублировать текстуру только по высоте. Подробно тут [url=http://htmlbook.ru/css/background-repeat]http://htmlbook.ru/css/background-repeat[/url]
}
Вот и все. По такой схеме можно положить 2 бэкграунда + сделать путевый верх, низ и резиновую середину.
Здесь(
http://joomlaforum.ru/index.php/topic,131105.0.html) написано как убрать "cpanel", чтобы юзер не менял сам настройки, но там много лишнего, поэтому правильный вариант продублирую:
В настройках шаблона, в меню PROFILES, блок Параметры выставить галочку "скрыть":
Show/Hide Font Tools
Show/Hide Screen Tools
Show/Hide Profile Tools
Show/Hide Layouts Tools
Show/Hide Direction Tools
Show/Hide Menu Tools
Advanced Settings
P.S. это небольшое руководство, написано любителем для любителей =) здесь возможно есть ошибки и не очень верные советы, поэтому критикуйте - исправлю, чтобы было еще лучше.
Хотел бы видеть это в прикрепленных темах, если соответствует критериям.
P.P.S. - позже напишу про то, как сделать mega-меню полностью из картинок. (дизайнер нарисовал мне кнопочки - шрифт там под дизайн сайта заточен, следовательно простые надписи не прокатят)
Спасибо за внимание, делитесь своими решенями. Мне очень понравился этот фреймворк.
