[ VKontakte Optimizer ]

[ VKontakte Optimizer ] (//vkopt.net/forum/index.php)
-   В Контакте | Оформление (//vkopt.net/forum/forumdisplay.php?f=13)
-   -   Тема NoName (//vkopt.net/forum/showthread.php?t=5403)

SkyLoKi 25.06.2014 20:37

Тема NoName
 
Вложений: 1
Вот такая незамысловатая тема оформления вконтакте.


На самом деле сделал немного, но надеюсь красиво. Точнее мне сильно нравится 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 27.06.2014 21:57

Неужели никаких комментариев не будет?:confused:

SkyLoKi 13.07.2014 23:54

Основной дизайн вконтакте
 
Не так давно мне стало известо, что у контакта появится новый дизайн, какой именно неизвестно, но он уже скорее всего будет.
И стало интересно, кому либо данная тема понравилась? стоит примерно так же делать на новом шаблоне?

Вот что пишут на сайте вк в группе "LIVE"
Цитата:

Только что ВКонтакте стартовал конкурс на создание нового дизайна для полной версии сайта. Это значит, что через некоторое время дизайнеры и разработчики приступят к обновлению внешнего вида ВКонтакте. Наш недавний опрос, кстати, показал, что пользователи давно ждут перемен: http://vk.com/wall-2158488_318653.

На прикреплённой ниже странице вы можете ознакомиться с условиями, датами и рекомендациями по конкурсу. Если уверены в себе, хватайте кисть!
https://vk.com/vkdesigners - ссылка на группу конкурса

Temchik 14.07.2014 00:16

Цитата:

Сообщение от SkyLoKi (Сообщение 66706)
Не так давно мне стало известно, что у контакта появится новый дизайн

Еще не появился. Но возможно появится.

Добавлено через 30 секунд
Цитата:

Сообщение от SkyLoKi (Сообщение 66706)
стоит примерно так же делать на новом шаблоне?

Не стоит.

Dima Bezpalko 06.08.2014 23:13

Спасибо, очень понравилась тема):cool:

Lauren23 15.09.2014 16:53

nice post ............


















______________________________
Lauren...

painnti 22.11.2014 21:46

Пожелание
 
Вложений: 1
SkyLoKi, Тема очень хорошая, качественно сделана.
Только как по мне, лучше сделать вот это всплывающее меню непрозрачным.
Буквы не будут лезть друг на друга, более комфортно должно быть

SkyLoKi 06.01.2015 08:12

Цитата:

Сообщение от painnti (Сообщение 67458)
SkyLoKi, Тема очень хорошая, качественно сделана.
Только как по мне, лучше сделать вот это всплывающее меню непрозрачным.
Буквы не будут лезть друг на друга, более комфортно должно быть

Исправил.
Обновленный код в шапке ;)

painnti 05.03.2015 14:19

Цитата:

Сообщение от SkyLoKi (Сообщение 67674)
Исправил.
Обновленный код в шапке ;)

Теперь все просто супер!
Спасибо ;):az:

Mihail Golovinov 30.10.2015 14:05

Положительный отзыв!

Друзья, всем рекомендую данную тему. Но вот если устанавливать CSS-твинки, то некоторые цвета почему-то отображаются не корректно.

В целом всё хорошо, спасибо автору!
P.S - жду ещё от вас темы :)


Часовой пояс GMT +4, время: 17:45.

Сервер бесплатных медицинских консультаций
Дачный форум. уДачное общение.

VkOpt 2007 - 2024
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод от zCarot