[ VKontakte Optimizer ]
Имя
Пароль




Забыли пароль? Регистрация
Вернуться   [ VKontakte Optimizer ] > Прочее > В Контакте | Оформление
Важная информация

Ответ
 
Опции темы Опции просмотра Вложений: 0
verazub
07.12.2014
 
 
Аватар для verazub
Знаток
О пользователе
 
Сообщений: 58
ВкоптоКарма: 29


[#1]
Радость Прототип нового дизайна

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



Прототип нового дизайна 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
+ Вход под другой учетной записью. добавлен отступ

Последний раз редактировалось verazub; 18.12.2014 в 11:18.
Оффлайн
 
Ответить с цитированием
5 пользователя(ей) сказали cпасибо:
Вэлл
08.12.2014
 
 
Аватар для Вэлл
ПсИХ=)))
О пользователе
 
Сообщений: 3,745
ВкоптоКарма: 8,522


[#2]
По умолчанию

verazub, меня тут недавно просили добавить в Менеджер тем тему на основе дизайна из /dev.
Может интересно будет, может скоопирируетесь.
__________________
Оффлайн
 
Ответить с цитированием
IkaR49
08.12.2014
 
 
Аватар для IkaR49
Опытный
О пользователе
 
Сообщений: 2,034
ВкоптоКарма: 1,349


[#3]
По умолчанию

Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...
Оффлайн
 
Ответить с цитированием
verazub
08.12.2014
 
 
Аватар для verazub
Знаток
TC
О пользователе
 
Сообщений: 58
ВкоптоКарма: 29


[#4]
По умолчанию

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

Цитата:
Сообщение от IkaR49 Посмотреть сообщение
Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...
А я привык :-)
Оффлайн
 
Ответить с цитированием
verazub
09.12.2014
 
 
Аватар для verazub
Знаток
TC
О пользователе
 
Сообщений: 58
ВкоптоКарма: 29


[#5]
По умолчанию

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

Оффлайн
 
Ответить с цитированием
Пользователь сказал cпасибо:
SmowiN
10.12.2014
 
 
Аватар для SmowiN
Мимо проходил, заглянул)
О пользователе
 
Сообщений: 17
ВкоптоКарма: 13


[#6]
По умолчанию

verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу
Оффлайн
 
Ответить с цитированием
Пользователь сказал cпасибо:
verazub
11.12.2014
 
 
Аватар для verazub
Знаток
TC
О пользователе
 
Сообщений: 58
ВкоптоКарма: 29


[#7]
По умолчанию

Цитата:
Сообщение от SmowiN Посмотреть сообщение
verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу
Исправил ошибку, в первом посте новый код. Завтра код полностью обновлю, есть жесткая ошибка в устранении её надо переписать 1/4 кода, спасибо за комментарий :-)

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

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


Последний раз редактировалось verazub; 11.12.2014 в 01:33.
Оффлайн
 
Ответить с цитированием
Omeha2
11.12.2014
 
Прижился
О пользователе
 
Сообщений: 94
ВкоптоКарма: 38

Google Chrome 39.0.2171.71 (Win7)

[#8]
По умолчанию

Создай репо где нибудь (GitHub), помогу немного
Оффлайн
 
Ответить с цитированием
3 пользователя(ей) сказали cпасибо:
[ru]letik
16.12.2014
 
Мимо проходил, заглянул)
О пользователе
 
Сообщений: 4
ВкоптоКарма: 0

Opera 26.0.1656.32 (Win7)

[#9]
Лампочка

Добавь эту строку чтоб было более красифше
Код HTML:
#im_footer_filler { background: #F0F2F5; }

Последний раз редактировалось [ru]letik; 18.12.2014 в 10:30.
Оффлайн
 
Ответить с цитированием
verazub
17.12.2014
 
 
Аватар для verazub
Знаток
TC
О пользователе
 
Сообщений: 58
ВкоптоКарма: 29


[#10]
По умолчанию

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

Цитата:
Сообщение от [ru]letik Посмотреть сообщение
Добавь эту строку чтоб было более красифше
Код HTML:
#im_footer_filler { background: #F0F2F5; }
спасибо

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

Последний раз редактировалось verazub; 17.12.2014 в 08:51.
Оффлайн
 
Ответить с цитированием
Пользователь сказал cпасибо:
Ответ

Нижняя навигация
Вернуться   [ VKontakte Optimizer ] > Прочее > В Контакте | Оформление

Метки
дизайн, интерфейс, вконтакте, прототип, редизайн


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


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

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

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