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

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

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

chrome.google.com

User CSS

A quick and easy way to add custom CSS to the current web site.

По каким-то причинам сейчас записи зашиты на 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

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

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

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

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

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

shhh

16.08.2019

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

Ответить

Phobiastrike

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

VizierQ

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

Никита Кириллович

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

Sorrow1987

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

Аккаунт удален

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

Fenrir

Автор

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

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

Подготовка

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

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

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

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

Profit