Тема: Тема NoName
Показать сообщение отдельно
SkyLoKi
25.06.2014
 
 
Аватар для SkyLoKi
Мимо проходил, заглянул)
О пользователе
 
Сообщений: 13
ВкоптоКарма: 7

Google Chrome 27.0.1453.110 (WinXP)

[#1]
По умолчанию Тема NoName

Вот такая незамысловатая тема оформления вконтакте.

Нажмите на изображение для увеличения
Название: 2014-06-25_194225.jpg
Просмотров: 1488
Размер:	195.4 Кб
ID:	1459

На самом деле сделал немного, но надеюсь красиво. Точнее мне сильно нравится bootstrap. Вот его я и подогнал под vk .
Цвета подобраны неплохо. Из полезного сделано только одно: Онлайн друзья теперь список меньше по объему. Мне нравится (т.е. размер поля на каждого друга я уменьшил)

Так же выслушаю недочеты какие либо. Или что еще добавить лучше.

Код HTML:
body {background-color: #f2f2f2;background-repeat: repeat;background-position: left top;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAAAAAApWe5zwAAAAJ0Uk5TDwDxC9H3AAAAEklEQVQI12P4wPCC4QbDDoYKABWqA+GzsnEGAAAAAElFTkSuQmCC);}
::-moz-selection {background-color: #FFEA80 !important; color: #333 !important; text-shadow: none !important}
::selection {background-color: #FFEA80 !important; color: #333 !important; text-shadow: none !important}
#wrap3{background: #fff;}

/*Верхушка сайта*/
#page_header{border-radius: 0 0 5px 5px;background: #020031;background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6D3353));background: -webkit-linear-gradient(45deg, #020031 0%,#6D3353 100%);background: linear-gradient(45deg, #020031 0%,#6D3353 100%);}
#page_header> .back, #top_logo_down,#page_header .right{background: none !important; border: none !important}
#page_header> .left {background: url(https://m.vk.com/images/vkn_logo.png) no-repeat 16px 9px;}
#page_header>.head_nav> a.top_nav_link {text-shadow: 0px 1px 0px #5C2E96;}
#head_play_btn, #pd_play, #pd .ctrl, #audio.new .audio_edit, .audio_add, #audio.new .audio_remove, .audio_filter div.icon, #ac_play, #ac .ctrl, .audio_add, .medadd_aud_play, #audio_tip_arrow, .current_audio_cnt div.label, .docs_add_row {background-image: url(data:image/png;base64,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) !important; background-size: auto !important}
#page_header> .head_nav> a.top_nav_link:hover, .head_nav > a.top_nav_link.over, #top_back_link:hover {background-color: rgba(184, 184, 184, 0.38);}

/* Аудиозаписи */
.ac_load_line {background-color: #E4E4E4}
.ac_progress_line {background-color: #717072;}
#audio_global> .gp_vka_ctrls {background: rgba(143, 140, 151, 0.38);}
#gp_back {background-color: rgba(143, 140, 151, 0.38);}
#gp div.wrap.active #gp_back {background-color: rgba(132, 131, 133, 0.72) !important;}

/* Небольшое оформление страниц */
#header{background-color:#F5F5F5 !important;background-image:-moz-linear-gradient(top,#FFF,#E6E6E6)!important;background-image:-webkit-gradient(linear,0 0,0 100%,from(#FFF),to(#E6E6E6))!important;background-image:-webkit-linear-gradient(top,#FFF,#E6E6E6)!important;background-image:-o-linear-gradient(top,#FFF,#E6E6E6);background-image:linear-gradient(to bottom,#FFF,#E6E6E6);background-repeat:repeat-x}

/* Uploader*s */
#photos_upload_area {background: #F2EFF3}
.photos_upload_area_img {color: #555;}

/* Новостная лента */
#feed_news_bar> .summary_tab_sel,#feed_news_bar> .summary_tab {padding: 0px;}
#feed_news_bar> .summary_tab_sel,#feed_news_bar> .summary_tab_sel> .summary_tab2{background:#333!important;border-radius: 5px;}
#feed_news_bar> .summary_tab2:hover {border-radius: 5px;}
#feed_news_bar> .feed_tab_add {display: none;}

/* Левые блоки */
#side_bar, #sideBar {width: 133px !important; top: 36px !important; margin-top: 9px !important; background: transparent !important}
#side_bar ol, #sideBar ol, .left_box, #left_friends, .left_gift, .giftAd {background: #FFF; padding: 5px !important; border-radius: 4px}
#side_bar ol li {font-size: 1.0em;background-color: #fff;}
#side_bar ol li a, #sideBar ol li a, .ad_box_new, .left_gift .body, .giftAdBody {color: #08C; background: transparent !important}
#side_bar ol li a:hover, #sideBar ol li a:hover {background-color: #E1E7ED !important; border-radius: 2px}
#side_bar .left_label, #sideBar .left_label, #myprofile a {height: 14px !important}
#side_bar .inl_bl, #side_bar .left_count_wrap .inl_bl {vertical-align: baseline !important}
.left_box h4, .ad_box_friend, .left_friend_all_link, .left_gift, .left_gift div, .giftAd, .giftAdBody, .giftAdBody div {border: none !important}
.left_box h4, .left_box a {color: #08C}
.left_gift .body div.vote_transfer {padding: 5px 0 0 !important}
#left_blocks {width: 133px !important}
.left_holiday {width: 123px !important}
.left_gift .left_hide, .left_hide_button {margin: -6px 112px !important}
.left_hide {margin: -1px 117px !important}

/* Диалоги */
.dialogs_row {border-bottom: 3px dotted #e4e8ed;}
.im_out {background: #fff;}
/*#im_nav_wrap */.t_bar {border-bottom: solid 1px #000;}
ul.t0 li.active_link a, ul.t0 li.active_link a:hover {background: #6D3353 ;}
ul.t0 li.active_link a b.tl1,ul.t0 li.active_link a:hover b.tl1{background-color:#6D3353 ;}
ul.t0 li.active_link a b.tl1 b,ul.t0 li.active_link a:hover b.tl1 b{background:#6D3353 ;border:1px solid #6D3353 ;}
ul.t0 li.active_link a b.tl2,ul.t0 li.active_link a:hover b.tl2{background-color:#6D3353 ;border-color:#6D3353 }
.im_tab_selected .im_tab2{background-color:#333 !important}
.im_tab_over .im_tab2 {background-color: #CACACA;color: #FFF !important;}
.im_status_online{box-shadow:0 0 5px 2px #0F0!important;background-color:#00ff04!important;border-color:#0f0!important;width:2px!important;height:2px!important}

/* CSS Онлайн друзей (делает список компактнее)*/
#fc_clist .fc_tab_head{padding:6px 4px 2px}
#fc_clist fc_contact_photo,#fc_clist img.fc_contact_photo{width:28px;height:28px}
#fc_clist .fc_contact_name{line-height:26px;padding:0 0 0 1px}
#fc_clist .fc_contact{height:30px}
#fc_clist .fc_contact_mobile .fc_contact_status{width:11px;height:11px;margin:8px 0 0 1px}
#fc_clist_filter{height:4px}
#fc_clist .input_back{padding:4px}
#fc_clist .fc_contact{width:92%}
#fc_ctabs_cont .fc_clist_online{margin:4px 0 0 -30px}
#fc_ctabs_cont .input_back_content{margin:-1px 0 0 0}
#fc_ctabs_cont .fc_contact_over .fc_contact_status{margin:10px 0 0}
#fc_clist img{display: block;line-height: 1.42857143;background-color: #FFF;border: 1.5px solid #DDD;border-radius: 4px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
#fc_clist img:hover,img:focus{border-color: #428BCA;}

/* AJAX окна */
.fc_tab_head {padding: 7px 8px 4px;background: #6D3353;}
.rb_inactive .fc_tab_head {background: #020031;}
#pad_title {border-top: 1px solid #5E6975 !important;}
#pad_title_wrap {background-color: #5E6975 !important;border-color: #5E6975 #5E6975 !important;}

/* Новости */
#feed_menu{border-radius: 0 0 0 21px;} 

/* Страница с группами пользователя */
img.groups_row_img{width: 96px;height: 96px !important;display: block;line-height: 1.42857143;background-color: #FFF;border: 2px solid #DDD;border-radius: 4px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
img.groups_row_img:hover,img.groups_row_img:focus{border-color: #428BCA;}

/* Кнопки и прочее */
.button_blue button,.button_blue.button_disabled button.active,.button_blue.button_disabled button.hover,.button_blue.button_disabled button:active,.button_blue.button_disabled button:hover{padding:6px 17px;display:inline-block;*display:inline;margin-bottom:0;*margin-left:.3em;*font-size:14px;*line-height:20px;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25);text-align:center;vertical-align:middle;cursor:pointer;background-color:#49afcd;*background-color:#2f96b4;background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-repeat:repeat-x;border:1px solid #bbb;*border:0;border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1)rgba(0,0,0,.1)rgba(0,0,0,.25);border-bottom:1px solid #496b93;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);filter:progid:dximagetransform.microsoft.gradient(enabled=false);*zoom:1;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);background-position:0 0}
.button_blue button.hover,.button_blue button:hover{color:#fff;background-color:#2f96b4;*background-color:#2a85a0;text-decoration:none;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}
.button_blue button.active,.button_blue button:active,.is_2x .button_blue button.active,.is_2x .button_blue button:active{background-color:#24748C !important;border-bottom-color:none!important;position:relative}
.uneditable-input:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus{border-color:rgba(82,168,236,.8);outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6)}

/* Прочее от VK*/
#fmenu{background:0 0}
span.post_like_link,span.post_share_link{display:none !important}
#pedit_middle_name, #pedit_maiden_name, #pedit_home_town {padding: 10px;height: 8px}

/*Прочее от VKOpt...*/
#vkm_vkopt li{background-color: #FFF;}
#vkm_vkopt li:hover, #vkm_vkopt a:hover{text-decoration:none;background-color:#08c;background-color:#0081c2;background-image:-moz-linear-gradient(top,#08c,#0077b3);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));background-image:-webkit-linear-gradient(top,#08c,#0077b3);background-image:-o-linear-gradient(top,#08c,#0077b3);background-image:linear-gradient(to bottom,#08c,#0077b3);background-repeat:repeat-x;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
#vk_stats_im_btn  >.button_gray button {padding: 6px 10px !important;}
.vkrate, .rate_line {display: none !important;} 
.thumbimg img {width: 150px;height: 100px !important}
.thumbimg img:hover {border: solid 1px #88458E !important}

Последний раз редактировалось SkyLoKi; 06.01.2015 в 08:11. Причина: Немного дополнил оформление
Оффлайн
 
Ответить с цитированием
2 пользователя(ей) сказали cпасибо: