X
Заказать услугу

Меняем цвет вкладки для сайта в браузере

Плагины и Шаблоны для Wordpress
  • 2018-12-09
  • 5186 просмотр

    4 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

В этой короткой статье хочу рассказать как сменить цвет вкладки, статус бара в браузере для сайта. Скажу сразу, что пока это работает не везде. В основном на мобильных устройствах. Данная штуковина не несет особой полезной функциональности, но как говорится - "Понты дороже денег" 🙂 Конечно же, это шутка но доля правды в ней есть.

Меняем цвет вкладки для сайта в браузере

Благодаря такому внедрению, вкладка с вашим сайтом будет всегда выделятся. Человек просматривающий страницы в своем мобильном браузере, с легкостью найдет ваш сайт среди прочих открытых. Ну и как ни как, вы придаете сайту определенный стиль, который выдерживается даже в таких мелочах. Время от времени я добавляю такие мелочи на сайты заказчиков. если они пожелают. Чтобы показать вам разницу я сделал это и со своим сайтом. Если обычно, открытая страница на телефоне имеет такой вид:

Обычный статус бар

То с добавлением цвета, статус бар, верхняя часть с адресом и элементами браузера становится таким как вы захотите. В моем случаи зеленым:

Цветной статус бар

Делается все это очень просто. Вам всего лишь нужно добавить пару строк в шапку вашего сайта, а точнее туда где у вас задаются META - теги. Это между тегами <head></head>. Добавляете вот такие мета теги:

<meta name="msapplication-TileColor" content="#6AB12F">
<meta name="theme-color" content="#6AB12F">

Естественно задаете свой цвет, меняя #6AB12F на код своего, нужного цвета. Если вы еще не совсем знаете про HEX цвета и где их брать, можете найти нужный в статье - Таблица безопасных цветов.

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 5 из 5
Читайте также
Опубликовано 4 комментария

Добавить комментарий для Назарий Отменить ответ

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.