【デスクトップ版】ブックマークのフォルダアイコンを変更できるようにしてほしい

cigardred

要望内容：ブックマークのフォルダアイコンを変更できるようにしてほしい。また、難しいのであればせめて色だけでも変更できるようにしてほしい。

要望理由：ブックマークにおいて、フォルダアイコンとフォルダ名の色相が似ているため、識別における利便性と単純な見栄えが悪い。

アイデア画像：
こちらはChromeのレイアウトですが、フォルダが黄色で文字色が黒なので識別が容易です。

一応、Vivaldiのレイアウトは以下の通りです。

quake2moon

こんばんは。
ブックマークの フォルダアイコンの色 を変えてみました。
ウチの方の環境では、ブラウザ上部のブックマークバー、ブックマークパネル、ツール→ブックマーク編集　の三ヶ所が上手く変わりましたが、そちらの環境ではいかがでしょうか？

【ブックマークのフォルダアイコンの色を変える方法】

カスタムCSSにて、以下のコードを書き加えます。

#browser *[data-id="割り当てられている固有の数字"] svg {
   fill: #aa1111;
}

割り当てられている固有の数字 に関しては、開発者モードで該当の個所を探します。

「▾<div class="bookmark-bar default">」
の下層をたどっていくと、各フォルダの羅列だろうと思われる「 ▸<button 」の羅列部分があるかと思います。図の枠で囲った部分にあるような、「data-id="数字"」の中から該当箇所の数字を、上記コード内の 割り当てられている固有の数字 へ記入します。

留意点としては、ブックマークフォルダはキレイに羅列していますが、data-idの数字は連番ではない という事でしょうか。

さて最後に、当方SVGの変更が出来るのかどうか？という部分はよく分かりません
このあたりは、下手にCSSでなんとかしようとしないで、機能として追加してもらった方が良い 気がします。

HongKong3

こんにちわ。

＞【Vivaldi】ツールバーのアイコンを変更するCSS | ナポリタン寿司のPC日記
こちらにあるようなやり方で、カスタムCSSでのSVGアイコン変更は可能ですね。

カスタムCSSという隠し機能使った上で結構力技なので、やっぱり公式で機能として追加もらえるのがベターですねw

ブックマークバーのドロップダウンメニュー内のも。となるとかなり面倒な事になりそうですけど・・・

quake2moon

こんにちは。
なんていうか、SVGには苦手意識を持っています

通常アイコンの変更はVIVALDIの機能として既に搭載されていますが、試しにクイックコマンドのアイコンを他のSVGに変えてみた時の値の一部です。

もう少し小さくしたい、値をいじったら今度は位置が大幅にズレた、今度は微妙に調整しなくちゃ、なんやかんや…で、viewBoxの値もヒドイ事に…

これ、他の方はこんなことなく、すんなり出来てるんですかね～？SVG自体少し特殊なのはわかりますが、せっかくの標準機能なので、ここの要望が実装されるときも、もう少し簡易に設定出来るような機能になればいい な～？なんて思ってます…

quake2moon

余談ではありますが、開発者モードでブックマークフォルダーのSVGのルールをコピーすると、

.bookmark-bar button img, .bookmark-bar button svg ｛
　　　内容
｝

のようになっています。
SVGでもimgでも…って感じなのでしょうか？もしそうなら、後々の為にも色々な追加機能を実装できるような拡張性は備えている（またはその気がある？）と思ってもよさそうではあります…

そんなわけで、気になる要望は積極的にポチって 行きましょう！

nyachu

当方もカスタムCSSを利用してやってみました。

で、出来たのが⇩これです。

cssはこんな感じです。

/* 既定のアイコン画像を非表示 */
#browser #main .bookmark-bar button.folder svg { display: none; }

/* 既定のフォルダーアイコン設定 */
/* 自前のローカルのアイコンはこのCSSがあるフォルダ以下に保存を推奨 */
#browser #main .bookmark-bar button.folder span:before {
  font-size: 16px; /* ←画像のサイズ */
  content: "　"; /* ←全角スペース1個 */
  background-image: url("icons/Folder_16x16.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  margin-right: 2px;
}

/* これ以降：個別フォルダーアイコン設定 */
/* nth-child(N) : 左から数えて N番目 (普通のブックマークもカウントするべし)   */
#browser #main .bookmark-bar button.folder:nth-child(1) span:before { background-image:
/*     ↓ オンラインでファビコン画像を取得するやつ */
  url("https://s2.googleusercontent.com/s2/favicons?domain_url=https://vivaldi.com")
}
#browser #main .bookmark-bar button.folder:nth-child(2) span:before { background-image:
/*     ↓ ローカルファイルならこっち。png,ico,gif(アニメ可)で確認 */
  url("icons/FavoriteStar_FrontFacing_16x16_72.png")
}
#browser #main .bookmark-bar button.folder:nth-child(4) span:before { background-image:
  url("https://s2.googleusercontent.com/s2/favicons?domain_url=https://google.com/")
}

/* マウスホバー時の挙動設定 */
#browser #main .bookmark-bar button.folder:hover {
  border-radius: 5px;
  box-shadow:0px 0px 3px 3px rgba(200,200,200,.2) inset;
}

このCSSとデフォルトのフォルダのアイコンを用意するだけで始められます。

HongKong3

@quake2moon

もう少し小さくしたい、値をいじったら今度は位置が大幅にズレた、今度は微妙に調整しなくちゃ、なんやかんや…で、viewBoxの値もヒドイ事に…

デフォルトアイコンは 28 x 28px 画像内の 16 x 16px 範囲で描かれてますので、SVGというよりその辺の仕様に手こずってるような気がします。
＞カスタムアイコン | Vivaldi Browser Help

~~16 x 16px サイズで目一杯描いた画像なら勝手に中央配置にしてくれますよ。~~
~~SVGならwidth, heightの値を書き換えるだけなのでこういう時に楽です~~

quake2moon

@HongKong3
こんばんは。
SVGのサイズ変更についてこちらに書いてみました。
ヨロシクどうぞ

HongKong3

@quake2moon

16 x 16px サイズで目一杯描いた画像なら勝手に中央配置にしてくれますよ。
SVGならwidth, heightの値を書き換えるだけなのでこういう時に楽です

すいません。よく見たらスタイルで改めてサイズ指定されてるんで まったく効果無い ですね。

普通に画像として扱う時の感覚で書いてました
大分スレの主題とも離れたので続きはソチラで・・・