Алтернативни теми за форумот

[Nandor The Relentless]

Дојде и тоа време да придонесам нешто за заедницата, без да барам милион шилинзи.

Направив User Agent CSS за стандардната тема во која се изменети некои работи како:
- големина на фонт,
- растојание меѓу елементи низ целиот форум,
- некои други додатоци што ги сметав за потребни.

Доколку на некој му се допаѓа, релативно лесно е да се додаде во browser.
За Мек и Тош немам никакво искуство, па простете јаболчина мои...

Еве брз преглед како тоа изгледа.
https://drive.google.com/file/d/1zOxtIF3fHFKzeWgatrI8pWzUwQc4rHpE/view?usp=sharing

Лесно е да се адаптира на други фонтови доколку сметате дека не се доволно читливи.
Лично, целев кон тоа да има јасна разлика меѓу тоа што е наслов, што стандарден текст/линк, а што копче/линк

Windows / Opera

Најлесен од сите

1) треба да се инсталира овој add-on
https://addons.opera.com/en/extensions/details/addcss/

2) Горе десно во мени, кликнете го AddCSS копчето и ќе отвори:

Domain: forum.carclub.mk
Your CSS for this domain:

3) Уфрлете го овој код и кликнете Save and reload

Код: [Избери]

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap&family=Open+Sans+Condensed:wght@700&display=swap');

body,
input, button, select, textarea,
.middletext,
.smalltext, tr.smalltext th {
    font: 14px/130% "Open Sans", "Arial", "Helvetica", sans-serif!important;
}


.inner {
    padding: 10px 10px 20px 0;
}

.table_list tbody.content td.info a.subject,
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th,
ul.quickbuttons {
    font-family: 'Open Sans Condensed', sans-serif;
}


.normaltext {
    line-height: 1.7em;
}

.button_submit, .button_reset {
    font-family: 'Open Sans Condensed', sans-serif!important;
    text-transform: uppercase;
    font-size: 17px;
    cursor: pointer;
    padding: 10px 20px 14px;
}


blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    margin: 1.5em 0;
}


table.table_grid td {
    padding: 10px 20px !important;
}

.subject span > a,
a.subject {
    font-size: 20px!important;
    font-weight: bold!important;
}
.subject p {
    font-size: 14px;
    margin-top: 5px!important;
}

.topic_table td.subject span a {
    font-family: 'Open Sans Condensed', sans-serif;
}
.topic_table td.subject p a {
    color: #666!important;
}
.topic_table td.subject p small a {
    background: #ccc;
    color: #333!important;
    padding: 2px 7px;
}
.topic_table td.subject p small a:hover {
    text-decoration: none;
    opacity: .8;
}

table.table_list tbody.content td.lastpost {
    font-size: 14px!important;
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    font-size: 14px!important;
}
.codeheader, .quoteheader {
    font-size: 14px!important;
}
a.navPages {
    background: #bc0c0c;
    color: #fff!important;
    padding: 5px 10px;
    display: inline-block;
}
a.navPages:hover {
    text-decoration: none;
    opacity: .8;
}

.pagelinks strong {
    background: #ccc;
    color: #333;
    padding: 5px 20px;
    margin-left: -5px;
    margin-right: -5px;
    position: relative;
    z-index: 9;
    display: inline-block;
}

.pagelinks a strong {
    background: #bc0c0c;
    color: #fff!important;
}
.pagelinks a strong:hover {
    opacity: .8;
}

.pagesection {
    padding: 10px 7px!important;
}


ul.quickbuttons li.like_button,
ul.quickbuttons li.unlike_button,
ul.quickbuttons li.quote_button,
ul.quickbuttons li.modify_button {
    background-position: 10px 8px;
    background-color: #bc0c0c;
    padding: 0;
}
ul.quickbuttons li.unlike_button {
    background-color: #ccc;
}
ul.quickbuttons li.quote_button {
    background-color: #333;
}
ul.quickbuttons li.like_button a,
ul.quickbuttons li.unlike_button a,
ul.quickbuttons li.quote_button a,
ul.quickbuttons li.modify_button a {
    color: #fff;
    padding: 7px 15px 7px 30px;
}
ul.quickbuttons li.unlike_button a {
    color: #333;
}

ul.quickbuttons li.like_button:hover,
ul.quickbuttons li.unlike_button:hover,
ul.quickbuttons li.quote_button:hover,
ul.quickbuttons li.modify_button:hover {
    opacity: .8;
}
ul.quickbuttons li.like_button:hover a,
ul.quickbuttons li.unlike_button:hover a,
ul.quickbuttons li.quote_button:hover a,
ul.quickbuttons li.modify_button:hover a {
    text-decoration: none;
}


div#upper_section div.user ul li {
    margin-bottom: 7px;
}

.post img:not(.smiley) {
    max-width: 300px;
}

.post img + br {
    height: 20px;
}

.oharaEmbed { margin: 30px 0; }


.poster {
    border-right: 2px solid #ddd;
    text-align: center;
}
.poster h4 {
    padding: 0 20px 0 0;
}


#forumposts .post_separator {
    display: block;
    background: none;
    height: 5px;
}
.post_separator + .windowbg,
.post_separator + .windowbg2 {
    margin: -25px 0 20px;
    border-top: 1px solid #ddd;
}
.post_separator + .windowbg .topslice,
.post_separator + .windowbg2 .topslice {
    display: none;
}

h1.forumtitle img { max-width: 280px; }

Windows / Firefox

Горно мени: Help / Troubleshooting Information

Под Profile Folder отвори го фолдерот
Создај фолдер /chrome/
Внатре создај фајл со ова име userContent.css

Треба плус да се внесе about:config како адреса горе, и да се пребара следново подесување: toolkit.legacyUserProfileCustomizations.stylesheets - и да се смени вредноста во True. Потоа ќе функционира.


Вметни го овој код во фајлот:

Код: [Избери]

@-moz-document domain(forum.carclub.mk) {
body,
input, button, select, textarea,
.middletext,
.smalltext, tr.smalltext th {
    font: 14px/130% "Open Sans", "Arial", "Helvetica", sans-serif!important;
}


.inner {
    padding: 10px 10px 20px 0;
}

.table_list tbody.content td.info a.subject,
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th,
ul.quickbuttons {
    font-family: 'Open Sans Condensed', sans-serif;
}


.normaltext {
    line-height: 1.7em;
}

.button_submit, .button_reset {
    font-family: 'Open Sans Condensed', sans-serif!important;
    text-transform: uppercase;
    font-size: 17px;
    cursor: pointer;
    padding: 10px 20px 14px;
}


blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    margin: 1.5em 0;
}


table.table_grid td {
    padding: 10px 20px !important;
}

.subject span > a,
a.subject {
    font-size: 20px!important;
    font-weight: bold!important;
}
.subject p {
    font-size: 14px;
    margin-top: 5px!important;
}

.topic_table td.subject span a {
    font-family: 'Open Sans Condensed', sans-serif;
}
.topic_table td.subject p a {
    color: #666!important;
}
.topic_table td.subject p small a {
    background: #ccc;
    color: #333!important;
    padding: 2px 7px;
}
.topic_table td.subject p small a:hover {
    text-decoration: none;
    opacity: .8;
}

table.table_list tbody.content td.lastpost {
    font-size: 14px!important;
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    font-size: 14px!important;
}
.codeheader, .quoteheader {
    font-size: 14px!important;
}
a.navPages {
    background: #bc0c0c;
    color: #fff!important;
    padding: 5px 10px;
    display: inline-block;
}
a.navPages:hover {
    text-decoration: none;
    opacity: .8;
}

.pagelinks strong {
    background: #ccc;
    color: #333;
    padding: 5px 20px;
    margin-left: -5px;
    margin-right: -5px;
    position: relative;
    z-index: 9;
    display: inline-block;
}

.pagelinks a strong {
    background: #bc0c0c;
    color: #fff!important;
}
.pagelinks a strong:hover {
    opacity: .8;
}

.pagesection {
    padding: 10px 7px!important;
}


ul.quickbuttons li.like_button,
ul.quickbuttons li.unlike_button,
ul.quickbuttons li.quote_button,
ul.quickbuttons li.modify_button {
    background-position: 10px 8px;
    background-color: #bc0c0c;
    padding: 0;
}
ul.quickbuttons li.unlike_button {
    background-color: #ccc;
}
ul.quickbuttons li.quote_button {
    background-color: #333;
}
ul.quickbuttons li.like_button a,
ul.quickbuttons li.unlike_button a,
ul.quickbuttons li.quote_button a,
ul.quickbuttons li.modify_button a {
    color: #fff;
    padding: 7px 15px 7px 30px;
}
ul.quickbuttons li.unlike_button a {
    color: #333;
}

ul.quickbuttons li.like_button:hover,
ul.quickbuttons li.unlike_button:hover,
ul.quickbuttons li.quote_button:hover,
ul.quickbuttons li.modify_button:hover {
    opacity: .8;
}
ul.quickbuttons li.like_button:hover a,
ul.quickbuttons li.unlike_button:hover a,
ul.quickbuttons li.quote_button:hover a,
ul.quickbuttons li.modify_button:hover a {
    text-decoration: none;
}


div#upper_section div.user ul li {
    margin-bottom: 7px;
}

.post img:not(.smiley) {
    max-width: 300px;
}

.post img + br {
    height: 20px;
}

.oharaEmbed { margin: 30px 0; }


.poster {
    border-right: 2px solid #ddd;
    text-align: center;
}
.poster h4 {
    padding: 0 20px 0 0;
}


#forumposts .post_separator {
    display: block;
    background: none;
    height: 5px;
}
.post_separator + .windowbg,
.post_separator + .windowbg2 {
    margin: -25px 0 20px;
    border-top: 1px solid #ddd;
}
.post_separator + .windowbg .topslice,
.post_separator + .windowbg2 .topslice {
    display: none;
}

h1.forumtitle img { max-width: 280px; }
}
Windows / Chrome

1) Инсталирајте add-on
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

2) Слично како Opera, горе десно отворете ја екстензијата / Manage

3) Write new style со одбрано as Usercss и уфрлете го истиот код како горе за Firefox

[The-spiki]

Ај сеа темна тема за форум и да те частиме пиво

[386ka]

За Firefox, треба плус да се внесе about:config како адреса горе, и да се пребара следново подесување: toolkit.legacyUserProfileCustomizations.stylesheets - и да се смени вредноста во True. Потоа ќе функционира.

[Nandor The Relentless]

Не знам дали е ова за сите... кај мене не се сеќавам да сум го местел рачно.
Ама исто постои шанса да сум го направил многу одамна и да не се сеќавам...

Сега ќе уредам текст одново...

[Astraion]

Фала ти за идејата друже, ми даде ветар во грбот со кодот. Морав да ги сменам фонтовите, оти баш Jost и Open Sans не ми се уклапаат со форумов, а навикнат сум на мобилен со Roboto.. 
Чепнав и некои детали со пагинација и копчиња, врз твојата скрипта, имаше троа паддинг повечко.
Нека стои и мојата верзија тука кај тебе во темата, може ќе сака некој "почисто" форумско искуство од твоето. 

Код: [Избери]

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

body,
input, button, select, textarea {
    font: 15px/100% 'Roboto', 'Arial', 'Helvetica', sans-serif !important;
}

.normaltext {
    line-height: 1.5em;
}

.button_submit, .button_reset {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 20px 14px;
}


.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th,
ul.quickbuttons {
    font-family: 'Roboto', sans-serif;
}
.middletext,
.smalltext, tr.smalltext th {
    font-family: 'Roboto', sans-serif;
}


.subject p {
    font-size: 14px;
}

.topic_table td.subject span a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
.topic_table td {
    font-size: 14px;
    color: #424242;
}
.stats windowbg {
    font-size: 14px;
 
}
.topic_table td.subject p small a {
    background: #fff;
    color: #C1380C!important;
    padding: 1px 4px;
    border-radius:6px;
    font-size: 10px;
    font-weight: 500;
}
.topic_table td.subject p small a:hover {
    text-decoration: none;
    background: #C1380C;
    color: #fff!important;
}

table.table_list tbody.content td.lastpost {
    font-size: 16px!important;
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    font-size: 14px!important;
}
.codeheader, .quoteheader {
    font-size: 14px!important;
}
a.navPages {
    font-size: 12px;
    padding: 2px 6px;
    display: inline-block;
    border-radius: 4px;
}
a.navPages:hover {
    text-decoration: none;
    background: #bc0c0c;
    color: #fff;
}

.pagelinks strong {
    font-size: 12px;
    background: #f2f2f2;
    padding: 2px 6px;
    margin-left: -5px;
    margin-right: -5px;
    position: relative;
    z-index: 9;
    display: inline-block;
    border-radius: 4px;

}
.pagelinks a strong:hover {
    color: #fff!important;
}
.pagelinks a strong:hover {
    background: #bc0c0c;
}

.pagesection {
    padding: 20px 7px!important;
}


ul.quickbuttons li.like_button,
ul.quickbuttons li.unlike_button,
ul.quickbuttons li.modify_button,
ul.quickbuttons li.notify_button,
ul.quickbuttons li.reply_button,
ul.quickbuttons li.quote_button {
    background-position: 10px 8px;
    background-color: #bc0c0c;
    border-radius:2px;
    padding: 0;
}
ul.quickbuttons li {
    margin: 0 0 0 4px;
}
ul.quickbuttons li.quote_button,
ul.quickbuttons li.notify_button,
ul.quickbuttons li.modify_button {
    background-color: #333;
}
ul.quickbuttons li.like_button a,
ul.quickbuttons li.unlike_button a,
ul.quickbuttons li.modify_button a,
ul.quickbuttons li.reply_button a,
ul.quickbuttons li.notify_button a,
ul.quickbuttons li.quote_button a {
    color: #fff;
    padding: 8px 15px 8px 30px;
}
ul.quickbuttons li.like_button:hover,
ul.quickbuttons li.unlike_button:hover,
ul.quickbuttons li.quote_button:hover,
ul.quickbuttons li.reply_button:hover,
ul.quickbuttons li.notify_button:hover,
ul.quickbuttons li.modify_button:hover {
    opacity: .8;
}
ul.quickbuttons li.like_button:hover a,
ul.quickbuttons li.unlike_button:hover a,
ul.quickbuttons li.quote_button:hover a,
ul.quickbuttons li.reply_button:hover a,
ul.quickbuttons li.notify_button:hover a,
ul.quickbuttons li.modify_button:hover a {
    text-decoration: none;
}


div#upper_section div.user ul li {
    font-size: 13px;
    margin: 6px 0;
}

.main_rekl { display:none; }

.post img:not(.smiley) {
    max-width: 300px;
}

.post img + br {
    height: 20px;
}

Ќе апдејтирам код ако ми текне и за други козметички измени.

[Nandor The Relentless]

Тој Робото го утепавме од ескплоатирање со години, почнав да ќивам кога ќе му го прочитам името ))

Ама пак е многу читлив, овој Jost го одбрав комплетно на памет, при избор од тие што ги има Google со целосна кирилична поддршка.
Мислам дека сепак ќе вратам на крај на Open Sans или Roboto.

Стави една слика од твојот skin, ако сака некој друг да го користи да знае како изгледа попрецизно.

Јас ќе направам ново видео кога ќе пуштам нов ажуриран skin.

[JezuzNoChill]

Ај сеа темна тема за форум и да те частиме пиво

+милион шилинзи

[Nandor The Relentless]

Ај сеа темна тема за форум и да те частиме пиво

+милион шилинзи

Малку помачно е, а и ми опадна еланот.
Ама ќе ја направиме.

Да го усовршиме постоечково, па ќе ја фарбаме темно зелена, да не давате милион за нефарбана.

[Astraion]

Изволте темна тема. Мислам дека ќе си останам на оваа, ептен добро ми легна на форумот. 

Форумов не дозволува многу линии код, така да select all од линков и paste кај вас во аддонот.
https://pastebin.com/raw/fQmT4vdm

[AllMightyMe]

Може и насловитр на темите да бидат бело/светло крем?

Зошто црно/портокалово/црвено не дава баш добар контраст.

Секоја чест за придонесот.

[Astraion]

Нема многу придонес, чепнато е фонт и некои ситници, другите 98% се онлајн конверзија на кодот од светла во темна тема.
Таман си е контрастот, пробај го навечер или во темно и ќе ти стане јасно. 

[zeroSignal]

Уууу јако, браво! Благодарам момци!

[The-spiki]

Изволте темна тема. Мислам дека ќе си останам на оваа, ептен добро ми легна на форумот. 

Е браво, фала ти многу. Само за ова не е доволно едно пиво, ќе биде колку можеш да испиеш
Контактирај ме кога сакаш

[vladic3110]

Класниот треба на собир еден кег пиво да пријави за ова

[zeroSignal]

Да се ослободам малку со обврски и ќе направам нејтив темна тема за форумов. Мене (лично) не ми треба, но штом има интерес...