Войти на сайт

Авторизация, ждите ...
×

ТЕМА: Редактируем форум

Редактируем форум 3 мес. 2 нед. назад #117412

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1462
  • Спасибо получено: 2276
  • 3 место ГотвКомпозитор1 место в ГотвУчительОратор2 место Победитель конкурсаОрганизатор конкурсов
В чате зашла речь об изменении высоты чата на главной страницы, поэтому решил сделать небольшую справку о том, как можно отредактировать стили сайта, которые вам чем-то не устраивают. Учитывая что дизайн сайта вряд ли когда-то обновят, а если даже начнут обновлять, то будет много споров, что как сделать, то использовать свои стили - лучший вариант

УСТАНОВКА

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 мес. 2 нед. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, Lekste, DK, Демий, RastaManGames, WhitePaper, Marganec, LiRo, RobotD

Редактируем форум 3 мес. 2 нед. назад #117430

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1462
  • Спасибо получено: 2276
  • 3 место ГотвКомпозитор1 место в ГотвУчительОратор2 место Победитель конкурсаОрганизатор конкурсов
Добавляем отображение картинок в чате:


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"), и просто сетТаймаутом - из-за кривенького обновления чата как надо не работает :unsure:
Последнее редактирование: 3 мес. 2 нед. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK, Демий, VeselyRodger, LiRo

Редактируем форум 3 мес. 1 нед. назад #117481

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1462
  • Спасибо получено: 2276
  • 3 место ГотвКомпозитор1 место в ГотвУчительОратор2 место Победитель конкурсаОрганизатор конкурсов
Добавил возможность закрывать большинство панелек на главной странице. Теперь можно подстроить сайт немного под себя



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 мес. 1 нед. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK, Phileas, LiRo

Редактируем форум 2 мес. 4 нед. назад #117842

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1462
  • Спасибо получено: 2276
  • 3 место ГотвКомпозитор1 место в ГотвУчительОратор2 место Победитель конкурсаОрганизатор конкурсов
Блокировка пользователя в чате:

Если перейти на страницу ненавистного вам форумчанина и заблокировать его, то в чате его сообщения будут серенькими, а в разметке страницы добавится класс "igorned". К сожалению, серенький цвет все-равно виден очень четко, поэтому многим наверное хотелось бы полностью скрыть сообщения.

Тут возникает еще одна проблема - чат работает криво и часто класс "ignored" тупо исчезает, а потому лучше использовать атрибут "data-userid". Тем более тогда не будет зависимости от того, добавлени пользователь в блок или нет

1) Жмем правой кнопкой по сообщению пользователя в чате и жмем "посмотреть код". Откроется консолька, в которой будет выделена строка типа
<li id="comment-new319387" data-userid="111" class="unblockable" style="background-color: rgb(255, 255, 255);">
где вместо "111" - id пользователя. Запоминаем его

2) В CSS добавляем следующий код и в принципе всё, сообщения пользователя больше не увидите
li[data-userid="111"] {
        display: none;
}

Показ сообщений заблокированного пользователя в чате:


Если вы хотите при случае все-таки посмотреть сообщения, то вместо того, чтобы удалять сообщения полностью можно сделать его прозрачным. А при клике сообщение появится.
Например, вот что будем если заблочим Коуту :mad:


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");
Последнее редактирование: 2 мес. 4 нед. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK

Редактируем форум 2 мес. 4 нед. назад #117880

  • Dmy
  • Dmy аватар
  • Вне сайта
  • Бог Светлого
  • осторожно, хрупкое
  • Сообщений: 974
  • Спасибо получено: 1975
  • За 2 место на конкурсе маппингаУчительВетеранОратор2 место Программист RubyДаритель СтимкеяРазработчикПоддержка ФондаПроект месяца 3 место
Хотите заблокировать человека, а он успел заблокировать вас первым? Зайдите на страницу его профиля (там будет написано, что просмотр недоступен) и введите в консоли браузера такой код:
joms.users.confirmBlockUser(js_profileId);

Консоль браузера обычно можно открыть клавишей F12. По умолчанию туда может быть запрещено копипастить текст (чтобы разрешить, надо будет ввести текст типа "allow pasting" или "разрешить вставку" — браузер сам напишет, что нужно ввести).
Последнее редактирование: 2 мес. 4 нед. назад от Dmy.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK, yuryol

Редактируем форум 1 мес. 2 нед. назад #118689

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1462
  • Спасибо получено: 2276
  • 3 место ГотвКомпозитор1 место в ГотвУчительОратор2 место Победитель конкурсаОрганизатор конкурсов
Наверняка многие даже не знают, ЧТО дает кнопочка "Важная" в шапке темы. Потому что, чтобы затем зайти в это "важное", следует пройти долгий путь до личного кабинета и тыкаться во всплывающее меню.


Скрипт добавляет пункт меню "Избранные темы" на главную страницу вместо пункта "Мои группы", чтоб можно было быстро перейти к избранным тобой темам


document.querySelectorAll('.cHello-Menu div')[1].innerHTML = 
`<i class="com-icon-favorite"></i>
&nbsp;
<a href="/forum/topics/user/mode-favorites/sel--1">Избранные темы</a>`

Можно конечно сделать, чтоб пункт меню появлялся не вместо "Мои группы", но так как ими никто не пользуется и я его все-равно хотел у себя удалить, то сделал заменой.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: LiRo
Время создания страницы: 0.923 секунд