Joomla! Україна

Близько року назад вирішив змінити типовий вигляд а також і функціонування стандартних повідомлень Joomla. Ідея полягала в тому, щоб повністю перенести зміни повідомлень на CSS та JQuery (саме цю бібліотеку я використовую у своїх роботах).

Отже, для початку давайте змінимо візуальну частину за допомогою CSS.

Для цього нам достатньо в кінці нашого CSS-файлу template.css додати наступний код (в коді у вигляді коментарів будуть пояснення):

 /*
-----------------------------------------------
Author:   Denys Nosov at http://www.denysdesign.com
Version:  19.01.2011
Update:   22.05.2011
License:  GNU General Public License version 2 or later; see LICENSE.txt
----------------------------------------------- */

#system-message {
    margin-bottom: 18px;
    position: fixed; /* фіксуємо повідомлення в верхній частині сторінки */
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999; /* шар на самому верху з врахуванням різних модальних вікон, тощо */
}
    #system-message dt {
        display: none;
    }
    #system-message dd {
        padding: 0;
        margin: 0;
        background: url(../images/bg-massage.png) repeat-x; /* напіпрозорій фон, наприклад білий з градієнтом */
        font-size: 200%; /* розмір шрифта — ставимо великий розмір для візуального фокусування */
        line-height: normal;
    }
    #system-message dd ul,
    #system-message dd ul li {
        list-style: none;
        list-style-image: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #system-message dd.message ul,
    #system-message dd.error ul,
    #system-message dd.notice ul {
        margin: 0 18%;
        padding-left: 40px;
        padding: 12px 0 18px 40px;
    }
        #system-message dd ul li {
            text-align: center; /* центруємо текст посередині */
        }
    /* колір тексту та полоска вверху для звичайного повідомлення */
    #system-message dd.message {
        color: #0b92e7;
    }
        #system-message dd.message {
            border-top: 5px solid #0b92e7;
        }
    /* колір тексту та полоска вверху для повідомлення про помилку */
    #system-message dd.error {
        color: #c00!important;
    }
        #system-message dd.error {
            border-top: 5px solid #c00;
        }
    /* колір тексту та полоска вверху для повідомлення у вигляді зауваження */
    #system-message dd.notice {
        color: #f27a00!important;
    }
        #system-message dd.notice {
            border-top: 5px solid #f27a00;    

Після збереження файлу ми можемо протестувати те, що у нас вийшло.

Для цього нам потрібно згенерувати саму помилку на сайті, або додати в наш шаблон наступний код:

 <dl id="system-message">
    <dd class="message message">
        <ul>
            <li>Текст поминки</li>
        </ul>
    </dd>
</dl>

Ми тепер бачимо як буде відображатись повідомлення про помилку на живому сайті.

Що ж тепер давайте додамо блиску та візуальних ефектів за допомогою JQuery.

Для цього в шапці сайту підключаємо бібліотеку JQuery (я використовую бібліотеку з CDN Google, адже ймовірність того, що ця бібліотека вже закешована у вашому браузері складає 80%):

    <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">!window.jQuery AND document.write(unescape('%3Cscript src="<?php echo JURI::base(); ?>/media/jq/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

На всякий випадок я додаю перевірку на наявність завантаженої бібліотеки, хоча мало віриться, що CDN Google не буде працювати.

Після підключення бібліотеки я додаю наступний код:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function()
{
    /* повідомлення про помилку зникне через 6 секунд */
    setTimeout(
        function () {
            jQuery('#system-message').animate({"top": "-=1000px"}, 6000);
        }, 6000);

    /* при наведені курсора на повідомлення про помилку воно зникає */
    jQuery('#system-message').hover(
        function () {
            jQuery(this).animate({"top": "-=1000px"}, 6000);
        }
    );
});
/*]]>*/
</script>

Зберігаємо наш index.php та перевіряємо результат.

Не забудьте після тестування забрати з файлу шаблона тестовий html-код, який ми вставили вище, щоб подивитися як буде виглядати повідомлення про помилку!

Для більш просунутих користувачів, я би радив js-код перемістити в окремий файл, або до свого коду, якщо ви використовуєте JQuery в розробці шаблонів.

На цьому це і все. Приклад помилок та повідомлень, які описані тут ви можете побачити у нас на порталі.

Погодьтесь — виглядає привабливо та ефектно!