MediaWiki:Vector.js: Difference between revisions

From TwentyOneWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 20: Line 20:
             });
             });


         // Создаем заголовок внутри контейнера
         // Создаем заголовок Help
         var helpTitle = $('<h2>')  // Используем <h2> для заголовка
         var helpHeader = $('<h2>')  // Используем заголовок второго уровня
             .text('Help')            // Добавляем текст
             .text('Help')            // Добавляем текст заголовка
             .css({
             .css({
                'display': 'block',                  // Блочный элемент
                 'color': '#000',       // Цвет текста заголовка
                 'color': '#44180D',                 // Цвет текста
                 'font-size': '18px',   // Размер шрифта заголовка
                'margin': '0.5em 0 0 0.66666667em', // Отступы
                 'margin-bottom': '10px' // Отступ снизу
                'border': '0',                      // Убираем границу
            });
                'padding': '0.25em 0',              // Внутренний отступ
 
                 'font-size': '0.80em',             // Размер шрифта
        // Создаем текст внутри контейнера
                 'font-weight': 'bold',              // Жирный шрифт
        var helpText = $('<div>')
                'cursor': 'default',                // Курсор по умолчанию
            .text('Help us!!')           // Добавляем текст
                'background-image': 'linear-gradient(to right, rgba(200, 204, 209, 0) 0, #AA3C14 33%, #AA3C14 66%, rgba(200, 204, 209, 0) 100%)', // Фоновый градиент
            .css({
                'background-position': 'center bottom', // Позиция фона
                 'color': '#000',         // Цвет текста
                 'background-repeat': 'no-repeat',   // Без повторения фона
                 'font-size': '16px',     // Размер шрифта
                 'background-size': '100% 1px',       // Размер фона
                 'font-weight': 'bold'     // Жирный шрифт
                 'font-family': 'sans-serif, sans-serif' // Шрифт
             });
             });


Line 60: Line 59:
             });
             });


         // Добавляем заголовок и изображение в контейнер
         // Добавляем заголовок, текст и изображение в контейнер
         container.append(helpTitle);
         container.append(helpHeader); // Добавляем заголовок
         container.append(image);
        container.append(helpText);    // Добавляем текст
         container.append(image);       // Добавляем изображение


         // Вставляем контейнер после Sidebar
         // Вставляем контейнер после Sidebar

Revision as of 15:53, 20 October 2024

$(document).ready(function() {
    var newItem = $('<li class="personal-version" title="Version October 2024"><a href="/index.php?title=MediaWiki:Blog" style="text-decoration: none; color: inherit;">Version: Beta 5.1</a><hr style="display:inline-block; height: 20px; bottom: 2px; width: 1px; background: linear-gradient(to bottom, #DDD7CC, #702114); border: none; margin-left: 10px; vertical-align: middle;"></li>');
    $('#p-personal > div > ul').prepend(newItem); // Добавляем элемент первым в списке навигации
});

$(document).ready(function() {
    // Найдем элемент Sidebar (в Vector skin это обычно div с id 'p-tb')
    var sidebar = $('#p-tb'); // Стандартный id для Sidebar в Vector skin

    if (sidebar.length) {
        // Создаем контейнер div
        var container = $('<div>')
            .attr('id', 'help-container')  // Присваиваем контейнеру id
            .css({
                'background-color': '#DDD7CC', // Цвет фона
                'padding': '10px',          // Внутренний отступ для контейнера
                'margin-top': '10px',       // Отступ сверху
                'text-align': 'center',     // Центрирование содержимого
                'font-family': '\'MyCustomFont2\', sans-serif' // Применение пользовательского шрифта
            });

        // Создаем заголовок Help
        var helpHeader = $('<h2>')  // Используем заголовок второго уровня
            .text('Help')            // Добавляем текст заголовка
            .css({
                'color': '#000',       // Цвет текста заголовка
                'font-size': '18px',   // Размер шрифта заголовка
                'margin-bottom': '10px' // Отступ снизу
            });

        // Создаем текст внутри контейнера
        var helpText = $('<div>')
            .text('Help us!!')            // Добавляем текст
            .css({
                'color': '#000',          // Цвет текста
                'font-size': '16px',      // Размер шрифта
                'font-weight': 'bold'     // Жирный шрифт
            });

        // Массив с путями к изображениям
        var images = [
            '/images/5/52/10.14.2009.jpg',
            '/images/6/66/Friends_from_FC_29_Dec_2009.jpg'
        ];

        // Выбираем случайное изображение
        var randomImage = images[Math.floor(Math.random() * images.length)];

        // Создаем элемент изображения
        var image = $('<img>')
            .attr('src', randomImage)  // Устанавливаем случайное изображение
            .css({
                'width': '50px',          // Ширина изображения
                'height': '50px',         // Высота изображения
                'margin-top': '10px',     // Отступ сверху
                'display': 'block',        // Обязательно, чтобы центрировать
                'margin-left': 'auto',     // Центрирование
                'margin-right': 'auto'     // Центрирование
            });

        // Добавляем заголовок, текст и изображение в контейнер
        container.append(helpHeader);  // Добавляем заголовок
        container.append(helpText);     // Добавляем текст
        container.append(image);        // Добавляем изображение

        // Вставляем контейнер после Sidebar
        sidebar.after(container);
    }
});