kuban-forum.ru - Лучший форум для общения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » kuban-forum.ru - Лучший форум для общения » 🛠️Технические вопросы работы форума » Код тёмной темы для стиля форума "Mybb vBullitin mix"


Код тёмной темы для стиля форума "Mybb vBullitin mix"

Сообщений 1 страница 2 из 2

1

Как установить: в админ. панели меню "Формы", далее в любую панель HTML, я рекомендую  в самый низ окна HTML низ, там оно мешать ничему не будет.

Посмотреть код
Код:
<!-- Тёмная тема -->
<style>#html-header{position:relative}.StyleSwitch{height:20px;width:20px;position:absolute;z-index:1000;right:5px;top:50px;border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.7);transition:.1s ease}.StyleSwitch:hover{opacity:.8}.StyleSwitch.St{background:#426B9A url(https://forumstatic.ru/files/0016/a6/f8/90261.png) center center no-repeat!important;background-size:16px!important}.StyleSwitch.My{background:#6996CA url(https://forumstatic.ru/files/0016/a6/f8/22564.png) center center no-repeat!important;background-size:16px!important}body.dark-theme .post .post-body::before{border-color:transparent #4a5b70 transparent transparent !important}body.dark-theme .post .post-body::after{border-color:transparent #2d3748 transparent transparent !important}body.dark-theme .postVoters strong{background:#c0c0c0;padding:2px 4px;border-radius:4px;color:#000}body.dark-theme .punbb .post-content p a{background:rgba(255,255,255,0.1);border-radius:3px;padding:2px}body.dark-theme .punbb .post-content p a:hover{color:teal}</style><script>(function(){var style='https://forumstatic.ru/files/001a/f0/7d/20423.css?v=2';style='<link rel="stylesheet" id="StyleAdd" type="text/css" href="'+style+'"/>';function setStyle(){$('link[rel="stylesheet"]:last').after(style);$('.StyleSwitch').removeClass('St').addClass('My');$('.StyleSwitch').attr('title','Стандартный стиль');$('body').addClass('dark-theme')}$('#html-header').prepend('<span class="StyleSwitch St" title="Затемненный стиль"></span>');$('.StyleSwitch').tipsy({fade:true,gravity:'nw'});if($getCookie('StyleSwitch')){setStyle();}$('.StyleSwitch.St').live('click',function(){$setCookie('StyleSwitch','My',30*3600*24*30*1000);setStyle();});$('.StyleSwitch.My').live('click',function(){$('link#StyleAdd').remove();$deleteCookie('StyleSwitch');$('.StyleSwitch').addClass('St').removeClass('My');$('.StyleSwitch').attr('title','Затемненный стиль');$('body').removeClass('dark-theme');});})();</script>
<!-- Конец тёмной темы -->

Это код в в "минифицированном" виде, чтобы занимал меньше места при загрузке. Полная версия с комментариями выглядит так:

Посмотреть код
Код:
<!-- Тёмная тема и вспомогательные стили -->
<style>
/* ===== Переключатель темы ===== */
#html-header {
    position: relative; /* Чтобы кнопка StyleSwitch позиционировалась относительно header */
}
.StyleSwitch {
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 1000;
    right: 5px; /* Отступ справа */
    top: 50px;  /* Отступ сверху */
    border-radius: 50%; /* Круглая кнопка */
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,.7); /* Тень для объёма */
    transition: .1s ease; /* Плавная анимация при наведении */
}
.StyleSwitch:hover { opacity: .8; } /* Лёгкое затемнение при наведении */
.StyleSwitch.St {
    background: #426B9A url(https://forumstatic.ru/files/0016/a6/f8/22564.png) center center no-repeat!important;
    background-size: 16px!important; /* Иконка стандартного стиля */
}
.StyleSwitch.My {
    background: #6996CA url(https://forumstatic.ru/files/0016/a6/f8/90261.png) center center no-repeat!important;
    background-size: 16px!important; /* Иконка тёмного стиля */
}

/* ===== Треугольники (только для тёмной темы) ===== */
body.dark-theme .post .post-body::before {
    border-color: transparent #4a5b70 transparent transparent !important; /* тёмный фон треугольника */
}
body.dark-theme .post .post-body::after {
    border-color: transparent #2d3748 transparent transparent !important; /* тёмная окантовка */
}

/* ===== "Сказали спасибо" (только для тёмной темы) ===== */
body.dark-theme .postVoters strong {
    background: #c0c0c0; /* серебристый фон */
    padding: 2px 4px;
    border-radius: 4px;
    color: #000; /* чёрный текст */
}

/* ===== Подсветка ссылок в постах (только для тёмной темы) ===== */
body.dark-theme .punbb .post-content p a {
    background: rgba(255,255,255,0.1); /* мягкий светлый фон */
    border-radius: 3px;
    padding: 2px;
}
body.dark-theme .punbb .post-content p a:hover { color: teal; } /* цвет текста при наведении */
</style>

<script type="text/javascript">
(function () {
    var style = 'https://forumstatic.ru/files/001a/f0/7d/73291.css?v=45'; // Ссылка на внешний CSS для тёмной темы
    style = '<link rel="stylesheet" id="StyleAdd" type="text/css" href="'+style+'"/>';

    /* ===== Функция включения тёмного стиля ===== */
    function setStyle () {
        $('link[rel="stylesheet"]:last').after(style); // Подключаем внешний CSS
        $('.StyleSwitch').removeClass('St').addClass('My'); // Меняем иконку кнопки
        $('.StyleSwitch').attr('title','Стандартный стиль'); // Подпись кнопки
        $('body').addClass('dark-theme'); // Добавляем класс тёмной темы
    }

    /* ===== Добавляем кнопку в HTML ===== */
    $('#html-header').prepend('<span class="StyleSwitch St" title="Затемненный стиль"></span>');
    $('.StyleSwitch').tipsy({fade: true, gravity: 'nw'}); // Подсказка при наведении

    if($getCookie('StyleSwitch')) { setStyle (); } // Если включена тёмная тема, применяем сразу

    /* ===== Событие клика по кнопке для включения ===== */
    $('.StyleSwitch.St').live('click', function () {
        $setCookie('StyleSwitch','My',30*3600*24*30*1000); // Сохраняем cookie на 30 дней
        setStyle ();
    });  

    /* ===== Событие клика по кнопке для выключения ===== */
    $('.StyleSwitch.My').live('click', function () {
        $('link#StyleAdd').remove(); // Убираем подключённый CSS
        $deleteCookie('StyleSwitch'); // Удаляем cookie
        $('.StyleSwitch').addClass('St').removeClass('My'); // Меняем иконку на стандартную
        $('.StyleSwitch').attr('title','Затемненный стиль');
        $('body').removeClass('dark-theme'); // Убираем класс тёмной темы
    });
})();
</script>
<!-- Конец тёмной темы -->

Тёмная тема включается кнопкой, которая в десктопном разрешении экрана находится справа вверху (значок синей лампочки). В мобильном виде эта кнопка скрыта.

Достоинства: Это тёмная тема 🖤  которая реально выглядит неплохо (как в стандартном виде, так и со всеми улучшениями кода, что я добавил на форум)  :)
Код выложен в исходном виде, поэтому вы можете сами его легко модифицировать  :)

Недостатки: код подключает к себе внешний стиль по адресу https://forumstatic.ru/files/001a/f0/7d/73291.css
Это стиль от господина Reysler , насколько я понимаю, для сервиса RusFF и там много "лишнего для платформы MyBB.ru. Я не знаю, что именно оттуда можно удалить как ненужное и без последствий.
В минифицированном виде он просто сжат в файл https://forumstatic.ru/files/001a/f0/7d/20423.css и именно его "тянет" минифицированный скрипт.

Подпись автора

Функционал форума Книга жалоб Книга предложений Знак зодиака Как вставить видео на форум Форум"Грибные места" Слайдер для картинок Live-box с темами

0

2

Дизайн тëмной темы понравился. На OLED/AMOLED экране тëмная тема будет экономить батарейку телефону/планшету.

+1


Вы здесь » kuban-forum.ru - Лучший форум для общения » 🛠️Технические вопросы работы форума » Код тёмной темы для стиля форума "Mybb vBullitin mix"