Створення шаблону Joomla за 6 кроків

Загальна структура даних шаблону була побудована на попередньому уроці і настав час визначатися з формою виведення.

Використовуємо CSS сітку

Шаблон уроку матиме фіксовану ширину. В даний час є тенденція використовувати в дизайні веб-сторінок три типи шаблонів: шаблон з фіксованою шириною, гумовий шаблон і еластичний шаблон.

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

Ідея полягає в тому, щоб побудувати зовнішній вигляд шаблону за допомогою правил CSS. Таким чином можна досягти крос-браузерної сумісності шаблону та поділу даних та презентації. Скористайтеся системою 960.gs – робочим середовищем, яке дозволяє швидко створити просторову структуру шаблону. На сайті RUSELLER.COM є уроки, які розкривають можливості цієї системи. Для неї існує генератор CSS, за допомогою якого можна швидко і наочно створити набір стилів для потрібної структури сторінки.

У нашому шаблоні використовується сітка із 12 стовпців загальною шириною 960 px.

Заголовок сторінки розтягуватиметься на всі 12 колонок:

Для трьох основних розділів усередині контейнера ми створимо сітку:

Між колонками в сітку залишатиметься простір розміром 10 px. Воно генерується робочим середовищем 960.gs, а код сприймається всіма браузерами (зокрема Internet Explorer).

Після застосування класів до нашого шаблону розділ body файлу index.php матиме вигляд:

Файл CSSзгенерований для нашого шаблону системою 960.gs називаємо grid.css і розміщуємо в каталогі /RusellerSimple/css . Зазвичай немає необхідності стискати його сильно. Основна частина коду, важлива для нашого шаблону, виглядає так:

Все досить просто. Усі блоки зсуваються вліво, різна ширина елементів сітки встановлюється з урахуванням потрібного розміру базової комірки. У наших ґратах з 12 колонками grid_6 означає шість колонок, які матимуть ширину 460 px (з урахуванням відступу). Використання такої системи дає наочний приклад переваги CSS правил для форматування змісту над таблицею. Виходить менше коду та його легко підтримувати.

Щоб правила діяли в шаблоні файл grid.css необхідно підключити в заголовку нашого index.php відразу після підключення template.css :

CSS за замовчуванням

Весь вищезазначений код CSS стосувався лише розміщення інформації на сторінці. Потрібно подбати і про форматування тексту.

Додамо кілька загальних стилів і глобальне скидання до основного файлу template.css (файл з таким ім'ям підключається в основному файлі нашого шаблону index.php).

Цей код здійснює глобальне скидання CSS для нашого шаблону. Така дія допомагає досягти одноманітної роботи коду в різних браузерах.

Потім ми встановлюємо розмір шрифту 76%, знову ж таки для однакового відображення у різних браузерах. Для розміру шрифту використовуються одиниці em (1 em = розмір поточного шрифту документа) . Висота рядка встановлюється рівною 1.3 em. Використання одиниць em дозволяє забезпечити просте налаштування розміру шрифту сторінки без суттєвих спотворень шаблону.

Погляньмо, як виглядає наш шаблон після встановлення правил CSS. Для більшої наочності до лівої частини були додані модулі основного меню та формиреєстрації на сайті, а в праву – модуль з меню інформації про Joomla.

У заголовку сайту виведено його назву, сформовано три колонки, і вони розташовані поруч одна з одною.

На наступному кроці ми розберемося, як представляти модулі шаблону.

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/ Переклав: Сергій Фастунов Урок створено: 20 Червня 2011 Переглядів: 70639 Правила передруку

5 останніх уроків рубрики "Joomla!"

Короткий огляд файлу configuration.php для Joomla!

При переміщеннях або інших діях з сайтом під керуванням Joomla часто потрібно вирішити невеликі проблеми з налаштуванням шляхів, паролів, бази даних та інших основних моментів конфігурації. Більшість таких питань легко вирішується прямим редагуванням конфігураційного файлу configuration.php.

Використання капчі в Joomla 2.5

Назад використання популярних систем, таких як Joomla, WordPress або Drupal, є те, що спамери знають, як влаштовано програмне забезпечення. Тому цілком ймовірна ситуація, коли на сайті є велика кількість реєстрацій для спаму.

Встановлення та налаштування модуля новин для Joomla 1.7 AidaNews2 (Частина 2)

У цьому уроці ми навчимося встановлювати та налаштовувати дуже гнучкий модуль для відображення новин на Joomla 1.7

Встановлення та налаштування модуля новин для Joomla 1.7 AidaNews2 (Частина 1)

Створення шаблону Joomla за 6 кроків. Крок 6

В данномууроці ми закінчимо побудову простого шаблону Joomla.