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

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

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

image


Чтобы менять дизайн сайтов существует множество дополнений (расширений) к браузерам. Вы можете использовать любое, которое вам порекомендуют, к примеру 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; }


====

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

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

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

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

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

Проголосовало 32 человека. Воздержалось 16 человек.

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

Поделиться с друзьями
-->

Комментарии (4)


  1. Fedcomp
    24.08.2016 15:49

    Наверное для чайников проще какие нибудь готовые решения. Vkopt вроде недавно обновился под новый вк.


    1. goodsprite
      24.08.2016 16:00

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

      И сложность очень невысокая. Скопировал > вставил > работает.


  1. vconst
    24.08.2016 16:24

    Видимо «воздержавшиеся», ответили на вопрос «все равно»


  1. hurtavy
    24.08.2016 16:34

    Если уж делать квадратные аватарки, то делать везде. Например в диалогах

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