Custom Web Panel Icons
-
As the title states, the ability to give custom icons to web panels.
As @LonM states, it would also be nice if to set SVG icons, so that the icons are able to change according to the theme.
-
Yes, please, please.
One real life case. Have several Github URLs in Web Panels following issues, news, discussions. Would really like to set URL to pull custom icons for all of them, or to upload custom icon from local HDD. Just to be able to differentiate between all those different things sitting under same domain (github.com).
-
Would also be nice to set SVG icons, that way they can change according to the theme.
-
This is my no1 issue with panels - I have dozen of webapps running on single server but different ports, and they all show the same favicon from the root webapp (on port 80). Sometimes they will show proper favicon, but it later reverts back to root one...
So at least fixing favicons support would be great
-
@messiejoes Try to save all the webpanels as bookmarks, for example make a folder "Web Panels" and save them all in there, you should solve.
-
Would love this too. I'm having an issue where my panel on right has the standard icons and then I've added a Whatsapp and Twitter web panels which have their own of course.
My problem is that I'm using a dark theme and the added web panels have white backgrounds which stick out a lot in almost all black theme. I think it would be kinda easy to fix because the same icons have black backgrounds in my bookmarks panel on top of the browser
-
@vakke I solved it with this line of code:
#switch button.webviewbtn img { background-color: transparent !important; }
-
@potmeklecbohdan How i add this code or where?
-
@spardev
Hi, there is a detailed description > https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1You have to edit one file and add a new with the code from @potmeklecbohdan.
Cheers, mib
-
@mib2berlin Hi! So, i'm really a noob in coding, that forum get a little confuse.
I think a better "noob manual" it is like this:
- Download a Html Editor, like Sublime Text 3 (I tried to edit browser html with a notepad, believe)
- Search Vivaldi, right click, open local paste, if was a shortcute do it again. Go to the strange number (Version build) / resources / Vivaldi- 1 - First make a backup of browser.html (just make a copy in another folder)
- 2 - Go to ... / resources / vivaldi / style and paste this file:
This not from me, and sorry, i don't remenber the autor from this, i get this from one forum i visited from here. This is gona do background become invisible.
Open the browser file on Sublime Text program, and copy the line above, below like this:
Save this, and close and open the browser
There's more codes here: More CSS and JS, but i doesn't know what they do. So, if you are curious, test. And again, i doesn't created this codes and i didn't remenber who created, sorry.
I believe the JS files come below>
Copy this:<script src="bundle.js"></script>
Changing
bundle
for the name of the code you downloaded. And the JS files come at 2.5.1525.40\resources\vivaldi. "2.5...." Is your build number, is one paste above style, the same of browser.htmlI think this is more "Noob Manual" for me and for others Vivaldi users, who like to customize and have a facility to computer, but not understand so much about coding and scripts
Here's a picture:
-
-
Actually, now that Vivaldi already supports icon customization, I think this could be implemented in a similar way to the chained commands icons
(It might be strange to have them inside the theme editor, but then again, I don't understand why the chained commands are there either). -
Said:
when you have multiple panels for the same website having the same favicon makes it difficult to distinguish between one and the other.
Use this code:
.button-toolbar.button-toolbar-webpanel button[title*="Notifications"] .button-icon.favicon {border: 2px red solid !important; border-radius: 4px !important;} .button-toolbar.button-toolbar-webpanel button[title*="Home"] .button-icon.favicon {border: 2px yellow solid !important; border-radius: 4px !important;}
"title*" means contain this text.
Look this post for instructions:
https://forum.vivaldi.net/topic/80446/about-vivaldi-s-most-profound-philosophy/14