No Image

Как поменять цвет вкладки сайта

СОДЕРЖАНИЕ
474 просмотров
10 марта 2020

Как изменить цвет вкладки в Яндекс.Браузере с того, который формируется по иконке сайта на произвольный?

На официальном сайте Яндекса есть только информация о виджетах, выводимых в закладках: https://tech.yandex.ru/browser/tableau/doc/dg/concepts/create-widget-docpage/

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

Сам код манифеста виджета:

Еще нашел такой код:

Но толку от него нет, он ничего не меняет.

1 ответ 1

Официальный ответ от службы техподдержки Яндекса:

Цвет активной вкладки определяется автоматически его виджетом. Если у сайта есть свой логотип для виджета на странице Табло, то оформление вкладки будет ему соответствовать.

Если виджета у сайта нет, в этом случае цвет вкладки будет взят из фавиконки сайта.

P.S. От себя добавлю, что в ходе экспериментов выяснилось, что цвет фона в большинстве случаев берется из первого заполненного верхнего правого пикселя иконки и делается на несколько тонов темнее. В ряде случаев цвет формируется по другим алгоритмам (в частности, для очень светлых или очень темных иконок, а также для изображений с сочетанием разных цветов).

К сожалению, на практике Яндекс.Браузер работает с виджетом не совсем корректно, новые открываемые страницы красятся по цвету иконки сайта, а при манипуляциях с history браузера (ajax и т.д.) цвет берется из параметра "color" (цвет логотипа виджета не влияет на окрашивание). Будем надеяться, что в новых версиях браузера все будет работать правильно.

  • 2019-11-20
  • 18
  • Июня
    2017
  • Доброго времени суток. 🙂

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

    Читайте также:  Как отключить запрос пароля на виндовс 10

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

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

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

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

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

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

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

    Полезная информация для исполнителей и заказчиков

    Смена цвета вкладки открытого сайта на телефоне и Кастомизация ползунка прокрутки сайта

    Как обычно, сразу к делу.

    Как сменить цвет вкладки открытого сайта в мобильных браузерах?

    Все максимально просто. В теге head размещайте приведенные внизу meta теги:

    Читайте также:  Linux выбор файловой системы

    Эти meta теги отвечают за изменение цвета вкладки сайта на мобильных браузерах в android и ios системах. В атрибутах content необходимо указать нужный вам цвет.

    На изображении внизу видно пример того, как были использованы эти meta теги на моем сайте по сравнению со стандартным цветом вкладки в поисковике гугл.

    В моем случае я использовал цвет #2b2c2d вставляя его в атрибут content.

    Как изменить стили ползунка прокрутки всего сайта?

    Здесь уже немного интереснее. Сейчас мы сделаем штуку, которая изображена на фото ниже:

    Мы кастомизировали стандартный вид скрола на сайте, а именно: сменили цвет, форму и фон скролбара с помощью специальных псевдоелементов. Для для того, чтобы сделать так же, скопируйте css код ниже:

    Вы можете изменять скрол на сайте как вам будет угодно. У вас есть возможность менять размеры скрола, добавлять ему тень, высоту ползунка, кнопки и даже просто убирать его с экрана с помощью display: none. Естественно, если вам необходимо кастомизировать только определенный скролбар на сайте, задайте эти псевдоелементы именно ему, а не глобально как это было сделано выше.

    Примечание. К сожалению только webkit браузеры как Chrome, Opera и Safari работают с такими псевдоелементами. На браузерах Firefox, IE и Edge они не поддерживаются.

  • Комментировать
    474 просмотров
    Комментариев нет, будьте первым кто его оставит

    Это интересно
    Adblock
    detector