Небольшие CSS-твики
Мелочи, которые вряд ли будут полезны большинству, но кое-кому может и пригодятся :)
Инструкция по установке CSS-твиков:
Не обрезать миниатюры фотографий на профилях и в группах
Миниатюры фотографий на профилях и в группах немного обрезаются, если они слишком большие по высоте. Этот твик исправит это. http://savepic.ru/2698570.png Код:
/* Не обрезать миниатюры фотографий на профилях и в группах */ Скрыть кнопку, разворачивающую меню в группах
Скрывает кнопку раскрытия меню в группах. http://ipic.su/img/img3/fs/kiss_59kb.1325808570.png Актуально, только если во ВкОпте используется функция "Автоматически разворачивать новости в группах (меню группы)". Код:
/* Скрыть кнопку, разворачивающую меню в группах */ Скрыть лог VKopt'a у alpha и beta версий
Скрывает лог VKopt'a у alpha и beta версий. http://ipic.su/img/img3/fs/kiss_3kb.1325961979.png Однако использовать это не рекомендуется, ибо в случае ошибок не получится прибегнуть к логу и сообщить всю информацию об ошибке. Код:
/* Скрыть лог VKopt'a у alpha и beta версий */ Скрыть предложение заполнить информацию о профиле
Скрывает блок под аватаркой вашего профиля, предлагающий заполнить информацию о себе. http://ipic.su/img/img3/fs/kiss_65kb.1325962318.png Код:
/* Скрыть предложение заполнить информацию о профиле */ Убрать кнопку 'Показать/скрыть подробную информацию'
Убирает кнопку показа/скрытия подробной информации о пользователе. http://ipic.su/img/img3/fs/kiss_3kb.1325962382.png Актуально, если вы используете во ВкОпте функцию "Всегда разворачивать информацию о пользователе". Код:
/* Убрать кнопку 'Показать/скрыть подробную информацию' */ Сделать менее приметной табличку об изменении номера
Немного уменьшает табличку, которая появляется в шапке сайта при изменении номера мобильного телефона. http://ipic.su/img/img3/fs/kiss_75kb.1309610012.png Код:
/* Сделать менее приметной табличку об изменении номера */ Отображать пункт [VKopt] в виде иконки в левом верхнем углу
Убирает пункт [VKopt] из левого меню и ставит его слева вверху в виде иконки. http://ipic.su/img/img3/fs/kiss_19kb.1316102354.png Известные недоработки:
Код:
/* Отображать пункт [VKopt] в виде иконки в левом верхнем углу */ Не группировать последовательные сообщения в диалогах
Диалоги перестают группировать подряд идущие сообщения от одного пользователя. http://ipic.su/img/img3/fs/kiss_26kb.1316162740.png Код:
/* Не группировать последовательные сообщения в диалогах */ Надписи Online зелёного цвета
Заменяет все индикаторы активности пользователя на сайте на аналогичные, но зелёные. http://ipic.su/img/img3/fs/kiss_5kb.1325809982.pnghttp://ipic.su/img/img3/fs/kiss_5kb.1325809795.png Код:
/* Надписи Online зелёного цвета */ Так же для достижения такого эффекта в диалогах: http://ipic.su/img/fs/kiss_4kb.1307791846.png удалите последние три строчки в коде выше и вставьте этот листинг: Код:
.im_status_online { Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет
Делает верхушку страницы похожей на старую, которая использовалась в интерфейсе ВКонтакте 2009 года. Возможны три варианта: 1. Простой цвет http://savepic.ru/2705758.png Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [1] */ http://savepic.ru/2688339.png Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [2] */ 3. Самый качественный вариант http://savepic.ru/3155000.png Код:
/* Вернуть заголовкам профилей, страниц групп и публичных страниц старый бледно-жёлтый цвет [3] */ Использовать несколько сразу - не следует. Замена иконкой таблички о вашем текущем Online статусе
Заменяет табличку о вашем текущем онлайн статусе иконкой. http://ipic.su/img/img3/fs/kiss_1kb.1325961356.pnghttp://ipic.su/img/img3/fs/kiss_1kb.1325963456.pnghttp://ipic.su/img/img3/fs/kiss_1kb.1325963481.png Цвет иконки символизирует текущий статус (Зелёный - Online, Красный - Offline, Жёлтый - Неопределено) Код:
/* Замена иконкой таблички о вашем текущем Online статусе */ Сердечки красного цвета
Делает все сердечки из системы "Мне нравится" красными. http://ipic.su/img/img3/fs/kiss_38kb.1325808331.pnghttp://ipic.su/img/img3/fs/kiss_1kb.1325808368.png Код:
/* Сердечки красного цвета */ Скрыть надпись 'Мне нравится', скруглить края рамки лайка и сделать сердечко менее заметным
Убирает надпись "Мне нравится" у лайков, оставляя только сердечко и счётчиков лайков, скругляет края рамки у лайков к постам и делает сердечко менее заметным, когда на нём нет наведения указателя мыши. http://ipic.su/img/img3/fs/kiss_0kb.1326066639.png Код:
/* Скрыть надпись 'Мне нравится', скруглить края рамки лайка и сделать сердечко менее заметным */ Скрыть надпись 'Мне не нравится', скруглить края рамки дислайка и сделать менее заметным
Код:
/* Дизлайк 1 апреля 2013 */ Замена фона в темах
Замена фона в темах. (обычно этот код должен работать. точно работает на скинах 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} Изменение высоты контакт-листа
Устанавливает указанную высоту для черного окошка со списком друзей. http://ipic.su/img/img7/fs/kiss_33kb.1373820911.png Код:
/* Изменение высоты контакт-листа с онлайн пользователями */ Белый/Тёмный фон и увеличение окна выбора смайлов Изменение названий пунктов в левом меню Изменение шрифта сайта Увеличить размер миниатюр в списке документов Перенос списка открытых вкладок диалогов вправо Мини-чат с закосом под metro Знаете что-то сами: пишите. Я так же буду рыться и искать :) P.S. Инструкция по установке CSS-кодов
|
IkaR49, Аффтар, пеши исчо!
|
|
IkaR49, А что изменилось после первого апдейта? Как было 3 пункта, там и осталось:confused:
|
Wirmis, эм... первый апдейт как раз-таки добавил третий пункт, до этого их было два оО
А второй апдейт - отредактировал первый пункт, теперь фотографии ещё и на страницах групп не обрезаются. Добавлено через 35 минут UPD3 Добавлено: Нормальная центровка нижней части ВК при использовании правой панели |
IkaR49, Не знаю может это я тупанул:confused: Но нормальная центровка нижней части ВК при использовании правой панели не работает у меня:(
|
vall_gorr, ссылку на страницу, где не работает, скажи как устанавливал код (через вкопт или иначе) и скриншот если можно...
|
Вложений: 1
IkaR49, тоже самое ;) Страница профиля (да и на остальных тоже самое)
Устанавливал через VkOpt |
Reydan-46, хм... а в адресной строке адрес вида http://vkontakte.ru/fave или http://vkontakte.ru/fave#/feed?
|
Цитата:
Цитата:
|
Reydan-46, хм... странно О_о Буду пытаться исправить :confused:
Добавлено через 17 минут UPD4: Отредактировал Нормальную центровку нижней части ВК при использовании правой панели. Теперь на всех страницах одинаково (кроме страниц вида *.php) |
IkaR49, У меня центровка происходит только вот с таким кодом
Код:
#footer_wrap { |
vall_gorr, а разрешение экрана какое?.. :confused:
Я действительно не знаю.. вот у меня с 911 пикселями: http://savepic.ru/2713950.png Даже изменение активной области браузера ничего не меняет: http://savepic.ru/2714974.png |
Цитата:
|
vall_gorr, странно, тогда по логике должно было сместиться в другую сторону.
Слушай, сделай так: 1. Верни в параметр 911px 2. Запусти опера драгонфлай (ПКМ --> Проинспектировать элемент) 3. Методом тыка выдели на странице выдели footer_wrap 4. Наведи указатель на пустое пространство под правой панелью 5. Сделай скриншот и пришли мне Должно получиться примерно так: http://savepic.ru/2718046.png Мне просто надо увидеть габариты у page_layout относительно footer_wrap |
Наконец то скрыл табличку с напоминаниями о днях рождениях))))
.left_box { display: none !important; } Почему мне никто раньше не сказал, что так можно)) ^_^ |
|
Reydan-46, отредактировал.
|
IkaR49, поправил кое-чего вот в этом:
Цитата:
Код:
#profile_photos .photos a, #group_photos .group_photos_table a { Код:
.thumb img, .thumb a |
Кому нужно =)
Изменение фона главных ссылок в профилях и группах
Выглядит вот так: http://i073.radikal.ru/1106/86/5b8df6dfa289.jpg Код: Код:
.module_header .header_top { и Не обрезать миниатюры фотографий в альбомах
Выглядит вот так: http://s41.radikal.ru/i092/1106/75/2358cf7b51a4.jpg Код: Код:
#photos_container .photo_row { |
IkaR49, мне кажется что такой цвет больше подойдет к общему интерфейсу ВК, если друзей отмечено своим цветом.
Код:
/* Надписи Online зелёного цвета */ |
mriv, Reydan-46, альбомы добавлять не буду. И вот почему:
http://savepic.ru/2687326.png Убирать серую рамку тоже имхо лишнее, если картинка с белым фоном, границ не видно: http://savepic.ru/2688350.png Добавлено через 2 минуты vall_gorr, а я никакой разницы в цвете не вижу :confused: они очень сильно похожи... |
IkaR49, ну кому как. Разницы почти никакой, но мой чуть светлее. Мне просто больше нравиться.
зы я эгоистО_о |
IkaR49, хм...а у меня в альбомах я такого не видел...
Если так попробывать, тоже самое? =) Код:
#photos_container .photo_row { |
Reydan-46, У меня тоже самое что у Икара49 с обоими кодами.
|
Reydan-46, ещё хуже. Они просто друг к другу лепятся.
Я вообще посмотрел что здесь и не думаю, что с помощью только css получится что-то сделать. Смещение как на том моём скрине происходит из-за того, что последняя миниатюра в строке меньше первых трёх. Учитывая, что все div-контейнеры имеют параметр "float: left", то согласно этому правилу следующая картинка и встаёт левее той, которой может. Остальные мостятся снизу по тому же правилу. Чтобы это исправить надо или задействовать js или ждать, пока что-нибудь подходящее сделают в CSS3. |
IkaR49, а вот еще про онлайн (просто колор, не бэкграунд):
.mail_envelope_online - это если открывать сообщения по старому типу. .dialogs_online - в списке диалогов. UPD: И возможно стоит добавить туда параметр (к колору): font-weight: 700 !important Как по мне - так лучше смотрится ;) |
вариант со "свечением" точек онлайна:
Код:
.im_status_online { |
.im_sel_row .im_log_author, .im_sel_row .im_log_body, .im_sel_row .im_log_date, .im_sel_row {background-color: #99CCFF !important;} /*В просмотре диалогов, при выделении сообщений */
Когда выделяешь сообщение в диалогах, оно не только получает галочку, но и становится темнее... Но при использовании VkOpt-а, ее "темнота" иногда не подходит к выбранной пользователем во VkOpt-е. Вот добавление этого и сделает сообщение темнее... Цвет, естественно, можно выбрать самим. |
IkaR49, думаю этот css тоже не будет лишним для тех у кого во Вкопте включена функция Подробная информация на профилях: -всегда разворачивать , убирает кнопку "скрыть подробную информацию"
Код:
#profile_full_link { |
Гавр, слегка подредактировал и добавил ;)
|
Убирает основную инфу пользователя. Может кому-то пригодиться.
Код:
#profile_full_info { |
vall_gorr, думаю аналог твоему твику есть функция ВК в настройках Всегда показывать полную информацию обо мне
|
Гавр, Этот код вообще убирает всю инфу, начиная с контактной информации.
|
http://savepic.net/1389360.jpg
Код:
/* Изменение цвета сердечек "нравится" */ |
Reydan-46, вы забыли про !important.
/*Изменение цвета сердечек "нравится"*/ .wall_module .like_wrap div.my_like {background-image: url("http://savepic.net/1410876.gif") !important} .wall_module .like_wrap div {background-image: url("http://savepic.net/1410876.gif") !important} |
http://savepic.org/1888104.jpg
Код:
/* Изменение цвета указательных надписей "обновления" и "все" */ |
Дополнение к заголовкам
http://img.ii4.ru/images/2011/06/18/..._kiss_13kb.jpg http://img.ii4.ru/images/2011/06/18/..._kiss_14kb.jpg http://img.ii4.ru/images/2011/06/18/119094_kiss_9kb.jpg http://img.ii4.ru/images/2011/06/18/..._kiss_11kb.jpg Вернуть всем заголовкам старый бледно-жёлтый цвет
Код:
/* Вернуть всем заголовкам старый бледно-жёлтый цвет */ |
Насчёт "Фиксация шапки сайта"
Кусок правой панели не виден. http://ipic.su/img/fs/kiss_8kb.1309079287.jpg Нужно добавить Код:
#right_bar { http://ipic.su/img/fs/kiss_8kb.1309079327.jpg И для клавиши "Наверх" использовать процентную позицию.
Сейчас: http://ipic.su/img/fs/kiss_17kb.1309079525.jpg Код:
#side_back_link { http://ipic.su/img/fs/kiss_12kb.1309079642.jpg |
Часовой пояс GMT +4, время: 18:19. |
Сервер бесплатных медицинских консультаций
Дачный форум. уДачное общение.
VkOpt 2007 - 2024
Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод от zCarot