{"id":3842,"url":"\/distributions\/3842\/click?bit=1&hash=4c67e91a2a588f03561899c61c4eabfeb37008500c6498f3b9533b2e8845d454","title":"\u041e\u0431\u043e\u0436\u0430\u0435\u0442\u0435 \u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0445? ","buttonText":"\u0412\u0430\u043c \u0441\u044e\u0434\u0430","imageUuid":"11cfcef6-3125-52d0-8ef8-49fb205d3efe","isPaidAndBannersEnabled":false}
Офтоп
Fenrir

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

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

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

Подготовка

Для дальнейших манипуляций будет использоваться расширения для хрома 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

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

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

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

0
88 комментариев
Написать комментарий...
shhh

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

Ответить
Развернуть ветку
Узкий Илья

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

Ответить
Развернуть ветку
7 комментариев
Журавлев Павел

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

Ответить
Развернуть ветку
1 комментарий
Никита Кириллович

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

Ответить
Развернуть ветку
Sorrow1987

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Fenrir
Автор

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

Ответить
Развернуть ветку
4 комментария
Внутренний дебаркадер

У меня будет свой дтф, с блекджеком и Елистратовым

Ответить
Развернуть ветку
Макс Володин

Без Елистратова, ты хотел сказать?

Ответить
Развернуть ветку
2 комментария
Тазик Эвтаназик

больше всего бесят эти уебанские отступы, сука на кой хер мне столько пустого пространства, что мне с ним делать ? В банки закатывать ?

Ответить
Развернуть ветку
Fenrir
Автор

Выше и разобрано как их убрать

Ответить
Развернуть ветку
2 комментария
Аккаунт заморожен

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

Ответить
Развернуть ветку
Павел Трубко

.layout__column--center {
flex-grow: 0;
}

Ответить
Развернуть ветку
Dmitry R

Дожили, блядь, правим рукожопую вёрстку юзер-стайл-браузер-гайдами.
Хотя, чего греха таить, сам расширил это недоразумение до 95% и кое что утащил из вашего примера, спасибо!

Ответить
Развернуть ветку
Dogmod .

А можно ли при этом сдвинуть этот блок влево?
Приклеить к краю, так сказать
Раздражает не сколько наличие пустого места, сколько то, что оно везде.

Ответить
Развернуть ветку
Fenrir
Автор

Можно, в правилах для page-wrapper запишите margin-left: 0px

Ответить
Развернуть ветку
3 комментария
Fenrir
Автор
Ответить
Развернуть ветку
Александр Кост

Все просили темную тему, а запилили убогий новый дизайн. Ну спасибо, чо.

Ответить
Развернуть ветку
Тёмная Тема

( ̄ヘ ̄)

Ответить
Развернуть ветку
Max Ignatyev

Мой, чуть отредактированный, вариант для FullHD: https://hastebin.com/miwovoqafa.css.
Контент ограничил в 800 пикселей и отцентрировал более менее, картинки занимают всю ширину колонок, как и в оригинальном дизайне.

Ответить
Развернуть ветку
Fenrir
Автор

Хотел закрепить Ваш комментарий вверху, но не нашел как это сделать.
Хорошо получилось, с Вашего позволения дополню вечером, если редактирование не будет закрыто.
Я думал над картинками подшаманить, но писал в обед на работе и был ограничен по времени.
Собственно главная сложность была разобраться с редактором dtf, мне больше по душе маркдаун или аскидок, а не странные блоки.

Ответить
Развернуть ветку
1 комментарий
el viajero alex

Но ведь читать супер длинные строчки неудобно же. В этом плане есть правила типографики в вэб дизайне. Удобнее всего, когда в одной строчке +- 10 слов, а не 20-30.

Согласен, что в полноэкранном режиме смотрится странно сайт.

Ответить
Развернуть ветку
Fenrir
Автор

Для этого я указал, что любой может заменить 95% на более удобное значение или вообще применять только часть этих правил.

Ответить
Развернуть ветку
2 комментария
Razamanaz

Большое спасибо. Теперь наконец-то смогу настроить сайт под себя.

Ответить
Развернуть ветку
Fenrir
Автор

Всегда пожалуйста :)

Ответить
Развернуть ветку
max power

дтф сегодня

Ответить
Развернуть ветку
Аккаунт заморожен

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

Ответить
Развернуть ветку
ABPa1n

Пойду поставлю свечку за тёмную тему в приложении...

Ответить
Развернуть ветку
Тёмная Тема

Не в приоритете

Ответить
Развернуть ветку
Макс Володин

Чуваки, а что бы блоки располагались вот так, можно сделать?)

Ответить
Развернуть ветку
Fenrir
Автор

Нет ничего невозможного.
Код по ссылке ниже
https://hastebin.com/ahunusuyof.css

Ответить
Развернуть ветку
2 комментария
Журавлев Павел

А с Фаерфоксом что делать?

Ответить
Развернуть ветку
Fenrir
Автор

Я не пользуюсь лисом, поэтому не могу подсказать точно, но думаю подойдет Custom Style Script. Сами стили применять те же.
https://addons.mozilla.org/ru/firefox/addon/custom-style-script/

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
NikiStudio

А есть гайд для гуманитариев?

Ответить
Развернуть ветку
Fenrir
Автор

1) Скачать расширение
2) Кликнуть на иконке расширения в верхнем правом углу, откроется редактор
3) Скопипастить весь текст в отдельных блоках в этот редактор

Ответить
Развернуть ветку
1 комментарий
Павел Казьмин

Было бы прекрасно, если бы этим занимались не энтузиасты и по их наводке пользователи, а сами разработчики дизайна, но видимо основные силы были брошены на бота троллирующего просящих тёмную тему.

Ответить
Развернуть ветку
Тёмная Тема

Вот иди и сделай

Ответить
Развернуть ветку
1 комментарий
- -

Хотел подождать до завтра, мало ли что-то ещё изменят, но не выдержал. Как сторонник минимализма сделал так. Как ни странно, переполниться праведным гневом за день так и не получилось. Редизайн воспринял подозрительно спокойно. Просто наблюдал за бурлением. Сколько раз уже это происходило. На разных ресурсах.

У меня Firefox с uBlock Origin. И знаете, сделал почти как было у меня до этого. Количество правил уменьшилось почти в два раза. А когда я обнаружил вверху раскрывающийся список со скобочкой: "Свежее", "Популярное" и т.д. совсем успокоился.

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

Спасибо автору поста за его помощь пользователям.

Ответить
Развернуть ветку
Fenrir
Автор

Рад был помочь. Может быть если через пару дней все не успокоятся сделаю отдельно подборку самых интересных решений.

Ответить
Развернуть ветку
Индивидуальный Мурод

Наверн да, надо читать дтф теперь с телефона, а на пеке удалить из закладок. Чот говно какое-то.

Ответить
Развернуть ветку
Garry Vambare

Здорово, щеглы! Сегодня будем учиться делать свой сайт с блекджеком и шлюхами, и без Елистратова.

А тут Шериф с выражением лица Пикачу заявляется: Ничоси! Вы чего, офигели? Идите на свой форум вы*бываться!

Ответить
Развернуть ветку
Tiger Claw

Дуров верни стену!!!! Ну а вообще мне не понравился новый дизайн.

Ответить
Развернуть ветку
Аналитический турник

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

Ответить
Развернуть ветку
Аккаунт заморожен

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

Ответить
Развернуть ветку
Scrblmer

А можно как-нибудь сделать так, чтобы по нажатию кнопки "Назад" в браузере на Андроиде закрывалась открытая картинка, а не вкладка?

Ответить
Развернуть ветку
Fenrir
Автор

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

Ответить
Развернуть ветку
Роман Новиков Версия 8

Было нормально, стало полное говно. О максимальном количестве символов в строке, нужных для комфортного чтения автор, конечно, не слышал — ему главное поругать.

Ответить
Развернуть ветку
Fenrir
Автор

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

Ответить
Развернуть ветку
Vlad Makarov

Узнали? Согласны?

Ответить
Развернуть ветку
Alex Fielding

Вспоминаю каноформер для канобу

Ответить
Развернуть ветку
Кирилл Сердитов

Снова смертные все должны чинить сами

Ответить
Развернуть ветку
Reverse Shift

Я ничего не хочу сказать, но кажется редакции стоит нанять какого-нибудь индуса на аутсорс UI/UX. Так будет эффективнее.

Ответить
Развернуть ветку
Михаил Панькин

Серьёзно?) Когда дочитываешь строчку её начало уходит из поля зрения и на следующую уже сложно перескочить когда текст длинный, модификация максимальной бесполезности...
Длинна строки не просто так сжимается диванные вы дизигнеры.)

Ответить
Развернуть ветку
A X

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

Stylus (Fireefox): https://addons.mozilla.org/en-US/firefox/addon/styl-us/
Stylem (Palemoon): https://addons.palemoon.org/addon/stylem/

Ответить
Развернуть ветку
Юрий Владимирович

Мне вот интересно, как чувствуют сейчас себя патриоты стима и противники ЕГС ? Будут кроить под себя или уйдут на канобу/пикабушеньку где все по-старому ? ))

Ответить
Развернуть ветку
Шашков Михаил

Казалось бы, причём тут ЕГС и Стим?

Ответить
Развернуть ветку
5 комментариев
Читать все 88 комментариев
null