<3 написал(а):Merlin777
Спасибо большое, разобралась понемногу, будем пробовать! Подскажите только заранее, "Свой стиль" по итогу нужно будет отключить?
У меня на форуме всё пишется "поверх" стандартного стиля, поэтому я и предложил алгоритм такой - обращение к отдельным файлам CSS в зависимости от условий (времени года). Это простое и прямолинейное решение, плюс его в том, что мы можем независимо менять любой из файлов CSS, не ломая ничего в остальных:)
Но если идея в том чтобы весь дизайн вписать в "Администрирование - Свой стиль", то там либо надо менять окошко "Структура style.css" либо "Цвета style_cs.css".
Смысл этих окошек "Свой стиль" такой: "Структура style.css" это просто CSS "по умолчанию" в выбранной теме оформления форума. И он в себя вставляет данные из окошка "Цвета style_cs.css"через команду @import url(style_cs.css); (она в самом начале примерно на 9 строчке).
Поэтому можно сделать так:
Вариант 1: Убираем из style.css строку @import url(style_cs.css), а скрипт вместо загрузки внешних CSS-файлов подставляет в <head> содержимое соответствующего сезонного style_cs.css (как inline-стили).
У вас будет 4 файла:
style_cs_spring.css
style_cs_summer.css
style_cs_autumn.css
style_cs_winter.css
Каждый - это полный style_cs.css, но с цветами под свой сезон. Скрипт:
1) Определяет текущий сезон
2) Читает/загружает соответствующий файл
3) Скрипт — загружает нужный сезонный CSS и вставляет как <style id="seasonal-cs">...</style> в <head>
Сам style.css остаётся без изменений (кроме удаления одной строки), а цвета подставляет JS
Тогда JS (вставлять в HTML верх)будет иметь вид:
Этот вариант чистый, простой и понятный, я бы его и использовал, если есть желание использовать "Свой стиль".
Вариант 2: CSS-переменные: переписать style_cs.css на CSS-переменные (--bg: #f1f1f1; --color: #333; и т.д.), а скрипт в JS меняет document.documentElement.style.setProperty(...) под сезон. Тогда style.css остаётся неизменным, а style_cs.css — шаблоном с var(--bg).
В таком случае style_cs.css будет иметь примерно такой вид:
style_cs.css
Код:
/* CS1 Background and text colours */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
background-color: var(--bg-body);
color: var(--text-main);
}
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
background-color: var(--bg-block);
color: var(--text-main);
}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-color: var(--bg-header);
color: var(--text-header);
}
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-color: var(--bg-title);
color: var(--text-main);
}
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
background-color: var(--bg-block);
color: var(--accent);
}
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {
background-color: var(--bg-alt);
color: var(--text-main);
}
.punbb .quote-box, .punbb .code-box {
background-color: var(--bg-quote);
color: var(--text-main);
}
#pun-navlinks .container {
background-color: var(--bg-nav);
color: var(--text-nav);
}
/* CS2 Border colours */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
border-color: var(--border-main) var(--border-main) var(--border-strong) var(--border-main);
}
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
border-color: var(--border-light);
}
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
border-color: var(--border-header);
}
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
border-color: var(--border-grid);
}
.punbb th {
border-color: var(--bg-alt);
}
.punbb .quote-box, .punbb .code-box {
border-color: var(--border-quote);
}
#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
border-color: var(--border-main);
}
#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
border-color: var(--border-light);
}
.punbb .divider {
border-color: var(--border-main) var(--border-light) var(--border-light) var(--border-light);
}
.punbb .formal fieldset .post-box, .punbb .info-box {
border: 1px solid var(--bg-alt);
}
li.pa-online {
border-left-color: var(--accent);
}
/* CS3 Links */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
color: var(--link);
}
.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
color: var(--text-main);
}
.punbb a:hover, .punbb a:focus, .punbb a:active, .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
color: var(--link-hover);
}
#pun-navlinks a {
color: var(--text-nav);
text-decoration: none;
}
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: var(--text-nav-hover);
text-decoration: underline;
}
#pun-pagelinks a:active, #pun-pagelinks a:focus {
background-color: var(--text-main);
color: var(--text-header);
}
/* CS4 Post status icons */
div.icon {border-color: var(--icon-default);}
tr.iredirect div.icon {border-color: var(--icon-redirect);}
div.inew {border-color: var(--icon-new);}
#pun-main div.catleft, #pun-main div.catright {display: none}
А JS скрипт примерно такой:
JS
Код:
<script>
(function() {
var month = new Date().getMonth() + 1;
var vars;
if (month >= 3 && month <= 5) {
vars = {
'--bg-body': '#f0faf0',
'--bg-block': '#f5fcf5',
'--bg-header': '#2e7d32',
'--bg-title': '#e8f5e9',
'--bg-alt': '#dcedc8',
'--bg-nav': '#1b5e20',
'--bg-quote': '#f9fff9',
'--text-main': '#222',
'--text-header': '#fff',
'--text-nav': '#eee',
'--text-nav-hover': '#fff',
'--accent': '#2e7d32',
'--link': '#1b5e20',
'--link-hover': '#b71c1c',
'--border-main': '#a5d6a7',
'--border-strong': '#66bb6a',
'--border-light': '#e8f5e9',
'--border-header': '#1b5e20',
'--border-grid': '#c8e6c9',
'--border-quote': '#a5d6a7 #fff #fff #a5d6a7',
'--icon-default': '#c8e6c9 #a5d6a7 #81c784 #b9f6ca',
'--icon-redirect': '#f5fcf5 #f5fcf5 #f5fcf5 #f5fcf5',
'--icon-new': '#1b5e20 #004d40 #003300 #1a6b1a'
};
} else if (month >= 6 && month <= 8) {
vars = {
'--bg-body': '#fff8e1',
'--bg-block': '#fffde7',
'--bg-header': '#e65100',
'--bg-title': '#fff3e0',
'--bg-alt': '#ffe0b2',
'--bg-nav': '#bf360c',
'--bg-quote': '#fffbf0',
'--text-main': '#222',
'--text-header': '#fff',
'--text-nav': '#eee',
'--text-nav-hover': '#fff',
'--accent': '#e65100',
'--link': '#bf360c',
'--link-hover': '#b71c1c',
'--border-main': '#ffcc80',
'--border-strong': '#ff9800',
'--border-light': '#fff3e0',
'--border-header': '#bf360c',
'--border-grid': '#ffe0b2',
'--border-quote': '#ffcc80 #fff #fff #ffcc80',
'--icon-default': '#ffe0b2 #ffcc80 #ffb74d #ffe0b2',
'--icon-redirect': '#fffde7 #fffde7 #fffde7 #fffde7',
'--icon-new': '#bf360c #871f00 #6d1300 #d84315'
};
} else if (month >= 9 && month <= 11) {
vars = {
'--bg-body': '#fdf3e8',
'--bg-block': '#fef7f0',
'--bg-header': '#795548',
'--bg-title': '#efebe9',
'--bg-alt': '#d7ccc8',
'--bg-nav': '#4e342e',
'--bg-quote': '#fefcf8',
'--text-main': '#222',
'--text-header': '#fff',
'--text-nav': '#eee',
'--text-nav-hover': '#fff',
'--accent': '#795548',
'--link': '#4e342e',
'--link-hover': '#b71c1c',
'--border-main': '#bcaaa4',
'--border-strong': '#8d6e63',
'--border-light': '#efebe9',
'--border-header': '#4e342e',
'--border-grid': '#d7ccc8',
'--border-quote': '#bcaaa4 #fff #fff #bcaaa4',
'--icon-default': '#d7ccc8 #bcaaa4 #a1887f #d7ccc8',
'--icon-redirect': '#fef7f0 #fef7f0 #fef7f0 #fef7f0',
'--icon-new': '#4e342e #3e2723 #2d1a11 #5d4037'
};
} else {
vars = {
'--bg-body': '#e3f2fd',
'--bg-block': '#eef5fb',
'--bg-header': '#1565c0',
'--bg-title': '#bbdefb',
'--bg-alt': '#90caf9',
'--bg-nav': '#0d47a1',
'--bg-quote': '#f0f8ff',
'--text-main': '#222',
'--text-header': '#fff',
'--text-nav': '#eee',
'--text-nav-hover': '#fff',
'--accent': '#1565c0',
'--link': '#0d47a1',
'--link-hover': '#b71c1c',
'--border-main': '#90caf9',
'--border-strong': '#42a5f5',
'--border-light': '#bbdefb',
'--border-header': '#0d47a1',
'--border-grid': '#90caf9',
'--border-quote': '#90caf9 #fff #fff #90caf9',
'--icon-default': '#bbdefb #90caf9 #64b5f6 #bbdefb',
'--icon-redirect': '#eef5fb #eef5fb #eef5fb #eef5fb',
'--icon-new': '#0d47a1 #002171 #001044 #1565c0'
};
}
var root = document.documentElement;
for (var key in vars) {
root.style.setProperty(key, vars[key]);
}
var bgPattern = document.createElement('style');
bgPattern.textContent =
'#pun-title { background: var(--bg-title) url(' +
(month >= 3 && month <= 5 ? 'https://i.imgur.com/spring-header-bg.png' :
month >= 6 && month <= 8 ? 'https://i.imgur.com/summer-header-bg.png' :
month >= 9 && month <= 11 ? 'https://i.imgur.com/autumn-header-bg.png' :
'https://i.imgur.com/winter-header-bg.png') +
') no-repeat right top; }';
document.head.appendChild(bgPattern);
})();
</script>
Тут JS-скрипт задаёт значения всех переменных для каждого сезона:
🌸 Весна — зелёные тона (#2e7d32, #e8f5e9)
☀️ Лето — оранжевые тона (#e65100, #fff3e0)
🍂 Осень — коричневые тона (#795548, #efebe9)
❄️ Зима — синие тона (#1565c0, #bbdefb)
Плюс подставляет фоновую картинку в шапку форума с заглушками https://i.imgur.com/...-header-bg.png.
В общем, надо всё пробовать на своём форуме, потому как всегда возможно наступить на какие-нибудь неожиданные грабли 
На форуме поддержки он немного изменённый + встроенного тёмного стиля у доступной в админки версии нет, но стянуть его отсюда возможно.