Изменение значков расширений средствами CSS
-
В темах Changing icons with css и Changing icons with CSS / part II рассмотрены методы изменения стандартных значков VIVALDI средствами CSS. Но к большому сожалению эти методы не работают для значков расширений установленных в VIVALDI. Это обусловлено тем, что картинка значка расширения хранится в атрибуте src img, который можно изменить только средствами JS или HTML.
Но, все же изменить значок расширения возможно двумя способами:-
Самый простой способ. Заменить в ресурсах самого расширения соответствующий файл иконки значка.
Способ имеет большой недостаток - при обновлении расширения процедуру замены файла придется повторять. -
Способ скрытия изображения иконки и отображения своей иконки средствами CSS.
При этом способе изменения иконки на происходит, а происходит ее скрытие и отображение иной, нужной иконки. Как говорится, ловкость рук и ни какого мошенничества. При этом способе обновление расширения не влияет на отображаемую иконку значка расширения. Привожу пример используемого мной кода:
/* Замена иконки расширения менеджера загрузки*/ .button-toolbar.opjjpmhoiojifppkkcdabiobhakljdgm > button > img { display: block; box-sizing: border-box; background: url(data:image/png;base64,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) no-repeat; width: 16px; height: 31px !important; padding-left: 33px; zoom: 60%; }
Как видно из кода, старая иконка скрывается display: block;, а новая иконка устанавливается в background: в формате png;base64. Остальные атрибуты в коде необходимы для установки стиля отображения новой иконки.
Используемые мной ресурсы из интернет:Как установить атрибут src тега img через css?
Replace the Image in an <img> with CSSНадеюсь кому либо это пригодится.
-