Войти на сайт
×
ТЕМА: Редактируем форум
Редактируем форум 3 года 10 мес. назад #117412
        |
В чате зашла речь об изменении высоты чата на главной страницы, поэтому решил сделать небольшую справку о том, как можно отредактировать стили сайта, которые вам чем-то не устраивают. Учитывая что дизайн сайта вряд ли когда-то обновят, а если даже начнут обновлять, то будет много споров, что как сделать, то использовать свои стили - лучший вариант
УСТАНОВКА 1. Устанавливаем в хром расширение user-javascript-and-css . Теперь мы сможем устанавливать свои стили CSS и даже применять скрипты, которые останутся даже после перезагрузки страницы 2. Появляется значок расширения. Нажимаем на него, а затем на название сайта  3. В открывшимся окне теперь можно писать свои стили (в правом столбике) и скрипты (в левом столбике) которые сохранятся даже после перезагрузки страницы  НАПРИМЕР: 1. В чате есть ограничение 350 символов, причем мы не видим когда наше сообщение превысило это значение. Мы можем добавить цифры , обозначающие длину сообщения прямо на кнопку. Причем при вводе символов эти цифры будут меняться в реальном времени. Когда будет 0 или отрицательное число - значит следует остановиться.  Для этого пишем следующий скрипт и вставляем его в столбик слева let chatbarText = document.getElementById('chatbarText');
let submitchat = document.getElementById('submitchat');
submitchat.value = 350;
chatbarText.oninput = function() {
submitchat.value = 350 - chatbarText.value.length
};2.Чат невысокий а сообщение мы пишем снизу чата, что не особо удобном ВНИМАНИЕ: Спойлер! Добавляем стили в правый столбик (чтобы уменьшить-увеличить размер чата, меняем цифры в height: 428px;) #main-shift{
width: 100%;
}
#page.column-left #main-shift{
width: 580px;
}
#middle-expand #right {
width: 180px;
margin-left: -400px;
}
#chatForm{
height: 42px;
background: #fff;
position: absolute;
top: 2px;
left: 12px;
}
#chatoutput{
height: 428px;
padding-top: 45px;
}
#chatForm #chatbarText{
width: 415px;
}document.getElementById('chatbarText').style.width = '415px';3. Лично мне не нравится, что вверху много места занимает баннер с ПМ, поэтмоу я его всегда скрываю (надеюсь, победители ПМ на меня не обидятся) ВНИМАНИЕ: Спойлер! Добавляем стили в правый столбик #maintop{
display: none;
}4. Меню я тоже обычно удаляю. Если хочется зайти на форум то жму ссылку "читать подробно" в окошке "Последние темы форума". Чтобы выйти на главную страничку с форума просто удаляю соответствующий путь в адресной строке. Остальными пунктами меню вообще не пользуюсь. Можно конечно заморочиться и стилизовать меню но мне лень. ВНИМАНИЕ: Спойлер! Добавляем стили #header, #breadcrumbs{
display: none;
}ИТОГО: Если вы пользуетесь какими-то особыми стилями - пишите сообщения в теме, может возьмем на вооружение. Также приветствуются предложения, даже если вы не шарите в коде - попробую накидать сам, если будет время и предложение понравится. |
|
|
Редактируем форум 3 года 10 мес. назад #117430
|
Добавляем отображение картинок в чате:
 function addImg() {
document.querySelectorAll('#outputList li>a').forEach(userItem => {
let format = userItem.href.substr(userItem.href.length-3, 3);
if (format == 'jpg' || format == 'png' ) {
userItem.innerHTML = `<p><img src="${userItem.href}" width="100%" height="auto" alt="${userItem.href}"></p>`;
};
});
};
addImg()Добавляем время в пост  function addDataPost () {
document.querySelectorAll('#outputList li').forEach(function(el, id) {
let ava = el.children[1];
let message = el.children[1].title+' назад';
if (!el.children[2]) {
let p = document.createElement('P');
p.innerHTML = message;
el.appendChild(p);
}
});
}
addDataPost()Вот только как это сделать, чтобы всё работало и после появления нового поста в чате - непонятно. Пробовал и через "mutation observer", и через addEventListener("DOMNodeInserted"), и просто сетТаймаутом - из-за кривенького обновления чата как надо не работает  |
|
|
Редактируем форум 3 года 10 мес. назад #117481
|
Добавил возможность закрывать большинство панелек на главной странице. Теперь можно подстроить сайт немного под себя
 JS: document.querySelectorAll('.mod-rounded .header').forEach(function(el, id) {
el.addEventListener('click', function () {
let parent = el.parentElement,
display;
if (parent.querySelector('.box-3.deepest.with-header div').style.display == 'none'){
display = 'block';
} else {
display = 'none';
}
parent.querySelector('.box-3.deepest.with-header div').style.display = parent.querySelector('.badge').style.display = display;
})
})CSS .badge{
display: none;
}
#contenttop .box-3.deepest.with-header{
padding-top: 0;
}
.mod-rounded .header{
cursor: pointer;
}Также удалил совершенно лишние и в плохом качестве иконки "шляпа", "колечко" и другие возле названий этих панелек CSS: .badge{
display: none;
}В этом случае также надо удалить в скрипте выше "parent.querySelector('.badge').style.display =", т.е. стрчока будет выглядеть так parent.querySelector('.box-3.deepest.with-header div').style.display = display; |
|
|
Редактируем форум 3 года 9 мес. назад #117842
|
Блокировка пользователя в чате:
Если перейти на страницу ненавистного вам форумчанина и заблокировать его, то в чате его сообщения будут серенькими, а в разметке страницы добавится класс "igorned". К сожалению, серенький цвет все-равно виден очень четко, поэтому многим наверное хотелось бы полностью скрыть сообщения. Тут возникает еще одна проблема - чат работает криво и часто класс "ignored" тупо исчезает, а потому лучше использовать атрибут "data-userid". Тем более тогда не будет зависимости от того, добавлени пользователь в блок или нет 1) Жмем правой кнопкой по сообщению пользователя в чате и жмем "посмотреть код". Откроется консолька, в которой будет выделена строка типа <li id="comment-new319387" data-userid="111" class="unblockable" style="background-color: rgb(255, 255, 255);">2) В CSS добавляем следующий код и в принципе всё, сообщения пользователя больше не увидите li[data-userid="111"] {
display: none;
}Показ сообщений заблокированного пользователя в чате: Если вы хотите при случае все-таки посмотреть сообщения, то вместо того, чтобы удалять сообщения полностью можно сделать его прозрачным. А при клике сообщение появится. Например, вот что будем если заблочим Коуту   1) Добавляем в CSS li[data-userid="111"] {
opacity: 0;
cursor: pointer;
border: solid 1px #333;
}2)Добавляем в JS function addIgnore(id) {
document.querySelectorAll(`li[data-userid="${id}"]`).forEach(function(el) {
el.addEventListener('click', function () {
el.style.opacity = (el.style.opacity == 0) ? 1 : 0;
})
});
}
addIgnore("111"); |
|
|
Редактируем форум 3 года 9 мес. назад #117880
        |
|
|
Редактируем форум 3 года 8 мес. назад #118689
|
Наверняка многие даже не знают, ЧТО дает кнопочка "Важная" в шапке темы. Потому что, чтобы затем зайти в это "важное", следует пройти долгий путь до личного кабинета и тыкаться во всплывающее меню.
Скрипт добавляет пункт меню "Избранные темы" на главную страницу вместо пункта "Мои группы", чтоб можно было быстро перейти к избранным тобой темам  document.querySelectorAll('.cHello-Menu div')[1].innerHTML =
`<i class="com-icon-favorite"></i>
<a href="/forum/topics/user/mode-favorites/sel--1">Избранные темы</a>`Можно конечно сделать, чтоб пункт меню появлялся не вместо "Мои группы", но так как ими никто не пользуется и я его все-равно хотел у себя удалить, то сделал заменой. |
|
|
Редактируем форум 3 года 6 мес. назад #119619
|
|
|