Давно хотели поставить какую-либо тему на социальную сеть ВКонтакте? Но не знали как? Это очень просто! Сейчас я распишу, как устанавливать темы и элементы для дизайна ВКонтакте на браузеры Mozilla Firefox, Google Chrome, Opera, Safari и Internet Explorer.
Содержание
- 1. Установка тем и элементов на браузер Mozilla Firefox
- 2. Установка тем и элементов на браузер Opera
- 3. Установка тем и элементов на браузер Google Chrome
- 4. Установка тем и элементов на браузер Internet Explorer
- 5. Установка тем и элементов на браузер Safari
- CSS-коды:
- Кнопки социальных сетей
- Набор круглых кнопок
- Ссылка на соц сеть
- Код CSS
- Набор квадратных кнопок
1. Установка тем и элементов на браузер Mozilla Firefox
- Для установки тем ВКонтакте на браузер Firefox вам понадобится плагин Stylish. Установите его и перезапустите браузер.
- После установки у вас на нижней панели появится значок с буквой S. Это и есть Stylish.
- Нажимаем на значок, выбираем Создать новый стиль, выбираем Для текущего URL. или Для vk.com. , сверху вписываем любое название, в большое поле вставляем код со стилями, и нажимаем Сохранить;
Готово. Стиль будет сохранён и активирован. Включать и выключать стили можно в главном меню плагина.
2. Установка тем и элементов на браузер Opera
- Для установки тем ВКонтакте на браузер Opera нужно выбрать папку, в которой будут лежать наши стили. В браузере открываем страницу opera:about и находим там строку: Папка пользовательских файлов CSS. Адрес в ней — это папка, в которую следует складывать все стилевые файлы.
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 идут стили для кнопок. Можете удалить ненужные вам соцсети.
Например:
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Источник: