Офтоп
Fenrir
2987

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

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

В закладки
Конечный результат

Подготовка

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Fenrir", "author_type": "self", "tags": ["page_wrapper"], "comments": 88, "likes": 127, "favorites": 104, "is_advertisement": false, "subsite_label": "flood", "id": 64227, "is_wide": false, "is_ugc": true, "date": "Fri, 16 Aug 2019 12:11:53 +0300", "is_special": false }
0
{ "id": 64227, "author_id": 105948, "diff_limit": 1000, "urls": {"diff":"\/comments\/64227\/get","add":"\/comments\/64227\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/64227"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "last_count_and_date": null }
88 комментариев
Популярные
По порядку
Написать комментарий...
24

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

Ответить
0

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

Ответить
7

Кнопка возле лого. А еще ник в профиле жутковато увеличился, мда.

Ответить
0

У меня такого нет. Видимо, не обновился.

Ответить
1

Точно про сайт?

Ответить
3

Мобильная версия сайта, не приложение.

Ответить
0

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

Ответить
3

Уменьшаешь окно браузер и вот. Адаптивный дизайн без отдельной мобильной версии.

Ответить
0

Ааа, все, понял.

Ответить
0

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

Ответить
0

Там хотя бы текст на весь экран, а не клочок по центру.

Ответить
0

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

Ответить
18

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

Ответить
7

Долгих лет жизни тебе, прекрасный человек! Спасибо!

Ответить
5

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

Ответить
5

Потому что читать длинные строки неудобно

Ответить
0

место под рекламу(

Ответить
3

Перед оформлением этого поста специально отключил все блокировщики и все равно не увидел в этих местах рекламу.
Я не исключаю, что она у меня режется корпоративной сеткой или просто не всегда показывается, но вертикальные блоки рекламы мне кажется еще лет 5 назад умерли.

Ну и я намеренно писал статью по изменению CSS, а не гайд по выпиливанию рекламы, по идее если там будет реклама и у кого-то не будет блокировщика она нормально покажется.
Все что я сделал это заменил фиксированные размеры в 680px на процентное соотношение. При ширине экрана в 1920px и двух мониторах смотреть на посты шириной в 680 мне кажется очень странным.

Ответить
0

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

Ответить
5

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

Ответить
8

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

Ответить
7

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

Ответить
0

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

Ответить
0

угу, я в принципе вот так сделал
.layout__spacer {
}

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

смотрится вполне здраво.

Ответить
0

По просьбе одного чувака ниже сделал без отступов, посмотри может так больше зайдет
https://hastebin.com/miwovoqafa.css
Найти мой коммент ниже (поиск по ссылке), там есть скрин как выглядит.

Ответить
0

что интересно, в постах их нету, они только в ленте

Ответить
0

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

Ответить
6

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

Ответить
4

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

Ответить
1

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

Ответить
1

Спасибо!

Ответить
0

Рад помочь

Ответить
0

Всем кто будет этим пользоваться: не забываем ";" в конце строки. Я вот забыл и ничего хорошего из этого не вышло :^)

Ответить
4

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

Ответить
4

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

Ответить
0

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

Ответить
–1

Спасибо, конечно дополняйте. Я в этом не особо шарю, сделал лишь бы работало:) Поэтому не уверен, что ничего нигде не поедет.

Ответить
2

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

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

Ответить
0

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

Ответить
1

По мне, самый удобный вариант дтф, в версии для планшета. Там слева лента, справа статьи

Ответить
0

Действительно удобно! Но это приложение, а через браузер полагаю все не так радужно.

Ответить
2

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

Ответить
0

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

Ответить
2

дтф сегодня

Ответить
1

Я понимаю, что это не самое легкая функция, ну почему на сайте аниме-задротов, созданном на коленке, есть поддержка пользовательских стилей, а тут нет

Ответить
0

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

Ответить
–2

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

Ответить
0

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

Ответить
1

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

Ответить
1

Офигегь, куда благодарность кидать?

Ответить
0

Считайте что кинули :)
Думал даже отдельным постом выложить для тех, кто возмущался увеличением ширины постов, ведь я диванный дезигнер, но решил, что оно того не стоит все равно такие всегда недовольны чем-то.

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

Спасибо. Это шутка была, но премного благодарны. )

Ответить
0

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

Ответить
1

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

Ответить
0

Разумеется контекст этот бот не понимает. Впрочем, полагаю, сложно разработать что-то умнее себя.

Ответить
0

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

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

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

Предпочитаю просто не посещать сайты, требующие от пользователя для собственного комфорта расширения и правку css... В чем проблема поднять new.dtf.ru и там отестирооваь дизайн. С таким подходом только котаку)

Ответить
0

анимешники с shiki уходят на mal
геймеры dtf на котаку... Рунет встаёт с колен

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
–3

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

Ответить
0

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

Ответить
0

При том, где и темная тема и 4к.
Думаю Ширяев по-быстрому объяснит плебсу почему так лучше и удобнее.

Ответить
1

╮(︶▽︶)╭

Ответить
0

темная тема - бот.

Ответить
1

В следующем году

Ответить
0

Устроим "чёрную" темной теме ?

Ответить

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovz", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]