Правка визуала сайта под себя

Простой гайд для пользователей, которым не нравится новый дизайн.

Конечный результат
Конечный результат

Подготовка

Для дальнейших манипуляций будет использоваться расширения для хрома User CSS, позволяющие редактировать стили. Аналогичные расширения есть и для других браузеров, а дальнейшие действия в них совпадают. Наша задача заменить несколько стилей.

Расширяем записи

По каким-то причинам сейчас записи зашиты на 640 пикселей. На широком мониторе это смотрится ужасно, поэтому заменим это на процентное соотношение. Я для себя выбрал 95% от ширины основного раздела.

.layout--feed.layout--column-left-on.layout--column-right-on #page_wrapper{ width:95%; }

Расширяем внутри записей

Чтобы внутри записей тоже все выровнять добавляем аналогичное шаманство

.layout--content.layout--column-left-on.layout--column-right-on.layout--ad-blocked #page_wrapper, .layout--content.layout--column-left-on.layout--column-right-on.layout--live-priority #page_wrapper { max-width: 95%; } .layout--content.layout--column-left-on.layout--column-right-on.layout--ad-blocked.layout--ad-blocked .layout--a, .layout--content.layout--column-left-on.layout--column-right-on.layout--ad-blocked.layout--ad-blocked .layout--b, .layout--content.layout--column-left-on.layout--column-right-on.layout--ad-blocked.layout--propaganda-off .layout--a, .layout--content.layout--column-left-on.layout--column-right-on.layout--ad-blocked.layout--propaganda-off .layout--b, .layout--content.layout--column-left-on.layout--column-right-on.layout--live-priority.layout--ad-blocked .layout--a, .layout--content.layout--column-left-on.layout--column-right-on.layout--live-priority.layout--ad-blocked .layout--b, .layout--content.layout--column-left-on.layout--column-right-on.layout--live-priority.layout--propaganda-off .layout--a, .layout--content.layout--column-left-on.layout--column-right-on.layout--live-priority.layout--propaganda-off .layout--b { width: 95%; }

Убираем прямой эфир

Перед вставкой кода сверните прямой эфир стрелкой, после чего просто сделаем его невидимым.

.live, .live_head { visibility: hidden; }

Альтернатива удаления

В случае с прямым эфиром можно обойтись блокировщиками рекламы для этого снова свернуть блок, после чего в блокировщик добавить правило

dtf.ru##.live_head

После таких манипуляций строка останется, но станет не активной и случайный клик по ней не будет её разворачивать

Profit

Так выглядит сайт до изменений

А так после изменений

Разумеется каждый может "поиграться" с удобными для них параметрами.

133133
88 комментариев

С таким отношением только мобильная версия (там только уебищную кнопку добавили возле лого, в остальном все так же)

24
Ответить

Либо я не обновился, либо не понимаю о чем ты. Покажешь скрин?

Ответить

В мобильной ненамного лучше.

Ответить

А как открыть мобильную версию, не подскажете?

Ответить

Пользователи исправляют и делают дизайн сайта лучше, чем сам ДТФ. Просто удивительно.
PS. Чимде, может запилишь опрос насчёт нового дизайна? Ну, чтобы мы лучше понимали друг друга, и вы бы осознали насколько плох этот дизайн.

18
Ответить

Комментарий недоступен

7
Ответить

Рад помочь! Аналогично можно и на других сайтах применять, почему-то модно делать тонну пустого пространства.

6
Ответить