css коды для вконтакте

Давно хотели поставить какую-либо тему на социальную сеть ВКонтакте? Но не знали как? Это очень просто! Сейчас я распишу, как устанавливать темы и элементы для дизайна ВКонтакте на браузеры Mozilla Firefox, Google Chrome, Opera, Safari и Internet Explorer.

1. Установка тем и элементов на браузер Mozilla Firefox

  • Для установки тем ВКонтакте на браузер Firefox вам понадобится плагин Stylish. Установите его и перезапустите браузер.
  • После установки у вас на нижней панели появится значок с буквой S. Это и есть Stylish.
  • Нажимаем на значок, выбираем Создать новый стиль, выбираем Для текущего URL. или Для vk.com. , сверху вписываем любое название, в большое поле вставляем код со стилями, и нажимаем Сохранить;

Готово. Стиль будет сохранён и активирован. Включать и выключать стили можно в главном меню плагина.

2. Установка тем и элементов на браузер Opera

    Для установки тем ВКонтакте на браузер Opera нужно выбрать папку, в которой будут лежать наши стили. В браузере открываем страницу opera:about и находим там строку: Папка пользовательских файлов CSS. Адрес в ней — это папка, в которую следует складывать все стилевые файлы.

  • Перемещаем свой стилевой файл (формата .css) в Папку пользовательских файлов CSS. Если у вас не файл, а просто стилевой код – сохраните его в файл формата .css и переместите файл в Папку пользовательских файлов CSS;
  • Открываем браузер, нажимаем кнопку Opera, и идём в: Страница ––> Стиль и выбираем файл со своими стилями;

    3. Установка тем и элементов на браузер Google Chrome

    Способ установки тем ВКонтакте на браузер Chrome похож на способ мозиллы, поскольку нам понадобится всё тот же плагин Stylish. Итак:

    • Запускаем браузер Google Chrome;
    • Устанавливаем плагин Stylish. В правом верхнем углу появится иконка S. Это и есть наш плагин;
    • Дальше кликаем по этой иконке правой кнопкой мыши и выбираем «Настройки»;
    • Нажимаем на кнопку Создать стиль, вводим название, CSS-код и указываем, к какому сайту применить стиль: URL, начинающимся с http://vk.com/ либо URL, соответствующим регулярному выражению http://vk.com/. После, слева ставим галочку Включено (если не поставлена) и нажимаем на кнопку Сохранить;

    4. Установка тем и элементов на браузер Internet Explorer

    Internet Explorer, пожалуй, самый не продвинутый браузер что касается оформления, ведь в отличие от Firefox, Opera, Chrome или Safari в нём можно подключать только один CSS-файл. Итак, для подключения CSS в IE делаем следующее:

    • Открываем браузер Internet Explorer;
    • В правом верхнем углу нажимаем на шестерёнку (сервис) и выбираем Свойства обозревателя;
    • Во вкладке Общее в самом низу находим кнопку Оформление. Кликаем;
    • Ставим галочку у пункта Оформлять, используя пользовательский стиль и выбираем CSS-файл со своими стилями;
    • Нажимаем ОК. Готово!

    5. Установка тем и элементов на браузер Safari

    Для установки CSS-стилей на браузер Safari сделайте следующее:

    • Запустите браузер Safari;
    • Нажмите на шестерёнку, расположенную в правом верхнем углу, и выберите пункт Настройки. ;
    • Перейдите на вкладку Дополнения;
    • Нам нужна строка Табл. стилей. Кликаем на комбобокс и выбираем пункт Другой. ;
    • На компьютере выбираем свой CSS-файл;
    • Готово!

    P.S. В браузерах Opera и Google Chrome я заметил, что не работают темы, в начале которых прописана строка @-moz-document domain(«vk.com») . Если вы столкнётесь с той же проблемой, просто уберите данную строку вместе с фигурными скобками.

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

    Ваши CSS-стили видны только вам.

    Вы можете создать свой CSS код для Вконтакте выбирая нужные себе функции ( даны ничже ) или скачать уже готовый который включает все данные функции.

    CSS-коды:

    Скрытие таблички:

    Скрытие рекламы:

    Изменение имени у всех:

    Изменяем полоску рейтинга на произвольную картинку:

    Свои название пунктов в меню:

    Своя шапка:

    Убираем рейтинг и меняем названия многих пунктов страницы:

    muzenergy (Thursday, 10 May 2012 21:03)

    Пробовал «без рекламы» — не работает. Если у кого-то получилось, отпишитесь или этот скрипт не рабочий??

    Александра (Monday, 29 September 2014 00:26)

    #banner2, #banner1, a[href^=»http://vkontakte.ru/help.php?
    работает

    Лилия (Thursday, 27 August 2015 10:24)

    А куда вводить эти коды?

    csspros (Thursday, 26 November 2015 04:55)

    Эти css для vk.com их водить надо в панели разработчика! в пункте source /css.jl

    Alberto (Monday, 14 March 2016 04:47)

    Ну не катят эти коды. Им 4 года.

    Лев (Tuesday, 15 March 2016 05:48)

    Как в панели разработчика в разделе sourse/css ввести коды
    на свои названия пунктов меню?

    thyty (Sunday, 23 April 2017 18:48)

    Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение — возможно это именно то что вы ищите.

    Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

    Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

    Кнопки социальных сетей

    Набор круглых кнопок

    Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

    Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

    Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

    Начинается он с

    В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.

    Надеюсь с вставкой HTML-кода кнопок разберётесь.

    Ссылка на соц сеть

    Теперь чтобы вставить ссылку на ваш профиль, канал или группу — нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.

    Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

    Код CSS

    Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import . Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

    CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

    Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

    Например:

    Набор квадратных кнопок

    Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

  • Оцените статью