Custom folder icon.

[darkj2k]

Any chance to have custom folder icon? The search engine can be customized icon but folder can not. Thanks in advance.

[YoshifumiFuyuno]

Hi.

If you are using popup Custom CSS is available. (add-on options -> "Popup/icons look")
Example of changing the Shop folder:

li[data-name="Shop"] > * > .icon {
  background: url("data:image/png;base64,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") no-repeat 0%/contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
li[data-name="Shop"] > * > .icon > img:first-of-type {
  display: none;
}

Example of changing all folders (Not yet available in Firefox):

li:has(> .spc-eFolder) > * > .icon {
  background: url("data:image/png;base64,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") no-repeat 0%/contain;
  width: var(--icon-size);
  height: var(--icon-size);
}
li:has(> .spc-eFolder) > * > .icon > img:first-of-type {
  display: none;
}

For context menus it is currently not possible to change it.
I want to be able to change it in the next version or Manifest V3 version.

Best regards

[darkj2k]

Thanks for your reply and guideline. I just follow your first example and paste it to custom CSS box. It works but as you see the custom folder icon was overlapping with default folder icon. How can I fix it? Thanks in advance.

[YoshifumiFuyuno]

thanks for the screenshot.
"display: none;" does not seem to be working.
Have you entered the following statements correctly?

li[data-name="Shop"] > * > .icon > img:first-of-type {
  display: none;
}

[darkj2k]

I just did it right. But the first icon in folder still showing and overlap in foreground. How can I fix it?

[YoshifumiFuyuno]

Hi.

To delete only the Shop folder:

li[data-name="Shop"] .iconInFolder {
	display: none;
}

To delete all:

.iconInFolder {
	display: none;
}

---

I submitted a version that added a folder icon change function.
Mozilla and Microsoft reviews may take up to 7 business days.

[darkj2k]

Thanks for update. I take some time to making some search folder icons and it looks great.

But as you see, the name in popup folder is black and looks like no option to change it. Do you have any suggestion?

Also, how to set it to show name as default? Need double clicks the folder to show name currently. Thanks for your great support. :-)

[YoshifumiFuyuno]

Hi.

The text color of the engine name can be changed with the following Custom CSS.

.spc-engines .name {
  color: red;
}

To display the name by default, you can change it from the following setting.
add-on options -> "Popup/icons look" -> "Popup Style"

Incidentally, the following Custom CSS can be used to hide the top-level engine name.

.spc-engines.s-iconAndName {
  --name-width: 0px;
}

Best regards

[darkj2k]

So wonderful. Select "Icon and Name" in Popup Style then use your code to hiding the top-level engine name. This is what I need. No need for displaying top-level engine name because icon is enough. But folder need to be identified by name especially for same search engine with different search function. Such as MusicBrainZ, it can be searched by artist, release group or series. With name displayed I can easily select the one I want,

BTW, can I disable the popup info of search name? And how to move the search name a little bit of right? It too close the icon. Thanks. :-)

[YoshifumiFuyuno]

Hi.

• If you want to exclude MusicBrainz in the top level engine with forward matching.

.spc-engines.s-iconAndName > :not(li[data-name^="MusicBrainz"]) {
  --name-width: 0px;
}

The matching method can be changed with attribute selector.
https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors

• Hide Tooltip

.spc-engines li::before {
  display: none;
}

• Shift to the right

.name {
  margin-left: calc(var(--name-width) / 20);
}

By dividing like this, you can only add margin if the engine name is shown.
In the example, 100/20, i.e. 5px will be set as margin.
You can also use padding-left.

[darkj2k]

Thanks for your codes. It's really helpful.

[YoshifumiFuyuno]

It’s my pleasure.