Этот момент был неизбежен — теперь по умолчанию на пикабу показывается новый дизайн. Старый дизайн на данный момент доступен через 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;
}
