Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
470

Убираем красивое оформление коротких постов⁠⁠

Как многие заметили, теперь у коротких текстовых постов имеется разноцветный такой фон. Вдруг случайно увидел просьбу это убрать и за пару минут набросал правило для ublock origin.

1. Открыть настройки μBlock:

Убираем красивое оформление коротких постов Пикабу, Дизайн, Блокировка рекламы, Оформление, Короткопост

2. В список фильтров дописать две строчки

3. Не забыть сохранить все изменения

Убираем красивое оформление коротких постов Пикабу, Дизайн, Блокировка рекламы, Оформление, Короткопост

Для тех, кто не умеет копировать с скриншотов дублирую текстом:

! Disable fancy style for short posts
pikabu.ru##svg.icon--ui__bg-story-short
pikabu.ru##+js(rc.js, story_short, .story_short, stay)

5. Обновить страницу с Пикабу

6. Вы великолепны, поздравляю!

P.S. Тестировалось только с μBlock и вряд ли заведется где-то ещё.

UPD: Настоятельно рекомендую альтернативный способ. В настройках юблока в вкладке "список фильтров" в самом низу можно импортировать целый список. Укажите этот адрес: https://f.sldr.xyz/raw/pikabu_unfancy_rules. Во-первых, эта версия работает быстрее, а во-вторых я смогу её обновить.

[моё] Пикабу Дизайн Блокировка рекламы Оформление Короткопост
109

Пикабу головного мозга

3.3K пост7.9K подписчиков

Добавить пост

Правила сообщества

В сообществе не допускаются:

- оскорбления;

- флуд и спам;

- непотребный контент
Вы смотрите срез комментариев. Показать все
30
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Если кто перепишет на чистом css без жаваскрипта, тот молодец и получит от меня спасибо

раскрыть ветку (31)
44
Аватар пользователя privetpokakaeshprivetpokakaesh
Автор поста оценил этот комментарий

body {

display: none

}

раскрыть ветку (5)
23
Аватар пользователя nazarpunknazarpunk
Автор поста оценил этот комментарий

!important забыл

ещё комментарии
8
DELETED
Автор поста оценил этот комментарий

Вот. На AdGuard работает.
pikabu.ru#$#svg.icon--ui__bg-story-short { display:none!important; }


pikabu.ru#$#.story_short .story__content-inner { background:none!important;color:var(--color-black-940)!important;font-size:14px!important;align-items:flex-start!important;min-height:0!important;padding:0!important;line-height:24px!important; }


pikabu.ru#$#.story_short .story__content-inner>.story-block { text-align:left!important;padding-left:25px!important;padding-right:25px!important; }


pikabu.ru#$#.story_short .story__content-inner>.story-block>p { text-align:left!important;font-weight:400!important; }


Иллюстрация к комментарию
раскрыть ветку (19)
4
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

О, спасибо. Было очень лень выписывать все эти правила, тем более что юблок кажись такое не умеет.

Правда я бы unset попробовал, кажется что с светлой темой здесь проблемы будут. Не проверял, правда

раскрыть ветку (17)
0
DobroMax1
Автор поста оценил этот комментарий

Умеет замечательно. Только синтаксис чуть другой.


pikabu.ru#$#.story_short .story__content-inner>.story-block>p { text-align:left!important;font-weight:400!important; }


pikabu.ru##.story_short .story__content-inner>.story-block>p:style(text-align:left!important;font-weight:400!important;)

раскрыть ветку (16)
2
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Хм, и правда, что-то я не сумел найти эту фичу.

Вот набор правил юблока на основе замечательного набора правил css от другого пикабушника: https://f.sldr.xyz/raw/pikabu_unfancy_rules — можно указывать в качестве списка правил в юблоке. Даже пост обновил


К сожалению, на МВ padding должен быть в районе 16px вместо 24px, это несколько усложняет ситуацию. Но css работает быстрее и приятнее моей версии с remove-class.js

раскрыть ветку (15)
2
Carburn
Автор поста оценил этот комментарий

что за MB?

раскрыть ветку (1)
1
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Мобильная браузерная версия

0
DobroMax1
Автор поста оценил этот комментарий

Ваша версия сильно лаконичнее. Скорость работы не замерял, а про приятнее вообще непонятно как сравнивать :-)

раскрыть ветку (12)
1
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Скорость работы легко увидеть когда короткопост оказывается на экране сразу. Версия с жс срабатывает с небольшой задержкой.

CSS мне больше нравится тем, что он лучше поддерживается другими блокировщиками и работает быстрее. Но, к сожалению, он гораздо сильнее зависит от верстки и может внезапно сломаться =(

раскрыть ветку (11)
0
DobroMax1
Автор поста оценил этот комментарий

Кстати, вы были правы - задержка наличествует. Блин. Не хотелось бы стилями хардкодить всё же.

0
Аватар пользователя zassasinzbywhyzassasinzbywhy
Автор поста оценил этот комментарий
Бро, а ты на js плотно пишешь? Можешь пнуть в верную сторону для начала изучения?
раскрыть ветку (9)
5
DELETED
Автор поста оценил этот комментарий

https://learn.javascript.ru/js

раскрыть ветку (3)
1
Аватар пользователя zassasinzbywhyzassasinzbywhy
Автор поста оценил этот комментарий
Спасибо 💙
раскрыть ветку (2)
4
DELETED
Автор поста оценил этот комментарий

Для тренировки/практики, советую реализовывать разные задумки, как писали ТС, сделать калькулятор, а так же крестики-нолики*, морской бой, список задач и прочее, включая свои задумки. Не стесняться искать в гугле решения, но только перед их использованием следует их понять, осознать и попробовать реализовать своими силами.

Так же можно порешать различные задачки на сайтах:
https://www.codewars.com
https://www.codingame.com - задачи предоставлены в виде игры
https://binarysearch.com - здесь уже посложнее, но мне нравится

Больше давать не буду, а то можно свихнуться :)

*крестики-нолики - можно сделать одного из игроков ботом, для бота можно написать алгоритм минимакс для поиска лучшего хода (https://en.wikipedia.org/wiki/Minimax), алгоритм прост и есть куча информации о его реализации на JS в гугле.

раскрыть ветку (1)
1
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Нет, жс не мой язык, я его только недавно начал тыкать. Решил, что с самым популярным языком всё-таки стоит ознакомится.


Могу посоветовать взять и начать что-то делать для себя. Хоть игру, хоть калькулятор. Хорошо помогает, но нужно какое-то понимание что такое программирование, иначе совсем тяжко.

раскрыть ветку (4)
1
Аватар пользователя zassasinzbywhyzassasinzbywhy
Автор поста оценил этот комментарий
Поняв, спасибо за ответ о7
1
Carburn
Автор поста оценил этот комментарий

какой язык твой?

раскрыть ветку (1)
1
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Люблю и умею в Rust

0
DobroMax1
Автор поста оценил этот комментарий

Все же он не самый популярный. Более правильно сказать, что один из. </zanuda mode off>

0
Carburn
Автор поста оценил этот комментарий

Как нашел нужные стили?

2
Аватар пользователя ParkadParkad
Автор поста оценил этот комментарий

Ещё вариант предложил пользователь @9poIIIa тут: #comment_217641048

Не проверял (как и другие на css), но выглядит очень правильно и пруфы работоспособности приложены. Большое ему спасибо.

1
DELETED
Автор поста оценил этот комментарий

Тс, лучше расскажи как копировать текст со скрина?

1
Carburn
Автор поста оценил этот комментарий

на чистом css слишком много правил нужно.

1
DELETED
Автор поста оценил этот комментарий

Как-то так?


svg.icon--ui__bg-story-short {

display: none!important;

}

.story_short .story__content-inner {

background: none!important;

color: var(--color-black-940);

font-size: 14px; align-items: flex-start;

min-height: 0;

padding: 0;

line-height: 25px;

}


И еще по центрированию, но это, я думаю, не подействует.


.story_short .story__content-inner .story-block {

text-align: left;

padding-left: 0;

padding-right: 0;

}

.story_short .story__content-inner .story-block p {

text-align: left!important;

}

раскрыть ветку (1)
0
Carburn
Автор поста оценил этот комментарий

Как нашел нужные стили?

Вы смотрите срез комментариев. Чтобы написать комментарий, перейдите к общему списку