Choose a custom profile image


  • Moderator

    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:

    0_1551039345523_79469044-0333-4437-8bfd-23977986ef65-image.png

    So how do we improve on these?

    1. 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.
    2. Open chrome://settings/manageProfile and pick one of the images - it doesn't matter which one for now, but remember your choice

    0_1551038191884_7d19963e-e07f-4e64-9b95-f039d69848aa-image.png

    1. Open vivaldi://about and find your profile path
    2. Open this profile path in your file browser, and go up one step and find a folder called Avatars

    0_1551038739041_4b7e40bb-5ea1-45e9-bd3c-f22f0fd20174-image.png

    1. Close vivaldi

    2. Open Avatars

    3. Remember the name of the profile image you last selected, e.g. avatar_generic_aqua.png
      0_1551038789825_232a32df-8832-4268-a968-d412867ef007-image.png

    4. 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
      0_1551038973842_23854fd8-9072-4b3a-aa76-013a6a00fcbd-image.png

    5. Open vivaldi again

    And voila! You now how your own custom profile image that looks far better than the default:
    0_1551039382476_f58b85ec-5436-4b58-b436-2d4e57b0c6c6-image.png

    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 rip

    /* 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 –

    0_1551609815965_Screenshot 2019-03-03 11.42.45.png

    0_1551609830418_Screenshot 2019-03-03 11.43.23.png



  • @luetage said:

    0_1551609815965_Screenshot 2019-03-03 11.42.45.png

    0_1551609830418_Screenshot 2019-03-03 11.43.23.png

    What's the button after it? Random theme or you made something another?



  • @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 flirt . 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.


  • Moderator

    @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.


  • Moderator

    @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… spock
    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 wizard

    /* 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.

    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);
    };
    

    Additionally you can put following code into your custom.css file to fix the profile image dropdown gap from top:

    .toolbar-large .button-popup.button-popup-below {
        top: calc(var(--toolbarHeight) + (var(--padding) * 1) + 4px);
    }
    

    edit: var(--toolbarHeight) doesn't seem to exist anymore on latest snapshot, instead you have to find the right top margin for yourself, for me it's just adding 4px to the standard set by Vivaldi, in this case 44px.



  • 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.


  • Moderator

    @LonM \o/

    Just tried to unPAK vivaldi_100_percent.pak and changed one of the avatar PNGs before PAK it again!

    It works custom_avatar.jpg

    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)


  • Ambassador

    can you please add the photo of our supreme leader? thank you.


  • Ambassador

    @baris-sehri Who is that? Jon, Kim Jung Un, Trump, Boris?

    alt text


  • Ambassador

    @Pesala ahahahaha now I want this one


  • Moderator

    .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.


Log in to reply
 

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