Редактируем форум

yuryol
Автор темы
Не в сети
Живу я здесь

Больше

5 года 11 мес. назад - 5 года 11 мес. назад #117412 от yuryol

yuryol создал тему: Редактируем форум

В чате зашла речь об изменении высоты чата на главной страницы, поэтому решил сделать небольшую справку о том, как можно отредактировать стили сайта, которые вам чем-то не устраивают. Учитывая что дизайн сайта вряд ли когда-то обновят, а если даже начнут обновлять, то будет много споров, что как сделать, то использовать свои стили - лучший вариант

УСТАНОВКА

1. Устанавливаем в хром расширение user-javascript-and-css . Теперь мы сможем устанавливать свои стили CSS и даже применять скрипты, которые останутся даже после перезагрузки страницы

2. Появляется значок расширения. Нажимаем на него, а затем на название сайта

3. В открывшимся окне теперь можно писать свои стили (в правом столбике) и скрипты (в левом столбике) которые сохранятся даже после перезагрузки страницы

НАПРИМЕР:

1. В чате есть ограничение 350 символов, причем мы не видим когда наше сообщение превысило это значение. Мы можем добавить цифры , обозначающие длину сообщения прямо на кнопку. Причем при вводе символов эти цифры будут меняться в реальном времени. Когда будет 0 или отрицательное число - значит следует остановиться.

Для этого пишем следующий скрипт и вставляем его в столбик слева

Code:

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;)

Code:

#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;
}

И добавляем скрипт в левый (на самом деле можно обойтись и стилями но лень рыться в них)

Code:

document.getElementById('chatbarText').style.width = '415px';

3. Лично мне не нравится, что вверху много места занимает баннер с ПМ, поэтмоу я его всегда скрываю (надеюсь, победители ПМ на меня не обидятся)

ВНИМАНИЕ: Спойлер!

Добавляем стили в правый столбик

Code:

#maintop{
    display: none;
}

4. Меню я тоже обычно удаляю. Если хочется зайти на форум то жму ссылку "читать подробно" в окошке "Последние темы форума". Чтобы выйти на главную страничку с форума просто удаляю соответствующий путь в адресной строке. Остальными пунктами меню вообще не пользуюсь. Можно конечно заморочиться и стилизовать меню но мне лень.

ВНИМАНИЕ: Спойлер!

Добавляем стили

Code:

#header, #breadcrumbs{
    display: none;
}

ИТОГО:
Если вы пользуетесь какими-то особыми стилями - пишите сообщения в теме, может возьмем на вооружение. Также приветствуются предложения, даже если вы не шарите в коде - попробую накидать сам, если будет время и предложение понравится.

Последнее редактирование: 5 года 11 мес. назад пользователем yuryol.

Спасибо сказали: Dmy, Lekste, DK, Демий, RastaManGames, WhitePaper, uanarch1st, Marganec, LiRo, RobotD

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

yuryol
Автор темы
Не в сети
Живу я здесь

Больше

5 года 10 мес. назад - 5 года 10 мес. назад #117430 от yuryol

yuryol ответил в теме Редактируем форум

Добавляем отображение картинок в чате:

Code:

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()

Добавляем время в пост

Code:

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:

Последнее редактирование: 5 года 10 мес. назад пользователем yuryol.

Спасибо сказали: DK, Демий, VeselyRodger, LiRo

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

yuryol
Автор темы
Не в сети
Живу я здесь

Больше

5 года 10 мес. назад - 5 года 10 мес. назад #117481 от yuryol

yuryol ответил в теме Редактируем форум

Добавил возможность закрывать большинство панелек на главной странице. Теперь можно подстроить сайт немного под себя

JS:

Code:

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

Code:

.badge{
    display: none;
}
#contenttop .box-3.deepest.with-header{
	padding-top: 0;
}
.mod-rounded .header{
	cursor: pointer;
}

Также удалил совершенно лишние и в плохом качестве иконки "шляпа", "колечко" и другие возле названий этих панелек

CSS:

Code:

.badge{
    display: none;
}

В этом случае также надо удалить в скрипте выше "parent.querySelector('.badge').style.display =", т.е. стрчока будет выглядеть так

Code:

parent.querySelector('.box-3.deepest.with-header div').style.display = display;

Последнее редактирование: 5 года 10 мес. назад пользователем yuryol.

Спасибо сказали: DK, Phileas, LiRo

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

yuryol
Автор темы
Не в сети
Живу я здесь

Больше

5 года 10 мес. назад - 5 года 10 мес. назад #117842 от yuryol

yuryol ответил в теме Редактируем форум

Блокировка пользователя в чате:

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

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

1) Жмем правой кнопкой по сообщению пользователя в чате и жмем "посмотреть код". Откроется консолька, в которой будет выделена строка типа

Code:

<li id="comment-new319387" data-userid="111" class="unblockable" style="background-color: rgb(255, 255, 255);">

где вместо "111" - id пользователя. Запоминаем его

2) В CSS добавляем следующий код и в принципе всё, сообщения пользователя больше не увидите

Code:

li[data-userid="111"] {
        display: none;
}

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

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

1) Добавляем в CSS

Code:

li[data-userid="111"] {
	opacity: 0;
	cursor: pointer;
	border: solid 1px #333;
}

2)Добавляем в JS

Code:

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");

Последнее редактирование: 5 года 10 мес. назад пользователем yuryol.

Спасибо сказали: DK

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Dmy
Не в сети
Заблокирован

Больше

5 года 10 мес. назад - 5 года 10 мес. назад #117880 от Dmy

Dmy ответил в теме Редактируем форум

Хотите заблокировать человека, а он успел заблокировать вас первым? Зайдите на страницу его профиля (там будет написано, что просмотр недоступен) и введите в консоли браузера такой код:

Code:

joms.users.confirmBlockUser(js_profileId);

Консоль браузера обычно можно открыть клавишей F12. По умолчанию туда может быть запрещено копипастить текст (чтобы разрешить, надо будет ввести текст типа "allow pasting" или "разрешить вставку" — браузер сам напишет, что нужно ввести).

Последнее редактирование: 5 года 10 мес. назад пользователем Dmy.

Спасибо сказали: DK, yuryol

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

yuryol
Автор темы
Не в сети
Живу я здесь

Больше

5 года 9 мес. назад #118689 от yuryol

yuryol ответил в теме Редактируем форум

Наверняка многие даже не знают, ЧТО дает кнопочка "Важная" в шапке темы. Потому что, чтобы затем зайти в это "важное", следует пройти долгий путь до личного кабинета и тыкаться во всплывающее меню.

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

Code:

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

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Dmy
Не в сети
Заблокирован

Больше

5 года 7 мес. назад #119619 от Dmy

Dmy ответил в теме Редактируем форум

Иногда хочется заигнорить человека не только в чате, но и в списке пользователей онлайн. Этого можно добиться таким кодом CSS (я добавляю через плагин для Фаерфокса Stylus):

Code:

#jwTabsAndSlidersModule120 .cThumbsList li {
  margin: 0;
}
#jwTabsAndSlidersModule120 .cThumbsList li a {
  margin: 7px 0 0 5px;
}

#jwTabsAndSlidersModule120 a[href="/social/mypage/demetrius"],
#jwTabsAndSlidersModule120 a[href="/social/mypage/yuryol"] {
  display: none;
}

Вместо demetrius и yuryol надо написать нужные ID страниц. Чтобы узнать ID страницы конкретного человека, можно щёлкнуть по аватарке в списке людей онлайн.

Естественно, можно повторять столько раз, сколько нужно, главное не забывать запятые между строками (и не ставить запятую перед скобкой).

Спасибо сказали: DK, yuryol

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Время создания страницы: 0.121 секунд

Работает на Kunena форум

Редактируем форум

Панель Участника