Choose a custom profile image
-
Update This method doesn't work anymore in the latest snapshot (2.4.1468.4). If anyone figures out how to make it work, leave a comment.
In the latest snapshot, you can now enable the profile manager.
(If you haven't already enabled it, it's available at
vivaldi://experiments
, only turn it on if you're happy using something experimental)If you want to change your profile icon, you need to visit this page:
chrome://settings/manageProfile
, but you'll notice that unfortunately, there are only a few rather poor images to choose from leading to ugly situations like this:So how do we improve on these?
- First, make your image. Use your favourite image editor to crop and resize an image down to 190x190 px in size, and save it as a PNG.
- Open
chrome://settings/manageProfile
and pick one of the images - it doesn't matter which one for now, but remember your choice
- Open
vivaldi://about
and find your profile path - Open this profile path in your file browser, and go up one step and find a folder called Avatars
-
Close vivaldi
-
Open Avatars
-
Remember the name of the profile image you last selected, e.g. avatar_generic_aqua.png
-
Copy your custom profile image here and overwrite the existing one - i.e. your image that you copied in should now be named avatar_generic_aqua.png
-
Open vivaldi again
And voila! You now how your own custom profile image that looks far better than the default:
Some notes
- Transparent backgrounds apparently don't work - it shows as black sometimes
- As the experimental profile feature gets refined, there will likely be a better way to pick images one day
- Once profile and sync get better integrated I imagine it will probably just use your vivaldi.net profile image
- The broken image might briefly show / flicker when you first start vivaldi
- You can replace all of the icons you want, just click on each selection in
chrome://settings/manageProfile
- In
chrome://settings/manageProfile
, the thumbnail previews won't change
-
I believe Vivaldi is using the Chromium defaults at the moment. I thought about just loading the user avatar for the main profile, because it's already existing in Vivaldi (sync), but the team will hopefully do something about it in the days to come. It's also worth noting that the profile image button/icon in the address bar isn't placed correctly (too far down by a few pixel), at least that's the case on macOS.
What would make sense in the end is that the profile picture for every logged in user is being shown (Vivaldi account) and then you have something generic for the guest accounts. But not sure how this will play out – because I fear hardly any user profile images will look too good in a potentially already colorful UI…
-
So here we go, I'm going down the rabbit hole too early too, but I really can't stand that the profile image button is an image right now and not a regular toolbar button
/* Profile Image */ function profileImage() { const adr = document.querySelector('.toolbar-addressbar.toolbar'); const image = document.querySelector('.profile-image-button'); image.parentNode.style = 'height: 0px; width: 0px;'; image.style = 'visibility: hidden; margin-left: 5px; height: 28px;' const div = document.createElement('div'); div.innerHTML = '<button id="profile-image" class="button-toolbar" tabindex="-1" title="Profile"><svg width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"></path></svg></button>'; adr.insertBefore(div,document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper')); document.getElementById('profile-image').addEventListener('click', function() { image.click(); }); }; setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { profileImage(); } else { setTimeout(wait, 300); } }, 300);
This will result in –
-
-
@potmeklecbohdan Oh, that's the dropdown for the status bar. Since I worked on the new icon for this one I thought I update the other one too. Think I like the down arrow better than the wrench.
https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar
-
@luetage said:
@potmeklecbohdan Oh, that's the dropdown for the status bar. Since I worked on the new icon for this one I thought I update the other one too. Think I like the down arrow better than the wrench.
…… how could I forget that you use this mod?
-
@potmeklecbohdan No idea . It's strange, with chrome extensions you have a relatively exact measurement of active users, with custom modifications I really can't tell. As far as I know I am the only one who uses the status bar as dropdown in the address bar.
-
@luetage This works very well!
For personal preference I think I like the path to use the accent colour (
style="fill:var(--colorAccentBg)"
). -
@LonM hmm, have you found a problem? The fill isn't set in this mod. In my case it uses accent color bg when the accent is on the address bar, and foreground color when the accent color is on window, just like any other button in the address bar. This should be automatic and I went through all my themes and it seems to work. So I'm a bit confused right now, lol.
-
@luetage Not a problem, it works fine as-is.
I just added in my own fill style to the
<path>
so I could customise how it looked a bit further to be more colourful. -
deleted
-
Ok, I went overboard with this, but it had to happen…
The new version will correctly close the dropdown when clicked again and it will also close other extension popouts when triggered. It's complete overkill, but at least it behaves "native" now, which is somewhat soothing/* Profile Image */ function profileImage() { const image = document.querySelector('.profile-image-button'); if (image) { image.parentNode.style = 'height: 0px; width: 0px;'; image.style = 'visibility: hidden; margin-left: 5px; height: 28px;'; const div = document.createElement('div'); div.innerHTML = '<button id="profile-image" class="button-toolbar browserAction-button" tabindex="0" title="Profile"><svg width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"></path></svg></button>'; document.querySelector('.toolbar-addressbar.toolbar').insertBefore(div,document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper')); const imageNew = document.getElementById('profile-image'); imageNew.addEventListener('click', function() { if (image.nextSibling == null) { imageNew.classList.add('ignore-react-onclickoutside','popup-visible'); image.click(); var observer = new MutationObserver(function() { imageNew.classList.remove('ignore-react-onclickoutside','popup-visible'); observer.disconnect(); }); observer.observe(image.parentNode, { childList: true }); } else { imageNew.classList.remove('ignore-react-onclickoutside','popup-visible'); image.click(); } }); } }; setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { profileImage(); } else { setTimeout(wait, 300); } }, 300);
-
Latest version simply changes the profile image for an
svg
. It survives hiding the UI and toggling the address bar thanks to genuine code from @tam710562.// Profile Image // version 2021.9.0 // https://forum.vivaldi.net/topic/34952/choose-a-custom-profile-image/13 // Exchanges the profile image in url bar for a regular svg utilizing Vivaldi's // theme colors. Credits to tam710562 for coming up with a solution to reinstate // the svg when the address bar is being toggled. (function () { function profileImage(image) { image.innerHTML = '<svg width="18" height="18" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1523 1339q-22-155-87.5-257.5t-184.5-118.5q-67 74-159.5 115.5t-195.5 41.5-195.5-41.5-159.5-115.5q-119 16-184.5 118.5t-87.5 257.5q106 150 271 237.5t356 87.5 356-87.5 271-237.5zm-243-699q0-159-112.5-271.5t-271.5-112.5-271.5 112.5-112.5 271.5 112.5 271.5 271.5 112.5 271.5-112.5 112.5-271.5zm512 256q0 182-71 347.5t-190.5 286-285.5 191.5-349 71q-182 0-348-71t-286-191-191-286-71-348 71-348 191-286 286-191 348-71 348 71 286 191 191 286 71 348z"></path></svg>'; const svgImage = document.querySelector(".profile-popup button svg"); svgImage.style.height = "18px"; svgImage.style.width = "18px"; } var appendChild = Element.prototype.appendChild; Element.prototype.appendChild = function () { if (arguments[0].tagName === "BUTTON") { setTimeout( function () { if (this.classList.contains("profile-popup")) { profileImage(arguments[0]); } }.bind(this, arguments[0]) ); } return appendChild.apply(this, arguments); }; })();
-
I have made a silent update to this mod 4 days ago, seems to work out fine so far. The new version survives toggling UI and toggling address bar.
-
@LonM \o/
Just tried to unPAK vivaldi_100_percent.pak and changed one of the avatar PNGs before PAK it again!
It works
Tools used : https://github.com/myfreeer/chrome-pak-customizer
The task will need to be reproduced after all Vivaldi updates, but the tools allow, IMHO, the job to be more automatized (script)
-
can you please add the photo of our supreme leader? thank you.
-
@baris-sehri Who is that? Jon, Kim Jung Un, Trump, Boris?
-
@Pesala ahahahaha now I want this one
-
.profile-popup > button > img {display: none;} .profile-popup > button:after {content: ''; width : 24px; height: 24px; background: url('chrome://theme/IDR_PROFILE_VIVALDI_AVATAR_13'); background-size: cover; background-repeat: no-repeat; border-color: transparent !important; }
Is a CSS mod that can be used to change the image in the toolbar (nowhere else, though), in case you have multiple profiles logged in to the same account and want to differentiate them easily. You would need a separate mod file for each profile.
-