Скрипты для Волшебного форума
Пошаговая инструкция, как применять личные скрипты на форуме:
1) Залогиньтесь на форум под своим логином и паролем
2) Щёлкните по своему нику в верхнем главном меню
3) В подменю выберите Настройки
4) Поставьте флаг "Применить скрипты"
5) В поле "Персональный CSS" вставьте код на языке CSS
6) В поле "Персональный JavaScript" вставьте код на языке JavaScript. Можно задействовать jQuery
7) Далее нажмите кнопку "Сохранить на сервере" и в браузере Ctrl-F5 (обновить всё).
8) Если что-то пойдёт не так, то почистите куки в браузере (сбросится флаг "Применить скрипты")
Дату и время сообщения расположить в одну строку
CSSdiv.message-date { display:inline-block; }
div.message-time { display:inline-block; clear: none; }
Уменьшить ширину левой колонки внутри веток
CSS
.topicTable col.left {
width: 200px;
}
Подсветить свои сообщения (только слева)
JavaScript$( document ).ajaxSuccess(function( event, xhr, settings ) {
postRefresh();
});
function postRefresh() {
$a = $('a.message-user[data-user-id="'+JS_ENTERED_USER_ID +'"]');
$a.closest('td').css({"background":"#DDEEDD"});
}
postRefresh();
Подсветить сообщения автора ветки
JavaScript$( document ).ajaxSuccess(function( event, xhr, settings ) {
postRefresh();
});
function postRefresh() {
// подсветить сообщения автора ветки
$tr0 = $('tr.message-row[data-key="' + JS_TOPIC_ID + '#0"]');
ts = $tr0.find("a.message-user").data("user-id");
$a = $('a.message-user[data-user-id="' + ts + '"]');
$a.css({"color":"#006600"}); // цвет ника
$a.closest('td').css({"background":"#EEEEFF"}); // цвет фона левой ячейки
}
postRefresh();
Показать секции, скрытые по умолчанию
JavaScript$('tr[data-section="politics"').show();
$('tr[data-section="spam"').show();
Установить флаг "Модератор" в форме ответа (только модераторам)
JavaScript$("#as_admin").prop("checked",true);
$( document ).ajaxSuccess(function( event, xhr, settings ) {
postRefresh();
});
function postRefresh() {
//флаг модератора в форме "Новая тема"
$("#as_admin").prop("checked",true);
}
postRefresh();
Мобильный дизайн
CSS
@media (orientation: portrait) {
body {
font-family: 'Noto Sans', sans-serif;
max-width: 100vw;
color: #212121;
}
img {
max-width: 100vw;
}
.hide_mobile {
display: none !important;
}
#nav .knowledge,
#nav .sections,
#nav .job,
#nav .about {
display: none;
}
#quick-search-form {
display: none;
}
#top-banners {
display: none;
}
.plus {width: 10px; }
.replies {width: 20px; }
.topic {width: 100%; }
.arena { display:none; }
.section { display:none; }
.author { display:none; }
.updated { display:none; }
.topicTable col.left {
width: 170px;
}
}
Выделение веток пользователя в списке
CSS
#topicsList tr[data-author-id="1"] { /* здесь надо указать ID пользователя */
background-color: #EEFFEE; /* цвет фона */
}
#topicsList tr[data-author-id="1"]>td.topic>a.topic-link { /* здесь надо указать ID пользователя */
color: #005500; /* цвет ссылки */
}
Раскраска веток по разделам
CSS
#topicsList tr[data-arena="1c"] {background-color: #ffd0d0;}
#topicsList tr[data-arena="it"] {background-color: #d0ffff;}
#topicsList tr[data-arena="job"] {background-color: #d6fff1;}
#topicsList tr[data-arena="life"] {background-color: #e3e3e3;}
#topicsList tr[data-arena="moder"] {background-color: #ff7f7f;}
Скрыть сообщения заданных пользователей
JavaScript
$( document ).ajaxSuccess(function( event, xhr, settings ) {
postRefresh();
});
function postRefresh() {
if (typeof JS_TOPIC_ID !== 'undefined') {
// скрыть все сообщения указанных пользователей (игнор-лист)
hideNames = ["Ник1","Ник2"]; // имена пользователей
for (var k in hideNames) {
$a = $('a.message-user[data-user-name="' + hideNames[k] + '"]');
$a.closest('tr').css({"display":"none"});
}
}
}
Большая ссылка "Форум" в нижнем колонтитуле:
CSS
td.footer-nav>a:first-child {
font-size: 150%;
font-weight: bold;
}
Кнопка "Список" справа от кнопки "Обновить" для перехода к списку тем
JavaScript:
$('#buttonRefreshTopic').after('<a href="/" class="sendbutton" style="margin-right:15px;
margin-left:5px; background-color:#EEE; border: 1px solid #666; height:30px; font-
size:78%;">Список</a>');
Настройка ширины колонок главного списка веток
CSS
#topicsList {
table-layout: fixed;
width: 99%;
}
#topicsList .plus { width: 30px; }
#topicsList .replies { width: 50px; }
#topicsList .topic { width: 100%; } /* в процентах */
#topicsList .arena { width: 60px; }
#topicsList .section { width: 150px; }
#topicsList .author { width: 200px; }
#topicsList .updated { width: 250px; }
Выделение текущей строки списка веток (над которой курсор мыши)
CSS
#topicsList tr:hover {
background-color: #EEF;
}
Убрать подчёркивание у заголовков веток
CSS
#topicsList td.topic a.topic-link {
text-decoration: none; /* совсем убрать */
/* text-decoration: underline dotted; */ /* пунктир */
}
/* таки подчёркивать при наведении */
#topicsList td.topic a.topic-link:hover {
text-decoration: underline;
}
См. также
https://kb.mista.ru/article.php?id=985 |