Донецкий техникум промышленной автоматики

Редагуємо верхнє меню в Joomla

  1. Навіщо редагувати меню
  2. що отримуємо

Оформлення інтернет-проекту відповідно до своїх вимог і зручністю користувачів (при їх розумному поєднанні) називається ємким словом юзабіліті сайту, яке в свою чергу складається з безлічі елементів

Оформлення інтернет-проекту відповідно до своїх вимог і зручністю користувачів (при їх розумному поєднанні) називається ємким словом юзабіліті сайту, яке в свою чергу складається з безлічі елементів. Сьогодні я на простому прикладі розповім, як редагувати верхнє меню в Joomla і нехай це буде першим кроком до досягнення завдань і цілей проекту.

Навіщо редагувати меню

Часто буває, що top menu Joomla ну ніяк не вписується в дизайн, а наймати програміста недоцільно, так як робота по редагуванню верхнього меню нескладна, але вимагає оплати. Для самостійного внесення змін нам знадобиться браузер Mozilla Firefox і спеціальний плагін firebug , За допомогою якого ми і дізнаємося те, заради чого треба довго читати розумні книги, точніше як змінити стилі CSS в шаблоні Joomla.

Ну, описувати, як завантажити браузер і плагін не варто, а відкривається він так, як показано на першому малюнку в шапці статті. Після того як firebug відкритий, можна приступати до редагування таблиці стилів CSS в тій її частині, яка відповідальна за верхнє меню. В консольної рядку натискаємо CSS і натискаємо по другого вікна зліва для аналізу елемента. Виділяємо верхнє меню Joomla і дивимося в правий нижній кут сторінки, де відкриється вікно з ділянкою таблиці стилів, що містить дані про елемент (рисунок 2).

Виділяємо верхнє меню Joomla і дивимося в правий нижній кут сторінки, де відкриється вікно з ділянкою таблиці стилів, що містить дані про елемент (рисунок 2)

Рядок background відповідальна за вказівку місця, де розташований графічний файл меню і за колір елемента. Давайте все приберемо і просто вкажемо колір, припустимо, це буде green для гарної асоціації.

Тепер переходимо до рядка height, яка вказує ширину елемента і я поставив для прикладу 50 замість тих, що були 44, тобто зробив наше нове зелене меню трохи ширше.

Параметр text-align формує розташування розділів, і я його змінив на left, зсунувши заголовки кілька вліво. В результаті вийшла така картина -

В результаті вийшла така картина -

що отримуємо

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

Залишається тільки перенести зміни на хостинг, для чого відкриваємо з ним ftp-з'єднання і йдемо за адресою

public_html - templates - Ваш шаблон - CSS

і вибираємо потрібний файл, в даному випадку це style.css, починаючи з рядка 129. Копіюємо стилі з fitebug і переносимо їх на хостинг, підтверджуючи заміну і збереження файлу. На сьогодні все.