Головні новини
Ви тут: Головна / Завантажити / Шаблони сайтів / Шаблони joomla / Шаблон JA Elastica від JoomlArt

Шаблон JA Elastica від JoomlArt



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

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

Завантажити Шаблон безкоштовний, скачати можна з Оф.сайту

Цей шаблон в першу чергу цікавий тим, що він “як би гумовий”. Сам шаблон зверстаний на CSS сітці grig, що має на увазі фіксовані розміри блоків, але в шаблон вбудований механізм адаптації на JQuery Masonry (розробник David DeSandro) під різні дозволи екрану, тобто він автоматично підлаштовує розташування колонок і блоків під то розширення на якому він (сайт) в даний момент відображається. Причому він підлаштовується під 4 типи розмірів, під розмір мобільного телефону (одна колонка, урізане головне меню), під розмір планшета (2 колонки більш розширене меню) і під розміри настільних дисплеїв. У шаблоні є додаткова 6-а колонка, яка з’являється тільки на екранах з розширенням більш ніж 1440рх по ширині.

І так почнемо.

Установка

Завантаживши основний архів з шаблоном ми знайдемо в ньому 4 папки. component, plugin, quickstart і template

У папці quickstart міститься дистрибутив Joomla 2.5 з вбудованим шаблоном і всім для нього необхідним. В інших трьох папках знаходиться сам шаблон, плагін T3 Framework і компонент “Менеджер розширень від JoomlArt” які необхідні для нормальної роботи шаблону. Якщо ви вирішили встановити шаблон в ручну, то спочатку встановіть плагін, потім компонент і в самому кінці сам шаблон з відповідних  папок. Установка йде як зазвичай, через менеджер розширень Joomla. Не забудьте перевірити чи включилися всі встановлені вами розширення.

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

Робочі позиції для розташування модулів:

position-7, position-5 – дві основні позиції, в яких і розміщуються всі блоки.
extra-col – та сама прихована колонка, яка з’являється тільки на широких екранах.
search і social – дві позиції у верхньому правому куті для розміщення блоку пошуку і соц.кнопок.
footer і footnav – 2 позиції внизу шаблону, на всю ширину.
debug – службова позиція для роботи режиму налагодження (використовувати не можна)

layouts

 

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

module-grid

Блоки можуть бути 5-ти кольорів червоного, чорного, фіолетового, синього і зеленого. За допомогою суфіксів ви можете надати будь-який потрібний вам колір.

module-highlight

 

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

module-badge-style

 

Ось приклад деяких суфіксів:

[пробіл]grid-double[пробіл]mod-contrast[пробіл]contrast-blue – це модуль буде 2-ї ширини, синього кольору

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

[пробіл] grid-tripple [пробіл] badge-hot – цей модуль білого кольору 3-ї ширини із зображенням бейджика з написом HOT

Шаблон дозволяє використовувати в налаштуваннях будь-які гугл -шрифти, включаючи кириличні, можна гнучко налаштовувати відображення блоку з контентом (включати або виключати на потрібних сторінках сайту), дуже гнучке головне меню (настроюється ширина випадаючих колонок, можливість додати модулі або зображення). У меню налаштувань шаблону безліч посилань на інструкції і відео уроки з використання, налаштуванні як шаблону, так і фреймворку Т3. Якщо у вас виникнуть питання, запитуйте – відповім. PS Так як я вперше написав подібний огляд-інструкцію і вона вийшла досить об’ємна, то хочу запитати у вас, шановні читачі, чи потрібно додати в цей пост інструкцію з налаштування верхнього меню цього шаблону (наприклад як самостійно перевизначити head шаблону, як налаштувати гугл-шрифти для кирилиці)



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers