Иконки в боковой панели.
-
Для изменения иконок можно использовать такой css:/* Закладки */ button.panelbtn.bookmarks svg path { d: path("M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"); } /* Загрузки */ button.panelbtn.downloads svg path { d: path("M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z"); } button.downloads.loading div.progress { top: 25px !important; } button.panelbtn.downloads svg .small-icon-outline, button.panelbtn.downloads svg .progress-bar-container { display: none !important; } /* Заметки */ button.panelbtn.notes svg path { d: path("M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1h-11zm6 8.5a1 1 0 0 1 1-1h4.396a.25.25 0 0 1 .177.427l-5.146 5.146a.25.25 0 0 1-.427-.177V9.5z"); } /* История */ button.panelbtn.history svg path { d: path("M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"); } /* Почта */ button.panelbtn.mail svg path { d: path("M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"); } /* Окно */ button.panelbtn.tabs svg path { d: path("M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zM2 2h12s2 0 2 2v6s0 2-2 2H2s-2 0-2-2V4s0-2 2-2z"); } /* RSS */ button.panelbtn.feeds svg path { d: path("M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"); } /* Контакты */ button.panelbtn.contacts svg path { d: path("M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"); } /* Календарь */ button.panelbtn.calendar svg path { d: path("M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zM9.5 7h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm3 0h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zM2 10.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3.5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z"); } /*Переводчик*/ button.panelbtn.translate svg path { d: path("M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"); } /*Список чтения*/ button.panelbtn.readinglist svg path { d: path("M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"); } /*Задачи*/ button.panelbtn.tasks svg path { d: path("M10 .5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5.5.5 0 0 1-.5.5.5.5 0 0 0-.5.5V2a.5.5 0 0 0 .5.5h5A.5.5 0 0 0 11 2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 1-.5-.5Z M4.085 1H3.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1h-.585c.055.156.085.325.085.5V2a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 4 2v-.5c0-.175.03-.344.085-.5Zm6.769 6.854-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708Z"); } /* Добавить панель */ button.addwebpanel.panelbtn svg path { d: path("M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"); } /* "Открыть новую вкладку" */ .toolbar-tabbar .newtab > button svg path { d: path("M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"); transform: translate(5px, 5px); }
Обновление для версии 5.6+ тут https://forum.vivaldi.net/post/629279
Разумеется, можно вставлять свои, подобрав на свой вкус svg-изображения.
Для примера, сайт https://iconmonstr.com.
Находим нужную иконку, ставим галочку, жмём <Embed>
В появившемся окошке копируем эту часть кода в кавычках
и вставляем в наш css на соответствующее место.
Подключение css-модификаций. -
Отличный твик! Но у меня глюк: иконки выровняны по левому верхнему углу, а не по центру как остальные. Что может на это влиять?
-
@sorofix другие модификации есть?
Где-то выравнивание поехало. -
@sedative29rus нету, в папке один css только с кодом из первого сообщения.
Запустил браузер с ключами --no-experiments --disable-extensions, что бы отсечь расширения и флаги, без изменений. Вин 7, Вивальди 3.7 x64 стабильный
-
@sorofix Да, на 3.7 съезжает. Но я проверял только на 3.8 и 3.9. Обновиться не хотите?)
-
@sedative29rus в 3.8 испортили добавление закладок, экспресс панель и была выпилена функция фона окна. Вредное обновление. Жду 3.9, может оно сгладит негативное впечатление от апдейта
-
@sorofix можно вставить transform:
/* Закладки */ .bookmarks svg path { d: path("M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zM8.16 4.1a.178.178 0 0 0-.32 0l-.634 1.285a.178.178 0 0 1-.134.098l-1.42.206a.178.178 0 0 0-.098.303L6.58 6.993c.042.041.061.1.051.158L6.39 8.565a.178.178 0 0 0 .258.187l1.27-.668a.178.178 0 0 1 .165 0l1.27.668a.178.178 0 0 0 .257-.187L9.368 7.15a.178.178 0 0 1 .05-.158l1.028-1.001a.178.178 0 0 0-.098-.303l-1.42-.206a.178.178 0 0 1-.134-.098L8.16 4.1z"); transform: translate(5px,5px); }
В каждую иконку то же самое.
-
@sedative29rus отлично, работает. Спасибо!
-
И, раз уж на то пошло, кнопку с плюсиком "Открыть новую вкладку" можно привести к одному виду с кнопкой "Добавить Веб-панель:
/* "Открыть новую вкладку" */ .toolbar-tabbar .newtab > button svg path { d: path("M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"); transform: translate(5px,5px); }
Здесь transform пришлось пихать и на 3.9.
-
@sedative29rus а как по аналогии заменить иконку кнопки домашней страницы? Стоит галка Allow for using CSS modifications в экспериментах, перешел на экспресс-панель, нажал F12 для девтулз, выбрал кнопку со стрелкой (Select an element in the page to inspect it) в левом верхнем углу, навел на кнопку домашней страницы, и не нашел там идентификатора, или чего-то подобного, как при наведении на кнопки боковой панели. Как быть?
-
.button-toolbar > button[title="Перейти на домашнюю страницу"] svg path { d: path("M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"); transform: translate(5px,5px); }
В принципе, это находится на англофоруме, но я не жадный, обращайтесь)
-
@sedative29rus Благодарочка!
-
@sedative29rus
А как выглядит синтаксис, если иконка находится на диске? И еще. Можно ставить только векторные иконки или любые? -
@vladi928 Если на диске svg, можно открыть его в текстовом редакторе и посмотреть path.
Где-то на англофоруме вроде писали, что сейчас (начиная с какой-то версии) только такК слову, миллиарды онлайн-конвертеров png to svg есть, можно поэкспериментировать.
-
@sedative29rus
Я задал путь к файлу, но, вероятно, в нем есть синтаксическая ошибка
/* Закладки */
button.panelbtn.bookmarks svg path {
d: path("d:\Program Data\Vivaldi\Custom\Images\bookmark.svg");
} -
@sedative29rus said in Иконки в боковой панели.:
Если на диске svg, можно открыть его в текстовом редакторе и посмотреть path.
-
@sedative29rus
Перепробовал разные варианты - ничего не срабатывает. Вы могли бы показать, где у меня ошибка?
/* Закладки */
button.panelbtn.bookmarks svg path {
path d="d:\Program Data\Vivaldi\Custom\Images\bookmark.svg";
} -
@vladi928 У вас в 3 строке вместо команд (нарисовать отрезок, перейти к точке и т.п.) и их аргументов в виде координат по осям X,Y, предусмотренных языком разметки SVG в теге path, вставлен путь к файлу на диске.
Это не работает. Браузер не может вставить в себя файл с диска. Вместо этого он сам рисует значок по координатам.
Вам надо открыть ваш d:\Program Data\Vivaldi\Custom\Images\bookmark.svg с помощью блокнота, скопировать оттуда эти команды и координаты видаM70.715,0v512L256,326.715L441.285,512V0H70.715z M411.239,439.462L256,284.224L100.761,439.462V30.046h310.477V439.462z
и вставить в CSS-файл.
/* Закладки */ button.panelbtn.bookmarks svg path { d: path("ВСТАВЛЯТЬ_СЮДА"); }
-
@sedative29rus
Спасибо! -
@sedative29rus
Отлично. Заработало!