Убираем плавающую шапку или новому дизайну - бой⁠⁠

Этот момент был неизбежен — теперь по умолчанию на пикабу показывается новый дизайн. Старый дизайн на данный момент доступен через old.pikabu.ru, но, возможно, это временно.

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

Короче, я запилил тему, как сделать новый дизайн удобнее и может быть даже юзабельным. Итак:

1. Скачиваем плагин для хрома, позволяющий встраивать на страницу собственные стили: https://chrome.google.com/webstore/detail/bloat-free-user-st... . Плагин не мой, но я смотрел его код и вредоносов там никаких не обнаружено.

2. Идем на вкладку расширений (chrome://extensions/), находим там «Bloat-free user stylesheets», жмем кнопку Options. Появится окно с полем ввода. В этом окне можно прописывать собственные стили. Формат такой:

## адрес сайта.ru

[тут стили для этого сайта]

## адрес сайта 2.ru

[стили для другого сайта]

и т.п.

Стили пишутся на языке CSS, кому интересно - гуглите, учитесь и пишите собственные стили.

3. В конце поста я написал стили, которые фиксят те или иные фичи. Копируем их целиком либо частично (по своему желанию) в это окно, нажимаем Save. Возле каждого стиля я написал комментарий (он находится внутри символов /* ... /* и не воспринимается браузером) о том, что делает каждый стиль.

4. ...

5. PROFIT!!1

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

Пишите, что еще нужно изменить на сайте, чтобы новый дизайн стал удобным не только с точки зрения админов. Также, кому интересно, могу запилить пост о том, как сделать квадратные аватарки в ВК или телеграме.

Собственно, сами стили:

## pikabu.ru

/* Сделать аватарки квадратными */

.header-right-menu__item,

.avatar,

.avatar img,

.avatar__default,

.avatar__inner,

.avatar__inner > img {

border-radius: 2px !important;

}

/* Убрать увеличение аватарки при наведении */

.avatar:hover img,

.avatar:hover .avatar__default,

.community-avatar:hover img {

transform: none !important;

}

/* Убрать блеклость аватарок когда не наведена мышка */

.user .avatar_op {

opacity: 1 !important;

}

/* Убрать плавающую шапку */

.header_fixed {

position: absolute !important;

}

/* Убрать плавающий блок справа */

.sidebar__inner_fixed {

position: static !important;

}

/* Вернуть серый фон у тегов */

.tags__tag {

background: #ededed !important;

padding: 0 8px !important;

margin: 0 0px 4px 0 !important;

border-radius: 4px !important;

}

/* Увеличить кнопку "Обновить комментарии" */

.comments-navigator__refresh {

padding: 10px 16px !important;

}