![[ VKontakte Optimizer ]](http://vkopt.net/forum/images/vkopt/misc/logo.gif){kind=logo}
|
Забыли пароль? Регистрация |
Форум
О проекте
|
|
|
|
|
 |
Опытный
О пользователе
Сообщений: 2,037
ВкоптоКарма: 1,352
|
Небольшие CSS-твики
Мелочи, которые вряд ли будут полезны большинству, но кое-кому может и пригодятся
 Инструкция по установке CSS-твиков:
Не обрезать миниатюры фотографий на профилях и в группах
Миниатюры фотографий на профилях и в группах немного обрезаются, если они слишком большие по высоте. Этот твик исправит это.  Код:
/* Не обрезать миниатюры фотографий на профилях и в группах */
#profile_photos .photos a, #group_photos .group_photos_table a {
height: auto !important;
}
Скрыть кнопку, разворачивающую меню в группах
Скрывает кнопку раскрытия меню в группах.  Актуально, только если во ВкОпте используется функция "Автоматически разворачивать новости в группах (меню группы)". Код:
/* Скрыть кнопку, разворачивающую меню в группах */
.group_wiki_hider {
display: none !important;
}
Скрыть лог VKopt'a у alpha и beta версий
Скрывает лог VKopt'a у alpha и beta версий.  Однако использовать это не рекомендуется, ибо в случае ошибок не получится прибегнуть к логу и сообщить всю информацию об ошибке. Код:
/* Скрыть лог VKopt'a у alpha и beta версий */
#vkDebug {
display: none !important;
}
Скрыть предложение заполнить информацию о профиле
Скрывает блок под аватаркой вашего профиля, предлагающий заполнить информацию о себе.  Код:
/* Скрыть предложение заполнить информацию о профиле */
.profile_rate_warning {
display: none !important;
}
Убрать кнопку 'Показать/скрыть подробную информацию'
Убирает кнопку показа/скрытия подробной информации о пользователе.  Актуально, если вы используете во ВкОпте функцию "Всегда разворачивать информацию о пользователе". Код:
/* Убрать кнопку 'Показать/скрыть подробную информацию' */
#profile_full_link, #profile_info_link {
display: none !important;
}
Сделать менее приметной табличку об изменении номера
Немного уменьшает табличку, которая появляется в шапке сайта при изменении номера мобильного телефона.  Код:
/* Сделать менее приметной табличку об изменении номера */
.top_info_bar .info {
padding: 0px !important;
}
.top_info_bar {
opacity: 0.4 !important;
}
Отображать пункт [VKopt] в виде иконки в левом верхнем углу
Убирает пункт [VKopt] из левого меню и ставит его слева вверху в виде иконки.  Известные недоработки:
Код:
/* Отображать пункт [VKopt] в виде иконки в левом верхнем углу */
#frOpt{
position: fixed !important;
left: 20px !important;
top: 4px !important;
}
#side_bar #frOpt ul {
margin-left: 20px !important;
}
#side_bar #frOpt>a {
font-size: 0px;
background-image: url("http://vkopt.net/download/favicon.ico") !important;
width: 8px !important;
height: 8px !important;
}
.moreDiv {
display: none !important;
}
Не группировать последовательные сообщения в диалогах
Диалоги перестают группировать подряд идущие сообщения от одного пользователя.  Код:
/* Не группировать последовательные сообщения в диалогах */
#im_rows .im_add_row .im_log_author a, #im_rows .im_add_row .im_log_date span, #im_rows .im_add_row .im_log_date a.im_date_link, #im_rows .im_add_row .im_log_author_chat_thumb, #im_rows .im_add_row .im_log_author_chat_name {
display: block !important;
}
Надписи Online зелёного цвета
Заменяет все индикаторы активности пользователя на сайте на аналогичные, но зелёные.   Код:
/* Надписи Online зелёного цвета */
#title .fl_r, .online, .im_status_holder, .fave_online, .im_chatbox_mem_online, .mail_envelope_online, .dialogs_online, .bp_online {
color: #008000 !important
}
.vk_profile_online_status {
color: #42ee42 !important;
}
.fc_tab_online .fc_tab_online_icon, .fc_contact .fc_contact_status, .fc_clist_online_wrap .fc_clist_online {
background-image: url("http://s019.radikal.ru/i633/1211/a1/35499922ad03.png") !important;
}
.mob_onl, b.im_friend_mob_onl, b.dialogs_mob_onl {background-image: url("http://s52.radikal.ru/i136/1211/47/49d498354a71.png") !important;}
.im_status_online {
background-color: #008000 !important;
}
Так же для достижения такого эффекта в диалогах:  удалите последние три строчки в коде выше и вставьте этот листинг: Код:
.im_status_online {
box-shadow:0px 0px 5px 2px #00ff00 !important;
background-color: #00ff04 !important;
border-color: #00ff00 !important;
width: 1px !important;
height: 1px !important;
}
Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет
Делает верхушку страницы похожей на старую, которая использовалась в интерфейсе ВКонтакте 2009 года. Возможны три варианта: 1. Простой цвет  Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [1] */
#header {
background-color: #f0e8ba !important;
}
 Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [2] */
#header {
background-image: url("http://savepic.org/1811154.jpg") !important;
padding-top: 12px !important;
}
3. Самый качественный вариант  Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [3] */
#header_wrap1 {
border: solid #F3F3F3 !important;
border-image: initial !important;
border-width: 0px 1px !important;
}
#header {
position: relative !important;
font-weight: bold !important;
font-size: 11px !important;
padding: 4px 10px !important;
background: #F2EAB8 url(http://vkontakte.ru/images/headeryell.gif) top left repeat-x !important;
color: black !important;
border: 1px solid #D1C992 !important;
border-image: initial !important;
}
#header h1 {
margin: 0px !important;
font-size: 11px !important;
overflow: hidden !important;
}
Использовать несколько сразу - не следует. Замена иконкой таблички о вашем текущем Online статусе
Заменяет табличку о вашем текущем онлайн статусе иконкой.    Цвет иконки символизирует текущий статус (Зелёный - Online, Красный - Offline, Жёлтый - Неопределено) Код:
/* Замена иконкой таблички о вашем текущем Online статусе */
div.vkUOnline, div.vkUOffline, div.vkUUndef {
content: none !important;
color: transparent !important;
border: none !important;
background: none !important;
width: 26px !important;
height: 26px !important;
margin-left: 4px !important;
margin-bottom: -4px !important;
opacity: 0.7 !important;
background-repeat: no-repeat !important;
}
div.vkUOnline {
background-image: url("http://ipic.su/img/img3/fs/online.1325960317.png") !important;
}
div.vkUOffline {
background-image: url("http://ipic.su/img/img3/fs/offline.1325960265.png") !important;
}
div.vkUUndef {
background-image: url("http://ipic.su/img/img3/fs/undefined.1325960364.png") !important;
}
Сердечки красного цвета
Делает все сердечки из системы "Мне нравится" красными.   Код:
/* Сердечки красного цвета */
.like_wrap div, #pv_like_icon, #mv_like_icon, .post_like_icon, .fw_like_icon, .like_wrap i {
background-image: url("http://savepic.net/1410876.gif") !important;
}
.post_like_link, span.like_link, #mv_like_wrap .fl_l, #pv_like_wrap .fl_l, .fw_like_link {
color: rgba(255, 0, 0, 0.7) !important;
}
.post_like_count, .like_count, #mv_like_count, #pv_like_count, .fw_like_count {
color: rgba(255, 0, 0, 0.9) !important;
font-weight: bold !important;
}
.post_like:hover {
background-color: rgba(255, 0, 0, 0.1) !important;
}
.pvs_hh_fg {
background-image: url("http://ipic.su/img/img3/fs/post_hh.1325808053.png") !important;
}
Скрыть надпись 'Мне нравится', скруглить края рамки лайка и сделать сердечко менее заметным
Убирает надпись "Мне нравится" у лайков, оставляя только сердечко и счётчиков лайков, скругляет края рамки у лайков к постам и делает сердечко менее заметным, когда на нём нет наведения указателя мыши.  Код:
/* Скрыть надпись 'Мне нравится', скруглить края рамки лайка и сделать сердечко менее заметным */
div.post_like_wrap {
opacity: 0.4 !important;
}
div.post_like_wrap:hover {
opacity: 1 !important;
}
.post_like {
border-radius: 5px !important;
-o-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
}
span.post_like_link, .like_link, #pv_like_wrap span.fl_l:first-child, #mv_like_wrap span.fl_l:first-child {
display: none !important;
}
Скрыть надпись 'Мне не нравится', скруглить края рамки дислайка и сделать менее заметным
Код:
/* Дизлайк 1 апреля 2013 */
.post_dislike {
border-radius: 5px !important;
-o-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
}
span.dislike_link, span.post_dislike_link, span.fw_dislike_link, #pv_dislike_wrap span.fl_l:first-child, #mv_dislike_wrap span.fl_l:first-child {
display: none !important;
}
Замена фона в темах
Замена фона в темах. (обычно этот код должен работать. точно работает на скинах Opera System и Bubbles) Код:
html body{ background:url("http://cs10787.userapi.com/u13391307/137964159/w_f7b25ecf.jpg") fixed no-repeat 50% 50% !important; background-size:cover !important;}
Код:
html body, #page_wrap{ background:url("http://cs10787.userapi.com/u13391307/137964159/w_f7b25ecf.jpg") fixed no-repeat 50% 50% !important;background-size:cover !important;}
Расширенная фильтрация новостей
Возможно создание своих правил фильтрации с помощью CSS-твиков. Для работы созданного твика в вкопте должна быть активна основная галка фильтра, и сняты галки со всех пунктов фильтрации.  Подробности: класс .vk_feed_filter добавляется ко всем постам до кторых дотянулся скрипт. так же вместе с ним могут быть добавлены классы: .vk_feed_photo .vk_feed_video .vk_feed_audio .vk_feed_graff .vk_feed_poll .vk_feed_note .vk_feed_text .vk_feed_links .vk_feed_group .vk_feed_friend .vk_feed_repost например чтобы скрыть всё и показать те, где есть аудио, нужен такой код: Код:
.vk_feed_filter{display:none !important}
.vk_feed_filter.vk_feed_audio{display : block !important} /*классы пробелами не разделять. они все разом к одному элементу приписаны*/
Изменение высоты контакт-листа
Устанавливает указанную высоту для черного окошка со списком друзей.  Код:
/* Изменение высоты контакт-листа с онлайн пользователями */
#fc_contacts {
height: 252px !important
}
Белый/Тёмный фон и увеличение окна выбора смайлов Изменение названий пунктов в левом меню Изменение шрифта сайта Увеличить размер миниатюр в списке документов Перенос списка открытых вкладок диалогов вправо Мини-чат с закосом под metro Знаете что-то сами: пишите. Я так же буду рыться и искать P.S. Инструкция по установке CSS-кодов
Последний раз редактировалось vladsima; 14.07.2013 в 23:12. Причина: up |
|
Оффлайн
|
|
)
| 42 пользователя(ей) сказали cпасибо: | 3dmax, alex464, alexxsim, ArckTick, Cramer, Dalek, denisska, Dr_Den, evg, evgeniy.trifonov, FaNaTuK, hasta2010, JohnTR, KiberПсих, Mangust732, MAV, Mr.Smit, Nickolia46, Pasha_49, PoherFace, psih2.2.8, Reliance, Reydan-46, saniel, Sintezmaniac, SmowiN, tery, vall_gorr, ves_nik, VitaliyShayko, Vostan1, Wirmis, yurok, Андрей Белявский, Ареопагит, Вэлл, Гавр, Даниил Хохряков, Дмитрій Лисак, Женя Плеханов, Минор, Петян |
О пользователе
Сообщений: 1,537
ВкоптоКарма: 2,663
|
Omeha2, если хочешь, то можно и подправить.
к слову сказать, все цвета в скине - инверсия стандартных. |
|
Оффлайн
|
|
|
Прижился
О пользователе
Сообщений: 94
ВкоптоКарма: 38
|
Еще один CSS твик для темы Black&Brown v1.3.1.
Постарался убрать все ляпы. Если найдете еще то пишите здесь или в ЛС буду по мере возможности исправлять. П.С. писал для браузера Опера 11+ на других не тестировал. Твик
Код:
.stl_active.over_fast #stl_bg { /* Полоса "Вверх"*/
background-color: #1E1812;
}
div.fc_clist_filter_wrap { /*Бокс друзья онлайн, поле ввода*/
background: url("http://st0.userapi.com/images/magglass.png") 8px 7px no-repeat #000;
}
#albums_load_more { /*Мои фотографии,полоса "Показать все Х альбомов"*/
background: #1E1812;
}
.audio_friend {
background: #000000;
}
.audio_friend:hover { /*Список друзй в аудио */
background: #1E1812;
}
#audio_more_friends:hover {
background: #92704C;
}
#audio_more_friends { /*Кнопка другие друзья в аудо*/
background: #1E1812;
}
.feedback_reply_row_wrap { /*бокс ответа в новостях*/
background: #000;
border-color: #3F352A;
}
.feedback_reply_tail { /*Стрелочка в новостях, от блока коментов до */
background: url("http://st0.userapi.com/images/icons/feedback_iconset.gif?4") 0px -140px no-repeat transparent;
}
.feedback_row_clickable_over1, .feedback_row_clickable_over2, .feedback_row_clickable_over3 ,.feedback_row_answer { /*Пункты в новостях, которые выделятся при наведении*/
background: #1E1812;
}
.feedback_row_answer_wrap {
background: #000;
border: 1px solid #3F352A;
}
.apps_submenu { /*Полоса вибора игры приложение в приложениях*/
background: #1E1812;
border-bottom: 1px solid #3F352A;
border-top: 1px solid #3F352A;
}
.apps_cat_section:hover { /*пункты новые рекомендации и тд на полосе вибора в приложениях*/
background-color: #7e6947;
}
.apps_section_act:hover, .apps_section_act{
background: #7e6947;
}
.apps_featured_slide:hover { /*Стрелка переключения рекламы игр*/
background: url("http://st0.userapi.com/images/pics/apps_slide.png") 50% 50% no-repeat #281F28;
}
.apps_featured_slide {
background: url("http://st0.userapi.com/images/pics/apps_slide.png") 50% 50% no-repeat #1E1812;
}
.apps_cat_type:hover, .apps_cat_type{
background: #7e6947;
}
#wk_box { /*Бокс установки приложения*/
background: #000000;
}
.apps_layer_friends { /*полоса Запустить игру*/
background: #161616;
}
.app_layer_name { /*Установка игр - имя игры*/
color: #C99C71;
}
.app_search_info{ /*Установка игр - описание игры*/
color: #eee;
}
#wk_box { /*Установка игр - цвет фона бокса в играх со скринами*/
background: #000 !important;
}
#wk_summary .summary {
color: #BA9971 !important;
}
.docs_filter_sep { /*Документи, розделитель левого меню*/
border-bottom: 1px solid #1E1812;
}
.tdd_search .tdd_control { /*Документы, цвет фона поиска*/
background: url("http://st0.userapi.com/images/magglass.png") 5px 7px no-repeat #000;
}
.tdd_control { /*Документы, цвет границ строки поиска*/
border: 1px solid #3F352A;
}
.tdd_tag { /*Документы, */
background: #1E1812;
}
.tdd_l{ /*документы, Цвет текста в пункте который появляется в строке поиска*/
color: #D4A785;
}
.tdd_x_c { /*Документы, Крестик в пункте который появляется в строке поиска*/
background: url("http://st0.userapi.com/images/pics/im_tabx.gif?1") 0px 0px transparent;
}
#search_query_wrap {
background: #080808 !important;
border-bottom: 1px solid #A6825C !important;
}
.search_table td.results, .search_results td.results {
background: #010101;
border-bottom: 1px solid #3F352A;
border-right: 1px solid #3F352A;
}
.search_table td.filters {
background-color: #000;
}
.header, .settings_block.closed .header, .filter_shut { /*поиск, в правом меню откривающиеся списки*/
background-image: url("http://vkopt.net/css/dark/imgs/filterset_off1.gif") !important;
background-repeat: no-repeat;
}
#results .three_col_row { /*НР между результатами в поиске */
border-bottom: 1px solid #3F352A !important;
border-top: 0px !important;
}
.settings_block .header, .filter_open {
background-image: url("http://vkopt.net/css/dark/imgs/filterset_on.gif1") !important;
background-repeat: no-repeat;
}
.search_subtab1.active {
background-color: #B48960 !important;;
color: #000;
cursor: default;
}
.search_subtab1:hover {
background-color: #1E1812;
}
.search_subtab1 {
color: #BA9771;
}
|
|
Оффлайн
|
|
|
О пользователе
Сообщений: 1,537
ВкоптоКарма: 2,663
|
Omeha2, добавил в код темы. спасибо)
|
|
Оффлайн
|
|
Мимо проходил, заглянул)
О пользователе
Сообщений: 30
ВкоптоКарма: 10
|
пожалуйста, исправте функцию
/* Уменьшение контакт-листа с онлайн пользователями по высоте */ спасибо |
|
Оффлайн
|
|
|
Мимо проходил, заглянул)
О пользователе
Сообщений: 30
ВкоптоКарма: 10
|
Omeha2, дело в том, что высота окна не меняется, какое бы значение я не ставил в
"#fc_contacts { height: "..."px !important }" реакции нет  в чем может быть дело?PS: раньше все нормально работало... Последний раз редактировалось marik1499; 13.03.2012 в 05:19. |
|
Оффлайн
|
|
ПсИХ=)))
О пользователе
Сообщений: 3,954
ВкоптоКарма: 8,647
|
Ареопагит,
marik1499, а почему у меня тогда мой старый код работает?  
__________________
 |
|
Оффлайн
|
|
|
Прижился
О пользователе
Сообщений: 94
ВкоптоКарма: 38
|
marik1499, Вэлл, Разные браузери по разному интерпретируют код, Во-вторых если глянуть на исходник то можно увидеть, что див с ид'ом fc_contacts лежит в диве с класом fc_contacts_wrap и получается что оба они содержат в себе список пользователей...
|
|
Оффлайн
|
|
 |
Нижняя навигация
|
||||||
|
||||||
| Метки |
| css, твики |
| Здесь присутствуют: 7 (пользователей: 0 , гостей: 7) | |
Линейный вид
|
|
Часовой пояс GMT +4, время: 06:51.