Иконки для вертикального меню ВКонтакте

18.04.2011 в 06:44
7.6K
просмотров
5
комментариев
14
оценок
К сожалению, данный материал более не актуален
Данные иконки появятся напротив всех пунктов в вертикальном меню. Для каждого пункта своя иконка, к тому же есть изначальная и при наведении.

Стили адаптированы мной (Архангел'ом) для двух видов контакта: с .php и без .php.


Вот и сам стиль:
Code
/*для модулей с .php*/
#vkontakte #pageBody{margin-left:0!important}
#sideBar {width:130px!important;margin-left:2px!important}
#sideBar li>a{padding-left:22px!important;background-repeat:no-repeat!important;background-position:3px -62px!important}
#sideBar .hasedit{width:83px!important}
#sideBar .edit{width:20px!important;padding:3px 0 3px 1px!important;color:rgba(0,0,0,0)!important}
#sideBar .edit:active{color:rgba(0,0,0,0)!important}
#sideBar li>a[href*="app"]:not([href*="apps"]), #sideBar li>a[href*="app"]:hover:not([href*="apps"]), #sideBar li>a[href*="app"]:hover:active:not([href*="apps"]){background-position:3px 1px!important}

#sideBar .hasedit{background-image:url("http://vk.com/images/icons/people_s.gif")!important}
#sideBar .edit{background-image:url("http://vk.com/images/icons/tags_s.gif")!important}
#sideBar li>a[href*="friends"]{background-image:url("http://vk.com/images/icons/friends_s.gif")!important}
#sideBar li>a[href*="albums"]{background-image:url("http://vk.com/images/icons/photos_s.gif")!important}
#sideBar li>a[href*="video"]{background-image:url("http://vk.com/images/icons/video_s.gif")!important}
#sideBar li>a[href*="audio"]{background-image:url("http://vk.com/images/icons/audio_s.gif")!important}
#sideBar li>a[href*="mail"]{background-image:url(http://style-thing.my1.ru/i/mail.gif)!important;background-position:3px -64px!important}
#sideBar li>a[href*="im"]{background-image:url(http://style-thing.my1.ru/i/mail.gif)!important;background-position:3px -64px!important}
#sideBar li>a[href*="notes"]{background-image:url("http://vk.com/images/icons/pages_s.gif")!important}
#sideBar li>a[href*="groups"]{background-image:url("http://vk.com/images/icons/groups_s.gif")!important}
#sideBar li>a[href*="events"]{background-image:url("http://vk.com/images/icons/events_s.gif")!important;background-position:3px -63px!important}
#sideBar li>a[href*="feed"]{background-image:url("http://vk.com/images/icons/notesplus_s.gif")!important}
#sideBar li>a[href*="fave"]{background-image:url("http://vk.com/images/icons/notes_s.gif")!important}
#sideBar li>a[href*="wishlist"]{background-image:url("http://vk.com/images/icons/topics_s.gif")!important}
#sideBar li>a[href*="settings"]{background-image:url("http://vk.com/images/icons/people_s.gif")!important}
#sideBar li>a[href*="apps"]{background-image:url("http://vk.com/images/icons/apps_s.gif")!important}

#sideBar li>a:hover{background-position:3px 2px!important}
#sideBar .hasedit:hover{background-position:3px 1px!important}
#sideBar li>a[href*="audio"]:hover{background-position:3px 1px!important}
#sideBar li>a[href*="mail"]:hover{background-position:3px 3px!important}
#sideBar li>a[href*="im"]:hover{background-position:3px 3px!important}
#sideBar li>a[href*="wishlist"]:hover{background-position:3px 1px!important}
#sideBar li>a[href*="settings"]:hover{background-position:3px 1px!important}
/* --------------- */

/*для модулей без .php*/
#vkontakte #pageBody{margin-left:0!important}
#side_bar{width:130px!important;margin-left:2px!important}
#side_bar li>a{padding-left:22px!important;background-repeat:no-repeat!important;background-position:3px -62px!important}
#side_bar .hasedit{width:83px!important}
#side_bar .edit{width:20px!important;padding:3px 0 3px 1px!important;color:rgba(0,0,0,0)!important}
#side_bar .edit:active{color:rgba(0,0,0,0)!important}
#side_bar li>a[href*="app"]:not([href*="apps"]),#side_bar li>a[href*="app"]:hover:not([href*="apps"]),#side_bar li>a[href*="app"]:hover:active:not([href*="apps"]){background-position:3px 1px!important}

#side_bar .hasedit{background-image:url("http://vk.com/images/icons/people_s.gif")!important}
#side_bar .edit{background-image:url("http://vk.com/images/icons/tags_s.gif")!important}
#side_bar li>a[href*="friends"]{background-image:url("http://vk.com/images/icons/friends_s.gif")!important}
#side_bar li>a[href*="albums"]{background-image:url("http://vk.com/images/icons/photos_s.gif")!important}
#side_bar li>a[href*="video"]{background-image:url("http://vk.com/images/icons/video_s.gif")!important}
#side_bar li>a[href*="audio"]{background-image:url("http://vk.com/images/icons/audio_s.gif")!important}
#side_bar li>a[href*="mail"]{background-image:url(http://style-thing.my1.ru/i/mail.gif)!important;background-position:3px -64px!important}
#side_bar li>a[href*="im"]{background-image:url(http://style-thing.my1.ru/i/mail.gif)!important;background-position:3px -64px!important}
#side_bar li>a[href*="notes"]{background-image:url("http://vk.com/images/icons/pages_s.gif")!important}
#side_bar li>a[href*="groups"]{background-image:url("http://vk.com/images/icons/groups_s.gif")!important}
#side_bar li>a[href*="events"]{background-image:url("http://vk.com/images/icons/events_s.gif")!important;background-position:3px -63px!important}
#side_bar li>a[href*="feed"]{background-image:url("http://vk.com/images/icons/notesplus_s.gif")!important}
#side_bar li>a[href*="fave"]{background-image:url("http://vk.com/images/icons/notes_s.gif")!important}
#side_bar li>a[href*="wishlist"]{background-image:url("http://vk.com/images/icons/topics_s.gif")!important}
#side_bar li>a[href*="settings"]{background-image:url("http://vk.com/images/icons/people_s.gif")!important}
#side_bar li>a[href*="apps"]{background-image:url("http://vk.com/images/icons/apps_s.gif")!important}

#side_bar li>a:hover{background-position:3px 2px!important}
#side_bar .hasedit:hover{background-position:3px 1px!important}
#side_bar li>a[href*="audio"]:hover{background-position:3px 1px!important}
#side_bar li>a[href*="mail"]:hover{background-position:3px 3px!important}
#side_bar li>a[href*="im"]:hover{background-position:3px 3px!important}
#side_bar li>a[href*="wishlist"]:hover{background-position:3px 1px!important}
#side_bar li>a[href*="settings"]:hover{background-position:3px 1px!important}
/* --------------- */
Об установке тем или CSS-стилей можно прочитать в специальной статье на этой странице.
Источник:
Вам понравился материал?
14
Похожие материалы
Обсуждение
SyncMaster в 14:49 09.05.2011
Материал
0
И делают же эти скрипты, но получается классно
Splendid в 16:13 21.04.2011
Материал
0
Ну тут уже ниже всё сказали, классная доработка, а я лишь добавлю, что лучше бы Дуров сам такое внедрял, а не всякие микроблоги!
Inca333 в 15:54 21.04.2011
Материал
0
Нечего так... Украшает страницу... Мне кажется можно было бы такое сделать официально!)
Desmond в 23:31 20.04.2011
Материал
0
Вот эта капля доработки в контакте очень понравилась... Т.к придаёт изящность страничке!) Что тут скажешь, просто класс!
Angel1429 в 13:50 21.04.2011
Материал
0
Мне тоже понравилась доработка, классно и стильно смотрится!)
Сайт закрыт. Комментирование материалов невозможно.
Категории раздела
Форум
Социальные сети
Хостинг от uCoz