Настраиваем под себя новый дизайн Вконтакте. Простая инструкция
Эта статья предназначена для активных пользователей интернета. Но она может быть полезна и вашим знакомым/родителям. Поделитесь с ними ссылкой и они без вашего вмешательства смогут настроить под себя новый дизайн Вконтакте. Разумеется, если в этом возникла острая необходимость.
Итак, инструкция как настроить новый дизайн Вконтакте, включая просмотрщик фотографий.
Чтобы менять дизайн сайтов существует множество дополнений к браузерам. Вы можете использовать любое, которое вам порекомендуют продвинутые друзья, к примеру Stylish.
Chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
Firefox: https://addons.mozilla.org/ru/firefox/addon/stylish/
Opera: https://addons.opera.com/ru/extensions/details/stylish/
Я лично использую самое простое и, конечно, тоже бесплатное расширение для Хрома My Style: https://chrome.google.com/webstore/detail/my-style/ljdhjpmbn...
1. Всё, что вам нужно это перейти по ссылке и добавить дополнение в ваш браузер — нажать соответствующую кнопку.
2. Зайдите Вконтакте (или перезагрузите страницу, если ВК уже открыт). Нажмите на клавиатуре CTRL+M, если вы выбрали дополнение My Style — с правой стороны сайта откроется белое поле ввода.
3. Затем ниже в этой статье выберите, что вы хотите изменить в дизайне ВК. Скопируйте предложенный код и вставьте его в поле ввода.
Всё, дизайн сразу же поменяется. Если захотите изменить еще что-то, снова скопируйте нужный код и добавьте его в то же поле.
Ниже собран набор стилей, чтобы вы могли поменять что-то, что не нравится в новом дизайне именно вам.
Начнем.
Квадратные аватарки
/* Квадратные аватарки в новостях и комментариях */
/* Если хотите немного скруглить аватарки, поменяйте 0 на 3 */
.post_img { border-radius: 0px; }
.wall_module .reply_img { border-radius: 0px; }
.post_field_user_image { border-radius: 2px; }
Убрать иконки из левого меню
/* Убрать иконки из левого меню */
#side_bar .left_icon { display: none; }
#side_bar .left_label { padding-left: 8px; }
Скрыть свою аватарку из поля ввода комментария и новости
/* Скрыть свою аватарку из поля ввода комментария и новости */
.post_field_user_link { display: none; }
.post_field_wrap, .reply_field_wrap { margin-left: 0; }
.wall_module .reply_fakebox { margin-left: 0; }
Просмотрщик фотографий по центру (почти как раньше)
Вероятно, это самое негативное обновление ВК. Акцент с фотографий сдвинут на комментарии, что может вызывать массу неудобств.
/* Просмотрщик фотографий по центру (почти как раньше) */
.pv_cont .pv_left_wrap { float: none !important; }
.pv_cont, .pv_cont table {
margin: 0px auto;
width: 960px !important;
}
.pv_cont .pv_narrow_column_wrap {
float: none !important;
width: 100% !important;
}
#pv_photo { width: 100% !important; }
#pv_narrow {
width: 100% !important;
height: auto !important;
}
#layer, .pv_light #layer {
padding-bottom: 1px;
margin-top: 20px !important;
}
.pv_cont .pv_close_btn { right: 24px !important; }
Большие картинки в разделе Документы
С маленькими превьюшками совершенно не видно, что на изображено на гифке.
/* Большие картинки в разделе Документы */
.docs_item_thumb {
width: 100px;
height: 80px;
}
.docs_item_thumb_img { max-height: 100%; }
.docs_item_thumb_wrap { margin-left: -80px; }
.docs_item_cont { margin-left: 100px; }
Большие квадратные аватарки в списке друзей
/* Большие квадратные аватарки в списке друзей */
.friends_photo_wrap {
width: 100px;
height: 100px;
}
.friends_photo {
width: 100px;
height: 100px;
}
.friends_photo_img {
width: 100px;
height: 100px;
border-radius: 0px;
}
Квадратные превьюшки в блоке «Ссылки» в сообществах
Сейчас в ВК они могут отображаться некорректно.
/* Квадратные картинки в блоке «Ссылки в сообществах» */
.page_list_module .thumb { border-radius: 0; }
.page_list_module .cell_img { border-radius: 0; }
====
Я предложил набор базовых стилей для настройки дизайна Вконтакте. Читатели Пикабу могут предложить в комментариях свои.
Опытные читатели сразу напомнят о существовании расширений, которые самостоятельно меняют дизайн Вконтакте вообще без использования кода. Однако это не путь джедая :)
Ведь подобные расширения меняют дизайн практически полностью без возможности тонкой настройки. К тому же я практически вернул прежний вид просмотрщику фотографий :)
Надеюсь, эта небольшая инструкция поможет вам и вашим знакомым/родственникам.
Спасибо за то, что не кидаете помидорами за мой первый пост :)
Хотелось сделать его полезным.
Автор: Власов Андрей, главный дизайнер социальной сети Галактикка.
ps. Извращенцам (любителям пробовать новое) могу выдать инвайт :)
