Как изменить дизайн в Вконтакте ?



После глобальной смены дизайна VK, произошедшего 18 августа, появилось массу негативных отзывов в адрес дизайнеров, и в целом Mail Group. Мол корень зла в смене руководства, при Дурове такого не было.

Не нравиться дизайн ? Сделайте сами! :)

Подготовка

1. Cкачиваем расширение Stylish

Если у Вас браузер FireFox https://addons.mozilla.org/ru/firefox/addon/stylish/
Для Chrome -  https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe/related?hl=ru
Opera или Yandex, то подойдёт версия для хрома.

Stylish  - Расширение для браузера, для применения своих CSS файлов к любым сайтам.
Теперь в любой сайт можно внести правки в шаблон сайта.

2. Создаём файл стиля для vk.com

Chrome:


Mozilla:

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

Mozilla:

 

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

Chrome:

 

Творим

3. Меняем фон.
Первое, что не понравилось пользователям в VK это унылый сервый цвет фона.
Давайте это исправим и сменим фон белый.

В Mozila будем писать код в между этих строк.
@-moz-document domain("vk.com") {
 
}

В Chrome сразу в текстовое поле.

Пропишем:

body {
    background: #FFF;
 }

#FFF = Белый цвет в HEX. Каталог цветов тут.

4. Убираем ненужный блок ссылок

 
  .left_menu_nav_wrap {
    display: none !important;
  }
 

5. Убираем закруглённость

.chat_tab_img, .post_img, .page_list_module .thumb, .page_list_module .cell_img, .module_body .people_cell_img, .friends_photo_img, .friends_photo_wrap .ui_zoom_inner, .right_list_img, .wall_module .reply_img, .top_profile_img, .nim-dialog.nim-dialog_classic .nim-dialog--photo .nim-peer .nim-peer--photo .im_grid > img, .nim-dialog.nim-dialog_classic .nim-dialog--photo .nim-peer .nim-peer--photo > img, .nim-peer .nim-peer--photo-w, .nim-peer.nim-peer_small .im_grid > img, .nim-peer .nim-peer--photo .im_grid > img, .nim-peer .nim-peer--photo > img, .group_row_photo, .group_row_img, .ow_ava.ow_ava_small, .apps_feed_user_photo img, .fans_fan_img, .ui_zoom_inner, .wall_module .copy_post_img, .search_item_img, .ts_contact_img, a.fc_msgs_img, .ow_ava.ow_ava_comm, .like_tt_image, .poll_tt_image, .wddi_img, .wdd_imgs, .post_field_user_image {
  border-radius:0;
}

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


- Навыки CSS я получил с помощью курса CSS Практика от Евгения Попова




Оставить заявку
Имя
Email
Телефон
Опишите суть
Написать сообщение
Имя
Email
Сообщение