Не всі сторінки вашого сайту на Joomla можуть мати однаковий дизайн та виглядати однаково. Деякі сайти мають радикально різні колірні схеми та розташування основних блоків для різних розділів сайту. І Joomla дозволяє робити це.
У цьому уроці ми покажемо вам, як використовувати різні шаблони або різні стилі одного і того ж шаблону для різних розділів вашого сайту на Joomla.
Крок 1: Загальна інформація про шаблони Joomla
Joomla має три основні шаблони, встановлені за замовчуванням: Atomic, Beez5 і Beez2.
Ці три шаблони позначені як "Site" у стовпці "Location" та призначені для публічної частини сайту. Шаблони Bluestork і Hathor позначені як "Administrator" і призначені лише для адмінки. Ви також можете встановити інші шаблони сторонніх розробників або розробити або створити власний шаблон.
Один із шаблонів завжди позначений як використовується за умовчанням для зовнішнього сайту та один для адмінки. Щоб дізнатися, який із них використовується за замовчуванням, знайдіть золоту зірочку в колонці "За замовчуванням", як показано на малюнку нижче:
Ви можете змінити шаблон за промовчанням у будь-який момент, просто натиснувши на одну з порожніх зірочок, і тоді вона стане золотою, а відповідний шаблон за промовчанням.
При першому встановленні Joomla за замовчуванням встановлюється шаблон Beez2. Якщо натиснути назву шаблону, ви можете редагувати налаштування шаблону.
Як ви можете бачити в цьому прикладі, цей шаблон використовується за замовчуванням для всіхсторінок і не вимагає встановлення його для кожного пункту меню.
Крок 2. Виведення різних шаблонів на різних сторінках
Погляньмо на налаштування інших шаблонів і подивимося, як призначити його для певної категорії.
- Відкрийте Менеджер шаблонів
- Позначте Beez5 шаблон.
- Натисніть кнопку Редагувати.
- CMS встановлює різні шаблони на різних сторіноках, ґрунтуючись виключно на посиланнях меню. Перейдіть до розділу "Прив'язка до меню", і ви можете вибрати, для яких посилань меню цей шаблон використовуватиметься.
- Для пункту "За замовчуванням" встановлено значення "Ні", тому що в нас вже встановлено інший шаблон за промовчанням.
- Позначте прапорець навпроти потрібного пункту меню.
- Збережіть цю прив'язку до меню, а потім перевірте ваш сайт.
- Після збереження ви побачите, що у вас є Beez_20 шаблон, встановлений за замовчуванням.
- А шаблон Beez5 призначений (Assigned) на окремий пункт меню та позначений зеленою галочкою.
Ось так Головна сторінкавиглядає із шаблоном за замовчуванням - Beez2:
Зміна шаблону не впливає на зміст. Тим не менш, це змінить заголовок, логотип, оформлення та позиції модулів. Це означає, що ви не можете просто змінити шаблон, не виконавши деяку додаткову роботу.
Вам потрібно буде змінити логотип для обох шаблонів та позиції модулів відповідно до вашої загальною структуроюсайту.
Крок 3. Пояснення різних позицій модулів у різних шаблонах
Позиції модулів Beez5 (вгорі) та Beez2 (нижче) майже однакові, так що це не викликає великих проблем при зміні дизайну. Проте є й відмінності.
Однією з найбільш очевидних відмінностей між двома шаблонами є позиція модулів навколо логотипу. У Beez5 модулі position-1 та position-0 знаходяться нижче логотипу:
У Beez 2 модуль position-0 знаходиться над логотипом, а position-1 нижче:
Це досить незначна відмінність, але гарний прикладтого, як шаблони можуть відрізнятися за своїми позиціями модулів. У цьому випадку це досить простий приклад, тому що всі модулі мають однакові імена.
Але що робити, якщо позиції модулів абсолютно різні, у різних місцях під різними іменами?
- Поверніться до Менеджера шаблонів та прив'яжіть шаблон Atomic до іншої категорії.
- Ви побачите, що він має зовсім інші позиції модулів, їх ви можете подивитися на малюнку нижче:
На цій сторінці є лише такі позиції модулів:
- atomic-topmenu
- atomic-topquote
- atomic-search
- atomic-sidebar
- atomic-bottomleft
- atomic-bottommiddle
Якщо ви хочете, щоб цей шаблон був на вашому сайті, крім Beez2, то ви повинні зробити більше роботи.
Крок 4. Додаємо модуль меню для нового шаблону
- Вибираємо в меню Розширення > Менеджер модулів і натискаємо кнопку Створити.
- Вибираємо Меню.
- Прив'язуємо новий модуль до позиції atomic-sidebar.
- Нова функція Joomla 2.5 - поле Примітка. Це допоможе вам не заплутатися в модулях, при великій кількості.
- Тепер ми прив'язуємо модуль до певних сторінок.
- Вибираємо "Тільки на вибраних сторінках".
- Встановлюємо прапорець поруч із пунктом меню, який вам потрібний.
- Тепер у мене меню знаходиться у бічній панелі. Ви можете бачити, що це горизонтальне меню і місця для нього там обмаль. Ми маємо спробувати знайти для нього найкращу позицію.
- Перейдіть в Менеджер модулів та перемістіть меню в позицію atomic-topmenu. Тепер меню має виглядати як на малюнку нижче:
Я навів цей приклад просто для ілюстрації того, з якими проблемами ви можете зіткнутися, коли починаєте додавання шаблонів без попереднього дослідження.
Ви також можете використовувати копію наявного у вас шаблону як тему для альтернативного розділу або сторінки. Великою перевагою є те, що все буде в одному місці, і вам потрібно внести лише необхідні зміни з CSS, і це дозволить уникнути серйозних переробок.
Крок 5. Стилі шаблону vs Різні шаблони
Замість того, щоб використовувати різні шаблони для різних сторінок на вашому сайті, можна просто створити різні варіантиза замовчуванням шаблону. Це нова можливістьу Joomla 2.5. Вона дозволяє створювати різні варіанти дизайну на кожній сторінці без необхідності проходити всі кроки, які ми виклали вище.
- Переходимо до Менеджер шаблонів.
- Встановіть прапорець поруч із шаблоном, для якого потрібно створити копію. В даному випадку ми будемо використовувати Beez2.
- Натисніть на іконку "Дублювати".
- Встановіть прапорець поруч із Beez2-Default (2).
- Натисніть кнопку "Змінити".
- Beez2 поставляється з двома колірними схемами, Personal та Nature. Виберіть Nature зі списку.
- Прив'яжіть шаблон до категорії в розділі "Прив'язка до меню".
- Зверніть увагу, що там є інші опції, ви можете змінити також логотип, назва сайту, і положення навігації.
- Тепер у вас є один сайт із двома різними стилями одного шаблону, прив'язаними до різних пунктів меню.
- Ви також можете прив'язувати шаблон під час створення пунктів меню.
- Коли ви перебуваєте в Менеджері меню, можна встановити вподобаний варіант шаблону для цього пункту меню (див. нижче).
Якщо у Вас виникли питання, то для якнайшвидшого отримання відповіді рекомендуємо скористатися нашим
У цій статті показано - як зробити стандартний шаблон Beez_20 гумовим. Щоб незалежно від роздільної здатності екрана, сайт займав всю ширину екрана. Цей спосібперевірений на Joomla 1.7 та Joomla 2.5
Якщо використовується файловий менеджерхостинг-провайдера або FTP-менеджер, то треба знайти файл стилів " наш_сайт\templates\beez_20\css\position.cssЯкщо ж використовується Панель управління Joomla, то потрібно перейти в Розширення -> Менеджер шаблонів
Праворуч перераховані всі таблиці стилів шаблону Beez_20. Знаходимо рядок Змінити css/position.cssта натискаємо на неї. Відкриється вікно Менеджер шаблонів: Змінити файл.
Тут ми зможемо відредагувати цей файл.
Знаходимо ширину головного div'a. Вона дорівнює 1050px.
#all
{
margin: 0 auto;
max-width: 1050px;
padding: 0px;
text-align: left;
}
Змінюємо це значення на 100%.
#all
{
margin: 0 auto;
max-width: 100%;
padding: 0px;
text-align: left;
}
Потім у цьому файлі знаходимо ширину футера. Вона дорівнює 1020px.
#footer-inner
{
max-width: 1020px;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}
Змінюємо це значення на 100%.
#footer-inner
{
max-width: 100%;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}
Зберігаємо файл та заходимо на свій сайт – дивимося, що вийшло. Для того, щоб відразу побачити результат після зміни CSS, необхідно, щоб нові стилі браузер заново завантажив. Для цього натисніть Ctrl+R
Останнє, що потрібно зробити - це відкоригувати шапку. Після того як сайт розтягнувся на всю ширину екрану, картинка шапки змістилася вправо, а зліва з'явився синій прямокутник. Це сталося тому що ширина зображення становить 1060px. Картинка шапки знаходиться у папці “ наш_сайт\templates\beez_20\images\personal\personal2.jpg”. Можна створити свою картинку більшого розміру та замінити файл personal2.jpg на свій (ім'я файлу потрібно залишити personal2.jpg). Якщо немає відповідної картинки, можна вимкнути виведення картинки в таблиці стилів і вся шапка буде синього кольору.
Для відключення картинки нам потрібен файл із налаштуваннями стилів, який знаходиться за адресою " наш_сайт\templates\beez_20\css\personal.css". У ньому знаходимо:
Logoheader
{
background: #0c1a3e URL(../images/personal/personal2.png) no-repeat bottom right ;
color:#fff;
min-height:200px;
}
Видаляємо URL(../images/personal/personal2.png) no-repeat bottom right. Повинно вийти таке:
Logoheader
{
background: #0c1a3e;
color:#fff;
min-height:200px;
margin:0em 10px 0 10px !important;
}
Зберігаємо файл. От і все.
Перш ніж заглибитися в обговорення конкретно шаблону давайте ще раз спробуємо розібратися що таке шаблон joomla. У розумінні більшості користувачів, шаблон відповідає за зовнішнє оформлення сторінок вашого сайту. Однак шаблон це не тільки дизайн.
У нього також входять механізми, що визначають розміщення даних, способи та інтервали відображення різних модулів даних, мовні параметриі т.д.
У попередніх версіях Joomla використовувався базовий шаблон Beez. У останніх версіяхшаблони побудовані на його основі (Beez5, Beez_20) зазнали істотних змін порівняно з ним. Створюючи шаблон Beez розробники вкладали в нього можливі варіанти пристосування під будь-якого власника сайту. Вихідний кодшаблон можна було легко змінити. Внесення змін до каскадних таблиць стилів дозволяло з легкістю створити абсолютно новий шаблон оформлення, не витрачаючи значних зусиль. Але в процесі роботи дизайнери намагалися не користуватися цим шаблоном, а розробляли свої власні з нуля.
В результаті було розроблено два абсолютно нові шаблони для версії Joomla 2.5. В обох шаблонах використовується мова JavaScript, у шаблоні beez5 використовується мова HTML5, у шаблоні beez_20 не потрібні перевизначення. При верстці немає потреби використовувати таблиці. Було змінено назви класів каскадних таблиць.
Властивості шаблонів
Нові шаблони стали широко доступними, з'явилася можливість вибирати розташування блоку навігації на сторінці, додані функціональні мітки WAI-ARIA, модулі у вкладках можуть виводитися в автоматичному режимі, додані позиції, що згортаються для модулів і для колонок, в шаблоні beez_20 вбудовані дві форми оформлення: natural і human, додана підтримка мови HTML5 в шаблоні beez5.
Ні для кого не секрет, що існують люди, у яких ослаблені можливості сприйняття навколишнього світу. Хтось не здатний до візуального сприйняття, хтось обмежений до сприйняття звуку. Однак ці люди також користуються інформаційними ресурсамиІнтернет. І всі створювані інтернет-портали повинні бути розраховані і на цю категорію користувачів. Шаблони Joomla мають всі необхідними інструментамищоб забезпечити людей з обмеженими можливостями можливістю користування мережею Інтернет.
При створенні шаблонів необхідно дотримуватись основних вимог: матеріали сайту не повинні перетинатися з оформленням цих матеріалів, структура сайту не повинна бути перевантажена, переходи по сторінках сайту мають підтримуватись командами з клавіатури, колірне оформлення контенту має бути контрастним.
Найбільш важливим моментом з погляду розробника є розподіл контенту від оформлення. Для цього необхідно позбавитися табличного оформлення матеріалу на сторінці. Для форматування використовується лише CSS. Матеріал необхідно шикувати лінійно зверху вниз.
Семантичне оформлення дозволяє здійснювати перехід між сторінками сайту на основі заголовків, списків тощо, а також складати загальне уявлення про матеріал документа.
Однак, при лінійному оформленні вмісту сторінки є недолік - щоб дістатися необхідної інформації може знадобитися час (якщо інформація міститься внизу сторінки). Для вирішення цієї проблеми можна використовувати закладки HTML для прискорення переміщення сторінкою. У цьому випадку передбачається створення додаткового меню для переміщення сторінкою. Для тих хто вже знайомий зі структурою сайту це меню можна приховувати.
Наприклад:
- Перейти до основного тексту.
- Перейти до основного блоку навігації та увійти до системи.
Під час створення сайту необхідно приділити увагу колірній гамі в оформленні. Якщо для звичайного користувачаСуттєвої різниці в контрасті кольорів не існує, то для людей з обмеженими можливостями контраст має особливе значення. У цьому випадку кольори фону та тексту мають бути контрастними. Максимальна контрастність у разі чорного тексту на білому тлі. Але для уникнення проблем із оптичними спотвореннями фон сторінки слід трохи пофарбувати.
Шаблон - це тип розширення в Joomla, який представляє зовнішній виглядвашого сайту. Існує два типи шаблонів, які використовуються в CMS Joomla: Front-end Templates та Back-end Templates. Front-end – визначає зовнішній вигляд вашого сайту, це вся візуальна частина інтернет-ресурсу, яку бачить користувач. Back-end – це тип шаблонів, що дозволяє змінити зовнішній вигляд (інтерфейс) адмін-панелі Joomla!
У Joomla 2.5 передбачено кілька стандартних шаблонів, які йдуть у комплекті разом із установкою CMS (3 Front-end та 2 Back-end шаблони):
Шаблони сайтів
- Beez 20 (шаблон за замовчуванням);
- Beez 5;
- Atomic.
Шаблони адмін-панелі
- Bluestorkk (за замовчуванням шаблон);
- Hathor.
Мета шаблону
Шаблон керує макетом та зовнішнім виглядом сайту. Це забезпечує основу, яка поєднує загальні елементи, модулі, компоненти та плагіни, а також надає каскадну таблицю стилів для сайту.
При першому встановленні Joomla! включаються автоматично два шаблони, згадані в розділі вище. На інших веб-сайтах можна знайти безліч інших шаблонів на будь-який смак і колір. Величезна кількість шаблонів доступна для користувачів у безкоштовній формі під різними ліцензіями, але є і платні шаблони. Будь-який користувач може створити власний шаблон, потрібно лише визначитигод ний багаж знань у цій сфері.
Шаблони встановлюються через адмін-панель Joomlaу Менеджері розширень, після встановлення шаблон буде доступний у Менеджері шаблонів.
Чому Joomla! використовує шаблони?
CMS Joomla! виділяє кілька ключових завдань, що беруть участь у виробництві ефективного інтернет-ресурсу. Однією з таких завдань є створення естетичного (макету) сайту. Таке завдання включає прийняття рішень щодо розміщення елементів контенту (модулів, плагінів і компонентів).
При створенні нової веб-сторінки, розташування більшості елементів контенту має залишатися незмінним (меню, бічні панелі, банерні місця і т. д.). Крім того, користувач хоче бачити той самий зовнішній вигляд для кожної нової сторінкита її вмісту (шрифти, стилі заголовків, колірну палітру тощо). Також користувач може змінювати деякі загальні елементи сайту, щоб вказати інші параметри відображення тощо (наприклад, модулі). У результаті після невеликого проектування ви зупинитеся на загальному макеті для свого сайту і вирішите задачу підготовки шаблону для кожної сторінки та її змісту.
І тепер варто замислитись. Навіщо писати код для кожної сторінки окремо, якщо можна використовувати шаблон для кожного розділу на сайті і при додаванні нової сторінки вам доведеться лише «заповнити пробіли». Все це не так просто як кажуть, але в даному матеріалі викладена базова інформація щодо використання шаблону та його призначення.
Основний підтекст даного матеріалу полягає в тому, що шаблон керує зовнішнім виглядом вашого сайту і одночасно дозволяє адміністратору ресурсу приділяти більше уваги фактичного змісту, а не написання коду.
Редагування шаблону. Що можна зробити?
Шаблон використовується для органічного оформлення контенту, який підвантажується браузером для подальшого читання з екрана. Ви можете самостійно змінювати колірні схеми, зображення та ефекти, шрифти та безпосередньо сам макет.
Макет.Шаблон є область, де встановлені стилі дизайну вашого сайту. Сюди входить розміщення різних елементів (компонентів, модулів та плагінів), які відповідають за різні типиконтенту. Наприклад: різні меню (ви можете вибрати стиль меню з існуючих варіантіві його прикладі створити своє власне, унікальне меню).
Палітра кольорів.За допомогою CSS можна змінювати колір фону, посилань, тексту тощо.
Шрифт.Те саме стосується і шрифтів. За допомогою стилів у CSS можна задавати єдиний зовнішній вигляд текстів на своїх сторінках. Це дозволяє легко змінювати зовнішній вигляд всієї текстової інформації, відредагувавши один або два файли, а не кожну окрему сторінку.
Зображення та ефекти.Ви можете повністю контролювати те, як відображаються зображення на сторінці і навіть створювати флеш-ефекти, наприклад меню, що випадає.
18 червня 2012Різні шаблони для різних сторінок сайту - 3.8 out of 5 based on 5 votes
Не всі сторінки сайту повинні мати однаковий дизайн. Деякі сайти мають різні кольори та стилі для різних сторінок. В інших сайтів дизайн радикально відрізняється в одному розділі від іншого. Joomla дозволяє реалізувати подібну задумку.
В цьому уроці буде розказано, як використовувати кілька шаблонів або кілька стилів одного шаблону для різних частин вашого сайту на Joomla.
Крок 1: Розбір стандартного шаблону Joomla
Joomla має 3 стандартні шаблони: Atomic, Beez5 і Beez2. Ці три шаблони призначені для сайту. Інші два - Bluestork and Hathor поєднані для адмін-панелі Joomla. Можна також встановити інший шаблон або створити власний.
Один із шаблонів завжди буде призначений за замовчуванням. Шаблон, призначений за замовчуванням, позначений золотою зірочкою, як показано на малюнку.
Ви можете просто змінити шаблон за замовчуванням, клікнувши на одну з незафарбованих зірочок. Якщо зірка зафарбувалася, то призначено новий шаблон за замовчуванням.
Після встановлення joomla шаблонза замовчуванням призначено Beez2. Якщо клацнути за назвою шаблону, можна відредагувати деякі параметри шаблону.
У цьому прикладі можна побачити сторінку налаштувань шаблону. Цей шаблон призначений за умовчанням і не прив'язаний безпосередньо до жодного пункту меню (Параметр: Прив'язка до меню).
Крок 2: Призначення різних шаблонів для різних сторінок Joomla
Погляньмо на редагування іншого шаблону і подивимося, як призначити його до певної категорії.
- Закрийте сторінку редагування шаблону Beez2.
- Відкрийте шаблон для редагування шаблон Beez5,встановивши прапорець навпроти шаблону та натиснувши кнопку: "Редагувати".
Підключення різних шаблонів на різні сторінки сайту реалізується лише за допомогою пунктів меню. Перейдіть до розділу "Прив'язка до меню" і ви зможете вибрати сторінки сайту, для яких необхідно призначити окремі шаблони.
В даному випадку в полі "За замовчуванням" для цього шаблону використовується значення "Ні",тому що у нас вже інший шаблон використовується за умовчанням. Поставте прапорець навпроти пункту "Категорія 1"або будь-якого іншого, який ви будете використовувати.
Збережіть цю прив'язку, а потім перевірте ваш сайт. Після збереження ви побачите, що шаблон Beez20 призначений за промовчанням. А шаблон Beez5 позначений зеленою галочкою.
Ось як виглядає головна сторінка із шаблоном Beez за замовчуванням.
на НаразіВарто нагадати, що зміна шаблону не вплине на вміст сайту. Тим не менш, зміниться заголовок, логотип, оформлення та позиції модулів. Це означає, що ви не можете просто міняти шаблон, не роблячи додаткову роботу.
Крок 3: Визначення різних позицій модулів у різних шаблонах
Позиції модулів у шаблоні Beez5 (вгорі) та у шаблоні Beez20 (внизу) майже однакові, так що зміни незначні. Проте є й відмінності.
Однією з помітних відмінностей між шаблонами є позиція модулів біля логотипу. У шаблоні Beez5 позиції 1 та 0 знаходяться нижче логотипу.
У Beez20 позиція-0 знаходиться над логотипом, а позиція-1 нижче за нього.
Це досить незначна відмінність, але гарний приклад того, як можуть відрізнятись позиції модулів у шаблонах. У цьому випадку наведено простий приклад, оскільки позиції модулів в обох шаблонах мають однакові назви.
Але що робити, якщо позиції модулів у шаблонах відрізняються не лише положенням, але й назвою?
Поверніться до Менеджера шаблонів та зв'яжіть шаблон Atomic зі сторінкою категорія 2.Ви побачите шаблон Atomic на сторінці категорія 2.Він має зовсім інші позиції модулів, і ви можете його бачити на зображенні нижче.
На цій сторінці представлені позиції модулів:
- atomic-topmenu
- atomic-topquote
- atomic-search
- atomic-sidebar
- atomic-bottomleft
- atomic-bottommiddle
Якщо ви хочете, щоб шаблон Atomic працював на додаток до Beez20 ви повинні зробити більше роботи. Не гарантовано, що позиція модуля, що працює в Beez20, буде працювати в Atomic.
Крок 4: Додавання модуля меню до нового шаблону.
- Перейдіть в Розширення - Менеджер модулів та натисніть на кнопку Створити.
- Виберіть тип модуля Меню.
- Призначте вашому новому модулю позицію atomic-sidebar.
- У Joomla 2.5 представлено нову можливість: поле примітки для модуля. Це дозволить вам не заплутатися, коли у вас буде багато модулів.
Тепер ми збираємося прив'язати модуль лише до певної сторінки.
- У опції "Прив'язка до пунктів меню" виберіть значення "Тільки на вказаних сторінках".
- Позначте прапорцем ту сторінку, де хочете відображати модуль.
Тепер модуль меню розміщено у бічній панелі. Ви, напевно, помітили, що це горизонтальне меню і місце для нього обмежене. Нам потрібно спробувати ще раз, щоб знайти більш відповідну позицію.
Перейдіть в менеджер модулів та перемістіть ваше меню в позицію atomic-topmenu. Результат ви можете побачити на наступному малюнку.
Крок 5: Стилі одного шаблону замість різних шаблонів.
Замість використання абсолютно різних шаблонів на різних сторінках сайту ви можете просто внести невелику зміну до шаблону за замовчуванням. Це нова можливість, що з'явилася Joomla 2.5. Цей прийом дозволить створювати більше тонкі відмінностіна кожній сторінці без необхідності виконання роботи, яка була описана вище.
- Перейдіть до Менеджер шаблонів.
- Виберіть шаблон, який потрібно продублювати (прапорцем навпроти нього).
- Натисніть кнопку "Дублювати".
- Встановіть прапорець поруч із шаблоном Beez2- Default (2).
- Натисніть кнопку "Змінити".
- Beez20 поставляється з двома колірними схемами: Personal та Nature. Виберіть Nature зі списку.
- Призначте шаблон для пункту меню Категорія 1у блоці "Прив'язка до меню". Зверніть увагу, що є й інші налаштування, які ви можете змінити. Наприклад: логотип, назва сайту та позицію навігації.
Тепер у вас є на сайті два різні стилі шаблону, пов'язані з двома сторінками.
- Ви також можете призначити шаблон при створенні пунктів меню.
- Коли ви перебуваєте в менеджері меню, ви можете зв'язати стиль шаблону під час створення пункту меню.
Rating 3.80
Переглядів: 25562
Завантаження...