Понеже обновяването на форума доведе до редица визуални промени, и понеже нямам нито достъп, нито пряка връзка с хоста, може да отнеме време докато адресираните проблеми бъдат отразени. Докато това стане (а ако ви харесва - и след това) - намерих заобиколно решение, за тези от вас, които не харесват текущата визия на форума и искат да я променят (включително да преместят аватарите отляво).
Решението е разширение за браузъра, което се нарича "Stylus". Можете да го изтеглите от тук:
Чрез него карате браузъра си при зареждане на даден сайт приоритетно да зареди ваши инструкции за визуалния стил на сайта, презаписвайки инструкциите, които сайта има по подразбиране. Разбира се, Stylus има ограничения - върши работа само за CSS корекции, докато с HTML корекции нещата стоят по-сложно. Въпреки това ограничение, Stylus върши повече от чудесна работа да придадем желан от нас вид на единствената налична тема.
С малко vibe-coding успях да докарам визия, която наподобява форума от стария син сайт (автентичната стара синя тема). Разбира се, внесох някои визуални корекции, за да има по-кохерентно излъчване и по-консистентна визия. Ето визуален пример:
Как да зададете стила?
След като инсталирате добавката Stylus във вашия браузър, отворете главната страница на форума и след това отворете добавката.
В поле 1 - задавате име по избор на вашия стил;
В поле 2 - избирате опция "URLs on the domain" - така вашите настройки ще се приложат за всички страници на форума, иначе по подразбиране се прилагат само за главната страница или тази чийто URL се е заредил в полето в момента на отваряне на Stylus;
В поле 3 - вмъкнете само домейна на форума, както е показано на скрийншота;
В полето за код - вмъкнете своя код (или кода, който съм създал за стария син стил, ще го пусна по-долу).
След като вмъкнете желания код - чрез кликване на бутона "Save" в поле 4 - запазвате промените и те оказват ефект веднага, без да е необходимо да презареждате страницата.
/* PC Mania Retro-Modern Style - Final Sync */
/* 1. ГЛОБАЛНИ НАСТРОЙКИ */
body, #wrap {
background-color: #003399 !important; /* Основен фон на сайта */
}
/* Шрифтове по подразбиране (не-линкове) */
body, span, dt, dd, li, p, .postbody, .content, .signature, strong {
color: #FFFFFF !important;
}
/* Хиперлинкове и Потребителски имена */
a, .username, .username-coloured {
color: #99CCFF !important;
text-decoration: none !important;
}
a:hover {
color: #FFFFFF !important;
text-decoration: underline !important;
}
/* Специално за "Гост" (не-линкове) */
.postprofile dt:not(a), .username:not(a) {
color: #FFFFFF !important;
}
/* 2. СТИЛИЗИРАНЕ НА ПОСТОВЕТЕ (СИНХРОН С РАЗДЕЛИТЕ) */
.post {
background-color: #005199 !important; /* Фонът от image_d2e1c0.jpg */
border: 1px solid #99CCFF !important; /* Очертание съгласно image_d2d751.png */
margin-bottom: 8px !important;
padding: 5px !important;
border-radius: 0 !important;
}
/* Полетата за профил и съдържание - уеднаквен фон */
.postprofile, .postbody {
background-color: #005199 !important;
color: #FFFFFF !important;
}
/* Разделителна линия между профила и коментара */
.postprofile {
float: left !important;
border-right: 1px solid #99CCFF !important;
border-left: none !important;
width: 22% !important;
min-height: 150px;
}
.postbody {
float: right !important;
width: 76% !important;
}
/* 3. ЦИТАТИ (SQUASHING THE BUGS) */
blockquote {
background-color: #003399 !important; /* По-тъмен фон за контраст вътре в цитата */
border: 1px solid #99CCFF !important; /* Очертание 99CCFF */
color: #FFFFFF !important;
padding: 8px !important;
margin: 10px 0 !important;
}
blockquote cite {
color: #99CCFF !important;
border-bottom: 1px solid #99CCFF !important;
display: block;
margin-bottom: 5px;
font-style: normal;
}
/* 4. СУПЕР-СИНХРОН СЪС СПИСЪЦИТЕ (Табличен вид) */
.forabg, .forumbg {
background-color: #003399 !important;
border: 1px solid #99CCFF !important;
padding: 0 !important;
}
/* Стил на заглавната лента в разделите */
li.header {
background-color: #003399 !important;
background-image: none !important;
border-bottom: 1px solid #99CCFF !important;
}
/* Стил на редовете (Теми/Форуми) */
li.row {
background-color: #005199 !important;
border-bottom: 1px solid #99CCFF !important;
}
/* 5. ЛОГО И ЕКСТРИ */
.site_logo {
background-image: url("https://i.imgur.com/Ajys0Bg.png") !important;
width: 255px !important;
height: 90px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
display: inline-block !important;
}
.site-description h1, .site-description p {
display: none !important;
}
/* 7. СИНХРОНИЗАЦИЯ НА НАВИГАЦИОННОТО МЕНЮ (NAVBAR) */
.navbar {
background-color: #005199 !important; /* Фонът от вашите скрийншоти */
border: 1px solid #99CCFF !important; /* Очертанието 99CCFF */
padding: 5px 10px !important;
border-radius: 0 !important; /* Премахване на заоблянето за ретро визия */
margin-bottom: 10px !important; /* Разстояние от заглавието на раздела */
}
/* Оцветяване на иконите и линковете вътре в менюто в бяло */
.navbar a, .navbar li, .navbar span, .navbar i {
color: #FFFFFF !important;
}
/* Хиперлинковете в менюто при посочване */
.navbar a:hover {
color: #99CCFF !important;
text-decoration: underline !important;
}
/* Премахване на вътрешните сенки и градиенти на модерния стил */
.headerbar, .navbar {
background-image: none !important;
box-shadow: none !important;
}
/* Линеен градиент за заглавната лента (Header) */
.headerbar {
background-color: #12A3EB !important; /* "Fallback" цвят */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #12A3EB 100%) !important;
border: 1px solid #99CCFF !important; /* Очертание за синхрон с останалите елементи */
border-radius: 0 !important;
}
/* Фикс за търсачката, за да не изглежда прозрачна върху градиента */
.search-header {
background: transparent !important;
box-shadow: none !important;
}
/* Линеен градиент за бутоните (без полето за търсене) */
.button, .button-secondary, a.button {
background-color: #12A3EB !important; /*Fallback*/
background-image: linear-gradient(to bottom, #FFFFFF 0%, #12A3EB 100%) !important;
border: 1px solid #99CCFF !important;
color: #003399 !important; /* Тъмно син текст за по-добра четливост върху светлия градиент */
font-weight: bold !important;
text-shadow: none !important;
border-radius: 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
/* Ефект при посочване (Hover) - леко потъмняване за обратна връзка */
.button:hover, a.button:hover {
background-image: linear-gradient(to bottom, #f0f0f0 0%, #0d82bc 100%) !important;
color: #000000 !important;
}
/* Иконите вътре в бутоните (моливчето и т.н.) */
.button .icon, .button i {
color: #003399 !important;
}
/* 8. СТИЛИЗИРАНЕ НА ПАДАЩИТЕ МЕНЮТА (DROPDOWNS) */
/* Основната кутия на менюто */
.dropdown-contents {
background-color: #12A3EB !important; /* Fallback */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #12A3EB 100%) !important;
border: 1px solid #99CCFF !important;
border-radius: 0 !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
/* Текстът вътре в менюто (линковете) */
.dropdown-contents a, .dropdown-contents li, .dropdown-contents span {
color: #003399 !important; /* Тъмно синьо за четливост върху светлия градиент */
font-weight: bold !important;
text-shadow: none !important;
}
/* Ефект при посочване на ред в менюто */
.dropdown-contents li:hover, .dropdown-contents a:hover {
background-color: rgba(255, 255, 255, 0.3) !important;
background-image: none !important;
color: #000000 !important;
}
/* Премахване на малкото триъгълниче отгоре (ако има такова), за да е по-чисто */
.dropdown-up .pointer, .dropdown-down .pointer {
display: none !important;
}
/* Разделителните линии вътре в менюто */
.dropdown-contents hr {
border-top-color: #99CCFF !important;
}
/* 9. ПОТРЕБИТЕЛСКИ КОНТРОЛЕН ПАНЕЛ (UCP) - ФИКС */
/* Основен фон на панела */
#cp-main .panel {
background-color: #005199 !important;
border: 1px solid #99CCFF !important;
color: #FFFFFF !important;
}
/* Стилизиране на табовете (горното меню в UCP) */
#tabs ul li a {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #12A3EB 100%) !important;
color: #003399 !important;
border: 1px solid #99CCFF !important;
font-weight: bold !important;
}
#tabs ul li.activetab a {
background-image: linear-gradient(to bottom, #99CCFF 0%, #005199 100%) !important;
color: #FFFFFF !important;
border-bottom: none !important;
}
/* Страничното меню в UCP */
#cp-menu .navigation li a {
background-color: #003399 !important;
color: #99CCFF !important;
border: 1px solid #005199 !important;
}
#cp-menu .navigation li.active-subsection a {
background-color: #12A3EB !important;
color: #FFFFFF !important;
}
/* Оправяне на невидимите текстове в статистиките и настройките */
.details, .details dt, .details dd, label {
color: #FFFFFF !important;
}
/* Списъкът с приятели/врагове и други под-панели */
.cp-mini {
background-color: #003399 !important;
border: 1px solid #99CCFF !important;
}
/* Полетата за въвеждане в контролния панел */
.inputbox {
background-color: #FFFFFF !important;
color: #000000 !important;
border: 1px solid #99CCFF !important;
}
При първа възможност ще се постарая, както да обновя синята тема с икони, характерни за оригиналната синя тема, така и да създам още една, която да наподобява черната тема, за тези от вас които я предпочитат.
Започнах работа по черната тема, но за съжаление нямам много възможност да се концентрирам върху проверка на кода. За сега съм направил нещо базово, колкото да прилича и да работи, но все още има вид на дялано с тесла. Ето кода:
