Window background across the whole window
-
@sjudenim This works quite well when there's text on top.
-
Doesn't seem to work here unfortunately
-
@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.
-
@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 ):
-
@Ornorm nothing...
-
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
-
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; }
-
I updated the mod so now you can use also custom color.
-
Update to the JS part (I know, with a big delay, but it is).
Could please anybody with Win10 check
values of prefshow to get the image when it's set to desktop wallpaper?vivaldi.startpage.image.path
andvivaldi.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?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
-
A little update to the last version, now the background changes when you change your settings.
-
@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).
-
@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. -
@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; }
-
@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!
-
@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.
-
Thanks for the update, Lon! You seem to have slightly overdone things, though - now the status bar is transparent and any text within is barely readable... (It seems adding
.toolbar-statusbar
to the second block fixes it.) -
@valiowk Good catch! - I had the status bar off when I was testing it.
-
@LonM said in Window background across the whole window:
Notably: Some borders and button :hovers don't look very nice.
Here's an idea to improve borders: I changed
var(--colorBgAlpha)
for some classes tovar(--colorBgAlphaHeavy)
. This makes the contrast between different areas more obvious. For my theme the New Tab and Closed Tabs button hover contrast is sufficient without adding the additional CSS, so I removed it to make the button hover look nicer.Also added
.find-in-page
to the second block.#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; } #switch, #switch button:hover, .vivaldi-settings, .vivaldi-settings .settings-sidebar, .startpage .manager > div, .startpage-navigation, .find-in-page { background: var(--colorBgAlpha) !important; background-color: var(--colorBgAlpha) !important; } .tab.active, .toolbar-addressbar, .toolbar-statusbar, #footer { background: var(--colorBgAlphaHeavy) !important; background-color: var(--colorBgAlphaHeavy) !important; } .private-intro { background: var(--colorBgAlphaHeavy); }
-
Something to keep the image at the correct position when you have it set to your desktop wallpaper (is not expected to work correctly on multi-screen setup):
(function() { function update() { let body = document.body; if (body) { body.style.setProperty('--screenHeight', screen.height); body.style.setProperty('--screenWidth', screen.width); body.style.setProperty('--windowTop', window.screenTop); body.style.setProperty('--windowLeft', window.screenLeft); } setTimeout(update, 1000); } update(); })();
CSS to add:
#app { background-size: calc(var(--screenWidth) * 1px) calc(var(--screenHeight) * 1px); background-position: calc((0 - var(--windowLeft)) * 1px) calc((0 - var(--windowTop)) * 1px); }
-
@LonM said in Window background across the whole window:
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.
Played with it a bit and got this (see spoiler) after looking at the how we designed acrylic image. Sorry, I'm not on W10 and cannot go much closer because I don't have anything βliveβ to compare with.
These three layers can be joined into one
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>M$ Acrylic Test</title> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-image: url(win10_wall.jpg); background-size: contain; } .window { position: absolute; height: 75%; width: 75%; margin: 12.5vh 12.5vw; } .blur { backdrop-filter: blur(20px); } .luminosity { backdrop-filter: brightness(1.1); } .tint { background-color: hsla(0, 0%, 90%, .45); } </style> </head> <body> <div class="window blur"></div> <div class="window luminosity"></div> <div class="window tint"></div> </body> </html>
Edit: the
brightness
should maybe be (also)saturation