• Browser
  • Mail
  • News
  • Community
  • About
Register Login
HomeBlogsForumThemesSocial

Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    1. Home
    2. Desktop
    3. Customizations & Extensions
    4. Modifications
    5. Window background across the whole window

    Window background across the whole window

    Modifications
    modding css themes
    10
    60
    3494
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • LonML
      LonM Moderator
      last edited by LonM

      Housekeeping
      Here is a related feature request: https://forum.vivaldi.net/topic/26946/stretch-window-background-image-to-the-bookmarks-bar
      (I made a mock-up mod to test it out, and @potmeklecbohdan suggested I share it.)

      Preview
      Here is an image showing the mod in action across various themes
      https://forum.vivaldi.net/assets/uploads/files/1542920468773-2018-11-22_20-58-51.gif

      Installation
      It takes the form of a CSS mod

      
      
      #tabs-container, .toolbar, .inner, #main, .vivaldi-settings .settings-content, .startpage, .startpage .manager,
      .active.internal.visible.webpageview, #webview-container, .color-behind-tabs-on .tab.active .tab-indicator.active {
          background: transparent !important;
      }
      
      .tab.active, .toolbar-addressbar, #switch, #footer,
      .vivaldi-settings, .vivaldi-settings .settings-sidebar, .startpage .manager > div,
      .button-toolbar:hover button, #switch button:hover, .startpage-navigation, .toolbar-statusbar {
          background:  var(--colorBgAlpha) !important;
          background-color:  var(--colorBgAlpha) !important;
      }
      
      .private-intro {
          background: var(--colorBgAlphaHeavy);
      }
      
      
      

      The first two rules define the background image to use. (This one is a bit haphazard, so I might have missed something from one of my other mod files, let me know if it is the case).

      TODOs

      I had previously not shared this as it feels a little unpolished, so if you have any tweaks to suggest that would improve it, please share them.

      Notably: Some borders and button :hovers don't look very nice. And there's a difficult balance to strike between showing the image and maintaining readability of text. For this reason in particular, I haven't extended it to panels.

      Also, in my original post I mentioned Microsoft Acrylic. I never quite managed to achieve that, so if anyone has ideas on how to more closely match it, this would be a good place to share.

      Updates

      • For vivaldi 2.9 - Make it just use the window background image - which is now applied tot he whole window.

      πŸ’» Windows 10 64-bit Sopranos Builds β€’ en-GB β€’ πŸ—³ vote for features β€’ πŸ•΅οΈβ€β™€οΈ Code of Conduct β€’ 🐞 Report bugs

      OrnormO ? D 3 Replies Last reply Reply Quote 11
      • OrnormO
        Ornorm @LonM
        last edited by

        @LonM What would be Vivaldi without you? πŸ€—

        glwebG 1 Reply Last reply Reply Quote 2
        • V
          valiowk
          last edited by valiowk

          Hm, I tried out the mod, and the mod effect shows up correctly for a split second before the Start Page background image area turns white (which is not my Start Page background). Same on the settings pageβ€”the mod effect also shows up correctly for a split second before the settings page background turns white. I also cannot right-click on the Start Page background image area when using the mod. Tested without any mods, so it's not another mod interfering. Looked in console and don't see any messages that seem relevant. I'm using a modified Subtle theme (changed the corner rounding) if that's relevant.

          1 Reply Last reply Reply Quote 0
          • Hadden89H
            Hadden89
            last edited by Hadden89

            @LonM Nice, I did some quick tests and it works fine.
            Cool mod πŸ˜›

            Playground code. (aka known as experiment)
            I'm trying to adapt this for my workjoyflow: vertical tabs.
            It kinda works, but obviously as this force a white text/button on some bars, it also make invisible them on any "pure white" background picture.
            I probably should try some awkard selectors on these. But colorful images are better πŸ˜‰

            #browser.theme-light {
               background: url("../resources/bg.jpg");
               background-size: cover;
            }
            #browser.theme-dark {
               background: url("../resources/bg_alt_7.jpg");
              background-size: cover;
            }
            .bookmark-bar, #tabs-container, .inner, #main, .vivaldi-settings .settings-content, .startpage, .startpage .manager {
               background: transparent !important;
            }
            .bookmark-bar .observer button,
            .bookmark-bar button.chevron {background-color: rgba(0, 0, 0, 0.3);}
            #header, .toolbar-addressbar, .sync-and-trash-container, .newtab {
                 background:  rgba(0, 0, 0, 0.3) !important;
                 background-color: rgba(0, 0, 0, 0.3);
            }
            .stacks-on .tab-strip .tab .tab-group-indicator {
                 background:  rgba(0, 0, 0, 0.3) !important;
                 background-color: rgba(0, 0, 0, 0.3);
            }
            #header, 
            .bookmark-bar .observer .folder,
            .bookmark-bar .observer button {color: rgb(255, 255, 255);}
            .color-behind-tabs-off .bookmark-bar button.chevron,
            .color-behind-tabs-on .bookmark-bar button.chevron,
            .bookmark-bar button.chevron,
            .toolbar-addressbar .toolbar,
            .button-toolbar.toggle-extensions-group  {fill: rgb(255, 255, 255);}
            .tab.active, #switch, #footer, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .startpage .manager > div {
               background:  var(--colorBgAlpha) !important;
               background-color:  var(--colorBgAlpha) !important;
            }
            .tab-position > .tab.active > .tab-header  {
             color: var(--colorFg);
            }
            .tab-position .tab {height: inherit;}
            .private-intro {
              background: var(--colorBgAlphaHeavy);
            }
            

            0_1544215720947_testa.PNG

            Patience is the key to get the Vivaldi Spree | Unsupported Extensions | Github

            1 Reply Last reply Reply Quote 1
            • sjudenimS
              sjudenim
              last edited by

              There is a property in css that might be useful backdrop-filter: blur(10px) , this can be applied to images behind the transparent elements.

              Most browsers now support this by default but Chrome browsers require you to enable this chrome://flags/#enable-experimental-web-platform-features

              https://github.com/sjudenim

              LonML 1 Reply Last reply Reply Quote 2
              • LonML
                LonM Moderator @sjudenim
                last edited by

                @sjudenim This works quite well when there's text on top.

                πŸ’» Windows 10 64-bit Sopranos Builds β€’ en-GB β€’ πŸ—³ vote for features β€’ πŸ•΅οΈβ€β™€οΈ Code of Conduct β€’ 🐞 Report bugs

                1 Reply Last reply Reply Quote 0
                • GoldNowayG
                  GoldNoway
                  last edited by

                  0_1544375174939_2018_12_09_18_04_18_Greenshot.png

                  Doesn't seem to work here unfortunately πŸ˜•

                  LonML 1 Reply Last reply Reply Quote 0
                  • LonML
                    LonM Moderator @GoldNoway
                    last edited by

                    @GoldNoway Ah, that's unfortunate. It looks as though it's failed to load the image resource, so you are left with the default background.

                    πŸ’» Windows 10 64-bit Sopranos Builds β€’ en-GB β€’ πŸ—³ vote for features β€’ πŸ•΅οΈβ€β™€οΈ Code of Conduct β€’ 🐞 Report bugs

                    GoldNowayG 1 Reply Last reply Reply Quote 0
                    • GoldNowayG
                      GoldNoway @LonM
                      last edited by GoldNoway

                      @LonM I think I understood why it didn't work, it's probably my mistake. Thanks πŸ™‚

                      Edit - Unfortunately, no, that doesn't work for me ):

                      1 Reply Last reply Reply Quote 0
                      • glwebG
                        glweb @Ornorm
                        last edited by

                        @Ornorm nothing...

                        1 Reply Last reply Reply Quote 1
                        • ?
                          A Former User
                          last edited by A Former User

                          Does anybody know what to do with start page tiling? Inactive start page is always gray. The code that I added is .mosaic to selector of transparent elements (so at least the active one is transparent now).

                          Edit: removed image

                          ? 1 Reply Last reply Reply Quote 0
                          • ?
                            A Former User
                            last edited by A Former User

                            I created a JS part (to use the image you set as SD background), but it changes the image only when you open new window.
                            If there's something that you would write better, tell me. (My JS knowledge is very low.)

                            Edit: for newer version please see the one further below. This is only for older Vivaldi versions.

                            Here's the code:

                            setTimeout(function wait() {
                                var browser = document.querySelector('#browser');
                                if(browser) {
                                    chrome.storage.local.get({
                                        'STARTPAGE_SHOW_IMAGE': false,
                                        'STARTPAGE_BG_COLOR': '',
                                        'STARTPAGE_BG_COLOR_USER_DEFINED': '',
                                        'STARTPAGE_IMAGE': '',
                                        'STARTPAGE_IMAGE_USER_DEFINED': '',
                                        'STARTPAGE_IMAGE_REPEAT': false,
                                        'STARTPAGE_IMAGE_STRETCH': true
                                    }, function(data) {
                                        var bg = '';
                                        if(data.STARTPAGE_SHOW_IMAGE)
                                            bg = data.STARTPAGE_IMAGE === 'user_defined' ? 'url(\'' + data.STARTPAGE_IMAGE_USER_DEFINED + '\')' : 'url(\'' + data.STARTPAGE_IMAGE + '\')';
                                        else
                                            bg = data.STARTPAGE_BG_COLOR === 'user_defined' ? data.STARTPAGE_BG_COLOR_USER_DEFINED : data.STARTPAGE_BG_COLOR;
                                        browser.style.background = bg;
                                        if(data.STARTPAGE_IMAGE_REPEAT)
                                            browser.style.backgroundRepeat = 'repeat';
                                        else
                                            browser.style.backgroundRepeat = 'no-repeat';
                                        if(data.STARTPAGE_IMAGE_STRETCH)
                                            browser.style.backgroundSize = 'cover';
                                        else
                                            browser.style.backgroundSize = 'auto';
                                    });
                                }
                                else setTimeout(wait, 200);
                            }, 200);
                            

                            Note: You have to disable first few lines in CSS mod

                            (I mean these:)

                            #browser.theme-light {
                                background: url("../resources/bg.jpg");
                                background-size: cover;
                            }
                            
                            #browser.theme-dark {
                                background: url("../resources/bg_alt_7.jpg");
                                background-size: cover;
                            }
                            
                            ? 1 Reply Last reply Reply Quote 1
                            • ?
                              A Former User @A Former User
                              last edited by

                              I updated the mod so now you can use also custom color.

                              1 Reply Last reply Reply Quote 0
                              • ?
                                A Former User
                                last edited by A Former User

                                Update to the JS part (I know, with a big delay, but it is).

                                Could please anybody with Win10 check values of prefs vivaldi.startpage.image.path and vivaldi.startpage.image.path_custom with desktop wallpaper set as SP background? Or maybe also if the file at %vivaldi_app_dir%\resources\vivaldi\prefs_definitions.json contains any path related to it? how to get the image when it's set to desktop wallpaper?

                                setTimeout(function wait() {
                                    var body = document.body;
                                    var head = document.head;
                                    if(body && head) {
                                        function correctPath(path) {
                                            if (path.startsWith('./../') || path.startsWith('../')) {
                                                path = 'chrome-extension://mpognobbkildjkofajifpdfhcoklimli/' + path.slice(path.startsWith('./') ? 5 : 3);
                                            }
                                            return path;
                                        }
                                        var style = document.createElement('style');
                                        style.innerHTML = `
                                            #app {
                                                background-image: var(--startpageBgImage);
                                                background-color: var(--startpageBgColor);
                                                background-size: var(--startpageBgSize);
                                                background-repeat: var(--startpageBgRepeat);
                                            }
                                            #browser {
                                                /*backdrop-filter: blur(3px);*/
                                                background: transparent !important;
                                                background-color: transparent !important;
                                            }
                                        `;
                                        head.appendChild(style);
                                        vivaldi.prefs.get('vivaldi.startpage.background.color', function(bg_color) {
                                            if (!bg_color) bg_color = '#cccccc';
                                            vivaldi.prefs.get('vivaldi.startpage.background.color_custom', function(custom_bg_color) {
                                                if (!custom_bg_color) custom_bg_color = '#bfb8b0';
                                                vivaldi.prefs.get('vivaldi.startpage.image.enable', function(show_img) {
                                                    if (show_img === null) show_img = true;
                                                    vivaldi.prefs.get('vivaldi.startpage.image.path', function(img_path) {
                                                        if (!img_path) img_path = './../resources/bg.jpg';
                                                        img_path = correctPath(img_path);
                                                        vivaldi.prefs.get('vivaldi.startpage.image.path_custom', function(custom_img) {
                                                            if (!custom_img) custom_img = './../resources/bg.jpg';
                                                            custom_img = correctPath(custom_img);
                                                            vivaldi.prefs.get('vivaldi.startpage.image.repeat', function(tile_img) {
                                                                if (tile_img === null) tile_img = false;
                                                                vivaldi.prefs.get('vivaldi.startpage.image.stretch', function(stretch_img) {
                                                                    if (stretch_img === null) stretch_img = true;
                                
                                                                    var final_img_path = 'url(\'' + (img_path === 'user_defined' ? custom_img : img_path) + '\')';
                                                                    var bg_img = show_img ? 'var(--startpageBgForcedImage)' : 'none';
                                                                    var bg_clr = '';
                                                                    bg_clr = bg_color === 'user_defined' ? custom_bg_color : bg_color;
                                                                    if (bg_clr == '') bg_clr = 'var(--colorBg)';
                                                                    body.style.setProperty('--startpageBgImage', bg_img);
                                                                    body.style.setProperty('--startpageBgForcedImage', final_img_path);
                                                                    body.style.setProperty('--startpageBgColor', bg_clr);
                                                                    body.style.setProperty('--startpageBgRepeat', tile_img ? 'repeat' : 'no-repeat');
                                                                    body.style.setProperty('--startpageBgSize', stretch_img ? 'cover' : 'auto');
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                        vivaldi.prefs.onChanged.addListener(function (pref) {
                                            path = pref.path;
                                            value = pref.value;
                                            switch (path) {
                                                case 'vivaldi.startpage.background.color':
                                                    if (!value) value = '#cccccc';
                                                    if (value === 'user_defined')
                                                        vivaldi.prefs.get('vivaldi.startpage.background.color_custom', function (custom_color) {
                                                            if (!custom_color) custom_color = '#bfb8b0';
                                                            body.style.setProperty('--startpageBgColor', custom_color);
                                                        });
                                                    else
                                                        body.style.setProperty('--startpageBgColor', value);
                                                    break;
                                                case 'vivaldi.startpage.background.color_custom':
                                                    if (!value) value = '#bfb8b0';
                                                    vivaldi.prefs.get('vivaldi.startpage.background.color', function (color) {
                                                        if (color === 'user_defined')
                                                            body.style.setProperty('--startpageBgColor', value);
                                                    });
                                                    break;
                                                case 'vivaldi.startpage.image.enable':
                                                    if (value === null) value = true;
                                                    body.style.setProperty('--startpageBgImage', value ? 'var(--startpageBgForcedImage)' : 'none');
                                                    break;
                                                case 'vivaldi.startpage.image.path':
                                                    if (!value) value = './../resources/bg.jpg';
                                                    value = correctPath(value);
                                                    if (value === 'user_defined')
                                                        vivaldi.prefs.get('vivaldi.startpage.image.path_custom', function(cust_path) {
                                                            if (!cust_path) cust_path = './../resources/bg.jpg';
                                                            cust_path = correctPath(cust_path);
                                                            body.style.setProperty('--startpageBgForcedImage', 'url(\'' + cust_path + '\')');
                                                        });
                                                    else
                                                        body.style.setProperty('--startpageBgForcedImage', 'url(\'' + value + '\')');
                                                    break;
                                                case 'vivaldi.startpage.image.path_custom':
                                                    if (!value) value = './../resources/bg.jpg';
                                                    value = correctPath(value);
                                                    vivaldi.prefs.get('vivaldi.startpage.image.path', function (path) {
                                                        if (path === 'user_defined')
                                                            body.style.setProperty('--startpageBgForcedImage', 'url(\'' + value + '\')');
                                                    });
                                                    break;
                                                case 'vivaldi.startpage.image.repeat':
                                                    if (value === null) value = false;
                                                    body.style.setProperty('--startpageBgRepeat', value ? 'repeat' : 'no-repeat');
                                                    break;
                                                case 'vivaldi.startpage.image.stretch':
                                                    if (value === null) value = true;
                                                    body.style.setProperty('--startpageBgSize', value ? 'cover' : 'auto');
                                                    break;
                                            }
                                        });
                                    }
                                    else setTimeout(wait, 200);
                                }, 200);
                                

                                Edited

                                ? 1 Reply Last reply Reply Quote 1
                                • ?
                                  A Former User @A Former User
                                  last edited by

                                  A little update to the last version, now the background changes when you change your settings.

                                  V 1 Reply Last reply Reply Quote 0
                                  • V
                                    valiowk @A Former User
                                    last edited by

                                    @potmeklecbohdan Thanks for the update! I'm encountering two problems with the mod thoughβ€”my speed dial image now turns out blurred (it was clear in previous iterations of this mod). The image is also slightly lower than the position of the speed dial image without the mod (lowered by the height of the tab and address bars: I get the feeling that without the mod, the top-left corner of the speed dial image is at the top-left corner of the window, while with the mod, the top-left corner of the speed dial image is at the top-left corner of the viewport).

                                    ? 1 Reply Last reply Reply Quote 0
                                    • ?
                                      A Former User @valiowk
                                      last edited by

                                      @valiowk The first problem can be solved by commenting/deleting the first line in #browser block in the style.

                                      I'm not sure if I can help with the second one β€” I don't see it. But you can try deleting (or commenting) the #browser block and changing the #app to #browser β€” both again in the style.

                                      1 Reply Last reply Reply Quote 0
                                      • ?
                                        A Former User @A Former User
                                        last edited by

                                        @potmeklecbohdan said in Window background across the whole window:

                                        Does anybody know what to do with start page tiling? Inactive start page is always gray. The code that I added is .mosaic to selector of transparent elements (so at least the active one is transparent now).

                                        Finally fixed (although it can hide some bugs I don't know of)

                                        .webpageview.internal .devtools-container .webpage {
                                            visibility: hidden;
                                        }
                                        
                                        V 1 Reply Last reply Reply Quote 0
                                        • V
                                          valiowk @A Former User
                                          last edited by

                                          @potmeklecbohdan Just upgraded to 2.9 Stable, mod no longer working. I saw here that you said "just needed to apply transparence also to #webview-container" (I think that reply refers to this mod?) but I tried adding

                                          #webview-container {
                                              background: transparent !important;
                                              background-color: transparent !important;
                                          }
                                          

                                          in both the js and the css (separately, not at the same time) and neither seem to fix the mod. Would you mind adding a snippet to clarify what you meant? Thanks!

                                          ? 1 Reply Last reply Reply Quote 0
                                          • ?
                                            A Former User @valiowk
                                            last edited by A Former User

                                            @valiowk I'm not sure how different is my version from the original one. Check also the JS part β€” I changed it to only provide the image without displaying it (useful for more profiles). Combination of these two works.

                                            Just checked and the CSS differs quite much.

                                            1 Reply Last reply Reply Quote 0
                                            • 1
                                            • 2
                                            • 3
                                            • 1 / 3
                                            • First post
                                              Last post

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

                                            Copyright © Vivaldi Technologies™ β€” All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status