[ VKontakte Optimizer ]

[ VKontakte Optimizer ] (//vkopt.net/forum/index.php)
-   В Контакте | Оформление (//vkopt.net/forum/forumdisplay.php?f=13)
-   -   Прототип нового дизайна (//vkopt.net/forum/showthread.php?t=5465)

verazub 07.12.2014 17:46

Прототип нового дизайна
 
Если нашли ошибку, обязательно напишите, не забываем скриншоты



Прототип нового дизайна v2.0 bluid 10713
Код:

/* ~~~~~~~~~~~~~~~~~~~~~~ АВТОР: МАКСИМ ГУСЕВ ~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ФОН ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body,
#fmenu,
#side_bar,
#im_footer_filler,
#side_bar ol li .left_row {
        background: #f0f2f5 !important;
}
#ads_page_wrap1,
#wrap1 {
        background: #fff;
}
#header_wrap1 { /* прозрачность бордера у бара c ф.и.о и онлайн статусом */
        border-color: rgba(100, 100, 100, 0.08) !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ШАПКА ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#page_header {
        position: fixed;
        z-index: 120;
        width: inherit; /* в приложениях все четко */
        height: 50px !important;
}
#page_header .back {
        position: fixed !important;
        left: 0px;
        height: 50px !important;
        background: #567ca4 !important;
}
#page_header .left{
        background: #567ca4 url(/images/logo_vk_white.png) 0px 14px no-repeat !important;
        margin: 0px 8px 0px 4px;
        height: 50px !important;
}
#page_header .right {
        display: none !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav {
        padding: 0px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ЛОГО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top_logo_down {
        background: #567ca4 url(/images/logo_vk_white.png) 0px 15px no-repeat !important;
        height: 50px !important;
}
.top_home_link {
        height: 50px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ССЫЛКИ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav a.top_nav_link {
        color: #fff !important;
        height: 50px !important;
        line-height: 47px !important;
        font-size: 13px !important;
        padding: 0px 15px !important;
        text-shadow: none !important;
        font-weight: normal !important;
}
.head_nav a.top_nav_link:hover,
.head_nav a.top_nav_link.over,
#top_back_link:hover {
        background-color: #51759b !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ НАЗАД ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top_back_link {
        max-width: 149px !important;
        padding-left: 25px !important;
        background: url(/images/backlink.gif) no-repeat left -80px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ПОИСК ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#ts_wrap {
        left: 146px !important;
        height: 50px !important;
        width: 170px !important;
}
#ts_wrap .ts_input_wrap {
        top: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
        border-radius: none !important;
        width: 170px;
}
#ts_wrap .ts {
        background-color: rgba(255, 255, 255, 0) !important;
        border-radius: none !important;
}
#ts_wrap .ts_input_wrap2 {
        margin: 0px !important;
}
#ts_wrap .input_back {
        padding: 17px 0px 17px 25px !important;
        color: #92adc8 !important;
        margin: 0px !important;
        font-size: 13px;
}
#ts_wrap .input_back_content {
        width: 141px !important;
}
#ts_wrap #ts_input {
        border: 0px !important;
        outline: none !important;
        padding: 7px 7px 7px 27px !important;
        margin: 11px 0px !important;
        height: 14px !important;
        width: 136px !important;
        border-radius: 14px !important;
        transition: background-color 0.05s, color 0.05s !important;
        font-size: 13px !important;
        background: #4b6d94 url(/images/icons/dev_head_magglass.png) 8px 8px no-repeat !important;
        color: #d9e2ec !important;
}
#ts_wrap input#ts_input:focus {
        background-color: #fff !important;
        color: #2b2f33 !important;
}
#ts_cont_wrap {
        top: 58px !important;
        left: 146px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ ИКОНКА МУЗЫКИ ~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav a.top_nav_link span#head_music_text {
        color: #fff !important;
}
.head_nav a.top_nav_link span#head_music_text img { /* полоса загрузки */
        margin-top: 20px !important;
        margin-left: 8px !important;
}
.head_nav a.top_nav_link#head_music {
        padding-right: 36px !important;
}
#head_play_btn {
        top: 13px !important;
        background: url(/images/icons/audio_iconsf.png) -144px -25px no-repeat !important;
}
a:hover #head_play_btn,
a.over #head_play_btn {
        background-position: -144px -25px !important;
}
#head_play_btn.playing {
        background-position: -162px -25px !important;
}
a:hover #head_play_btn.playing,
a.over #head_play_btn.playing {
        background-position: -162px -25px !important;
}
a:hover #head_play_btn.over,
a:hover #head_play_btn.down,
a.over #head_play_btn.over,
a.over #head_play_btn.down {
        background-position: -144px -25px !important;
}
a:hover #head_play_btn.playing.over,
a:hover #head_play_btn.playing.down,
a.over #head_play_btn.playing.over,
a.over #head_play_btn.playing.down {
        background-position: -162px -25px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side_bar,
#stl_side,
#page_body {
        margin-top: 50px;
}
.im_fixed_nav #page_body,
.audio_fixed_nav #page_body,
.im_fixed_nav #side_bar,
.audio_fixed_nav #side_bar {
        margin-top: 0px;
}
#side_bar ol li .left_row:hover {
        background: #E1E7ED !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~ ВСПЛЫВАЮЩИЕ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~ */
.fmenu_item { /* выплывающего меню при прокрутки страницы */
        line-height: 10px !important;
}
.fmenu_icon { /* прозрачный фон иконок всплывающего меню */
        background-image: url(http://savepic.net/6230906.png) !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ОНЛАЙН ЧАТ ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.chat_onl_wrap,
.chat_active,
.chat_expand {
        background: #d8dfe6 !important;
}
.chat_tab_wrap:hover {
        background: #d0d9e1 !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ФОТО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.photos_period_fixed { /* отступ при прокрутке фотоальбома 6:50 16.12.2014 */
        margin-top: 50px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ ОТКРЫТОЕ ФОТО ~~~~~~~~~~~~~~~~~~~~~~~~ */
.layers_shown .chat_onl_wrap {
        background: #6B6B6B !important;
}
.layers_shown .chat_active,
.layers_shown .chat_expand {
        background: #6B6B6B !important;
}
.layers_shown .chat_tab_wrap:hover {
        background: #7B7B7B !important;
}
.layers_shown .chat_onl_icon {
        background-position: -51px -44px!important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ АУДИО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gp { /* отступ, когда с правой стороны */
        top: 65px !important;
}
#gp.reverse { /* отступ, когда с левой стороны */
        top: auto !important;
}
/* ~~~~~~~~~~~~ КНОПКИ ВВЕРХ, ВНИЗ И НАЗАД НА СТРАНИЦАХ ~~~~~~~~~~~~ */
#stl_bg {
        padding-top: 68px !important;
        width: 114px !important;
}
#stl_text {
        height: 15px !important;
        color: #466a94 !important;
        font-size: 12px !important;
        margin: 0 0 0 19px !important;
        padding: 0px 24px !important;
        background: url(/images/dev_toplink.png) no-repeat left 0px !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
}
.stl_active.over_fast #stl_bg {
        background-color: #dce2e8 !important;
}
#stl_left .down {
        background-position: left -15px !important;
}
#stl_left .back {
        background-position: left -30px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~ ЭЛЕМЕНТЫ ВЫДЕЛЕНИЯ ~~~~~~~~~~~~~~~~~~~~~~ */
.checkbox div {
        background: url(/images/icons/dev_check.png) 0px 0px no-repeat !important;
        background-size: 14px 70px !important;
}
.checkbox:hover div {
        background-position: 0px -28px !important;
}
.checkbox.disabled:hover div {
        background-position: 0px 0px !important;
}
.checkbox.on div {
        background-position: 0px -14px !important;
}
.checkbox.on:hover div {
        background-position: 0px -42px !important;
}
.checkbox.disabled.on:hover div {
        background-position: 0px -14px !important;
}
.checkbox_container table td .checkbox_on,
.checkbox_container table td .checkbox_off,
.checkbox_container table td .checkbox_on_over,
.checkbox_container table td .checkbox_off_over {
        background: transparent url(/images/icons/dev_check.png) 0px 0px no-repeat !important;
        background-size: 14px 70px !important;
}
.checkbox_container table td .checkbox_on {
        background-position: 0 -14px!important;
}
.checkbox_container table td .checkbox_off_over {
        background-position: 0px -42px!important;
}
.checkbox_container table td .checkbox_on_over {
        background-position: 0 -42px!important;
}
.checkbox_container.disabled td.checkbox div.checkbox_on_over {
        background-position: 0 -14px !important;
}
.checkbox_container.disabled td.checkbox div.checkbox_off_over {
        background-position: 0 0 !important;
}
.like_tt .bottom .checkbox div { /* для репоста */
        background: url(/images/icons/like_icons_bl.png) -2px 0 no-repeat !important;
        width: 14px !important;
        height: 12px !important;
}
.radiobtn div {
        background: url(/images/icons/dev_radio.png) 0px 0px no-repeat !important;
        background-size: 14px 70px !important;
}
.radiobtn div,
.radiobtn_container table td .radiobtn_on div,
.radiobtn_container table td .radiobtn_off div,
.radiobtn_container table td .radiobtn_on_over div,
.radiobtn_container table td .radiobtn_off_over div {
        background: url(/images/icons/dev_radio.png) 0px 0px no-repeat !important;
        background-size: 14px 70px !important;
}
.radiobtn:hover div {
        background-position: 0px -28px !important;
}
.radiobtn.disabled:hover div {
        background-position: 0px 0px !important;
}
.radiobtn_hover div {
        background-position: 0px -28px !important;
}
.radiobtn.on div {
        background-position: 0px -14px !important;
}
.radiobtn.on:hover div {
        background-position: 0px -42px !important;
}
.radiobtn.disabled.on:hover div {
        background-position: 0px -14px !important;
}
.radiobtn.on.radiobtn_hover div {
        background-position: 0px -42px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ НАПОМИНАНИЯ ~~~~~~~~~~~~~~~~~~~~~~~~ */
.left_hide { /* кнопка «закрыть» для напоминания */
        background: url(http://savepic.net/6241146.png) no-repeat center center !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ РЕКЛАМА ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#left_ads,
#group_recom_wrap,
.ads_ads_news_wrap { /* скрываем 3 рекламных блока */
        display: none !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FIREFOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@-moz-document domain("vk.com") {
        .im_fixed_nav #side_bar,
        .audio_fixed_nav #side_bar { /*левое меню */
                top: 50px !important;
        }
        .im_fixed_nav #im_nav_wrap,
        .audio_fixed_nav #ac { /* контент */
                top: 50px !important;
        }
        .im_fixed_nav #right_bar,
          .audio_fixed_nav #right_bar { /*правый бар */
                top: 55px !important;
        }
        #audio_wrap.audio_wrap,
        #audios_list.audios_list { /* аудио смешение фикс */
                margin-top: 10px;
        }
        .layers_shown #page_header { /* при затемнение фото и т.д. */
                top: 0px;
        }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VKOPT ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side_bar { /* при фиксации левого меню */
        top: 0px !important;
}
.im_fixed_nav #side_bar,
.audio_fixed_nav #side_bar { /* при фиксации левого меню */
        top: 50px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* в разработке */
#im_footer_sh { /* тень в сообщениях */
        border-bottom: 1px solid #e5e7ea;
}
#login_relogin_wrap { /* перелогин */
        padding-top: 60px !important;
}
.login_appdevices_promo{ /* логин, вход */
        background: #fff !important;
}



changelog
Изменения в v2.0 [636]:
Исправлено:

* Отображения плеера
Добавлено:
+ Корректное отображения плеера с левой стороны

Изменения в v2.0 [10115]:
Исправлено:

* при открытии/закрытии во весь экран, шапка оставалась на месте до момента клика, короче не фокусировалось.
* поиск правильная фиксация, при возвращение на страницу длинное название дергалось
* правильное отображения кнопки в шапке воспроизвести/пауза
* перерисована иконка и набор иконок в меню, на прозрачный фон
* теперь аудио плеер отображается на страницах «сообщения» «музыка» корректно
* в фотоальбомах добавлен отступ для периода
* фикс для файрфокса, при открытии фото
* чистка кода, устранения ошибок, код стал меньше и многое другое
Добавлено:
+ скрываем блок «реклама»
+ 2 картинки

Изменения в v2.0 [10337]:
Исправлено:

* при открытии/закрытии во весь экран, шапка оставалась на месте до момента клика, короче не фокусировалось.
* поиск правильная фиксация, при возвращение на страницу длинное название дергалось
* правильное отображения кнопки в шапке воспроизвести/пауза
* перерисована иконка и набор иконок в меню, на прозрачный фон
* теперь аудио плеер отображается на страницах «сообщения» «музыка» корректно
* в фотоальбомах добавлен отступ для периода
* фикс для файрфокса, при открытии фото
* чистка кода, устранения ошибок, код стал меньше и многое другое
Добавлено:
+ скрываем блок «реклама»
+ 2 картинки

Изменения в v2.0 [10409]:
Исправлено:

* firefox добавлен параметр "top" только при клике на фото и т.д.
Добавлено:
+ при фиксации левого меню в vkopt устранен отступ "top"

Изменения в v2.0 [10713]:
Исправлено:

* теперь шапка корректно отображается в приложениях "width:inherit"
* корректное отображение тени в сообщение футера
* мелкие исправления
Добавлено:
+ ads_page_wrap1 фон контента на страницах /ads
+ Вход под другой учетной записью. добавлен отступ

Вэлл 08.12.2014 10:07

verazub, меня тут недавно просили добавить в Менеджер тем тему на основе дизайна из /dev.
Может интересно будет, может скоопирируетесь. :)

IkaR49 08.12.2014 22:16

Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...

verazub 08.12.2014 23:11

Цитата:

Сообщение от Вэлл (Сообщение 67534)
verazub, меня тут недавно просили добавить в Менеджер тем тему на основе дизайна из /dev.
Может интересно будет, может скоопирируетесь. :)

мне бы тот кто разбирается в js... :)

Цитата:

Сообщение от IkaR49 (Сообщение 67542)
Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...

А я привык :-)

verazub 09.12.2014 03:34

Да да очень скоро будет

http://savepic.net/6278029.png

SmowiN 10.12.2014 21:45

verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу

verazub 11.12.2014 00:29

Цитата:

Сообщение от SmowiN (Сообщение 67550)
verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу

Исправил ошибку, в первом посте новый код. Завтра код полностью обновлю, есть жесткая ошибка в устранении её надо переписать 1/4 кода, спасибо за комментарий :-)

По делу:
Да да очень скоро будет

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

http://savepic.net/6278029.png

Omeha2 11.12.2014 09:50

Создай репо где нибудь (GitHub), помогу немного :)

[ru]letik 16.12.2014 19:34

Добавь эту строку чтоб было более красифше :D
Код HTML:

#im_footer_filler { background: #F0F2F5; }

verazub 17.12.2014 05:11

Цитата:

Сообщение от Omeha2 (Сообщение 67553)
Создай репо где нибудь (GitHub), помогу немного :)

Время нету, да еще и разбираться надо там

Цитата:

Сообщение от [ru]letik (Сообщение 67584)
Добавь эту строку чтоб было более красифше :D
Код HTML:

#im_footer_filler { background: #F0F2F5; }

спасибо

обновил код, много маленьких фиксов, смотрите первый пост bluid [10115]


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

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

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