Edit webpanel icons

  • Hi.

    Is there a way to change webpanel icons manually?

  • I don't think so. I have been looking for that as well and have been unable to find the option.

    ICYDK, you're also unable to rearrange the web panels' order either, so if you plan to add any web panels, I would suggest you jot down a sketch of the order you want them in beforehand.

  • So, there no file I could edit?
    They have to saved somewhere...

  • Well, from what I understand, they just correspond to the icon of the webpage in question, just like bookmarks.

    And just like bookmarks, you can't edit their icons. Not that I know of anyway.

    On a similar note, I do believe you can change the icon of a SHORTCUT of a bookmark, but not inside the browser. Only if you have the bookmark on your desktop or something like that. But that doesn't solve your problem.

  • That's not entirely true, theoretically you can change them. The webpanels have a class (webviewbtn) and therefore can be altered with css. The image source is the favicon from the website, which could be exchanged. I'm gonna look into it later.

    Edit: and yeah, this thread should probably be moved to the modifications forum board.

  • Yeah, you're way over my head at this point. I don't have enough knowledge to complement your answer. You have a better idea of this than I do.

    Best of luck! 🙂

  • @emilcabaj said in Edit webpanel icons:

    So, there no file I could edit?
    They have to saved somewhere...

    I know nothing about how to edit them, but wrt where they are... --

    Web-Panels & Themes [etc] are stored in Local App Settings\mpognobbkildjkofajifpdfhcoklimli

    "Aronand VIVALDI TEAM
    Hi, Steffie
    Preferences and Local App Settings\mpognobbkildjkofajifpdfhcoklimli: This contains Vivaldi settings and configurations.
    This is also where custom Web Panels are stored afaik

    Or in Linux, that's:
    /home/steffie/.config/vivaldi-snapshot/Default/Local App Settings/mpognobbkildjkofajifpdfhcoklimli

  • I managed to exchange favicons, it's pretty simple. Only problem is if you add another webpanel all favicons seem to reload and then the original is back up. Your custom icon shows up again when you remove and add the webpanel or by doing a simple browser restart. It will work as long as the webpage doesn't change its favicon.

    #switch .webviewbtn img[src="https://tlk.io/images/favicon.png"] {
    padding-top: 16px;
    height: 0px;
    overflow: hidden;
    background-image: url("https://dl.dropboxusercontent.com/u/48974961/favicontest.png");

    First line is the address of the favicon you want to exchange, the padding is the height of your new picture and the background image is the new favicon you create for the site.

    This code can be implemented as custom.css in Vivaldi. You will need to re-add this file to Vivaldi whenever there is an update to the application. Find out more about Vivaldi modifications and how to do this here: https://forum.vivaldi.net/category/52/modifications

    Read the pinned threads first. Good luck.
    Oh yeah, and I'm not very good with css. The code works, but I'm sure there is a better approach to this -- just ask for help over there.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.