Войти на сайт

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

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

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

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

УСТАНОВКА

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

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

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


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

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

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



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

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

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

Если перейти на страницу ненавистного вам форумчанина и заблокировать его, то в чате его сообщения будут серенькими, а в разметке страницы добавится класс "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");
Последнее редактирование: 3 мес. 6 дн. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK

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

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

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

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

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


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


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

Редактируем форум 2 дн. 10 ч. назад #119619

  • Dmy
  • Dmy аватар
  • Вне сайта
  • Светлый дракон
  • осторожно, хрупкое
  • Сообщений: 981
  • Спасибо получено: 1987
  • Даритель СтимкеяРазработчикВетеранОратор2 место УчительЗа 2 место на конкурсе маппингаПоддержка ФондаПрограммист RubyПроект месяца 3 место
Иногда хочется заигнорить человека не только в чате, но и в списке пользователей онлайн. Этого можно добиться таким кодом CSS (я добавляю через плагин для Фаерфокса Stylus):
#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.940 секунд