GT Настраиваем под себя новый дизайн Вконтакте. Инструкция для чайников в черновиках Tutorial

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

Здесь мы с вами соберем небольшой набор готовых стилей.

Итак, инструкция как настроить новый дизайн Вконтакте.




Чтобы менять дизайн сайтов существует множество дополнений (расширений) к браузерам. Вы можете использовать любое, которое вам порекомендуют, к примеру Stylish (Chrome, Firefox, Opera)

Я напишу самое простое дополнение для Хрома My Style (им легче всего пользоваться обычным людям).

4 простых шага

1. Теперь всё, что вам нужно это перейти по ссылке и добавить дополнение в ваш браузер — нажать соответствующую кнопку.

2. Зайдите Вконтакте (или перезагрузите страницу, если ВК уже открыт). Нажмите на клавиатуре CTRL+M, если вы выбрали дополнение My Style — с правой стороны сайта откроется белое поле ввода.

3. Затем здесь ниже выберите, что вы хотите изменить в дизайне. Скопируйте предложенный код.

4. Вставьте код в поле ввода.

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

Здесь в этом посте мы соберем набор стилей, чтобы вы могли поменять что-то, что не нравится в новом дизайне именно вам.

Начнем.

Квадратные аватарки

/* Квадратные аватарки в новостях и комментариях */
/* Если хотите немного скруглить аватарки, поменяйте 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; }

====

Если у вас есть свои стили для корректировки нового дизайна Вконтакте, добавляйте их в комментарии.

Вы также можете дополнить инструкцию информацией о других расширениях к браузерам или о методах добавления стилей в другие браузеры.

Надеюсь, эта небольшая инструкция поможет вашим знакомым/родственникам, далеким от технологий.

К сожалению, я не смогу выделить время на поддержку этого поста, отбор новых стилей и добавление в список, отслеживание изменений вёрстки ВК. Много работы — сам занимаюсь разработкой социальной сети.

Для извращенцев любителей нового могу дать инвайт. Но помните, идёт бета-тестирование.

.nim-peer .nim-peer--photo-w