zen-browser / desktop

🌀 Experience tranquillity while browsing the web without people tracking you!
https://zen-browser.app
Mozilla Public License 2.0
17.32k stars 407 forks source link

Adding a way to cuztomize background of home tab and whole browser #656

Closed Dredragon-Austin closed 2 months ago

Dredragon-Austin commented 2 months ago

What feature would you like to see?

Adding a way to cuztomize background of home tab so that it look good

Other details

here is a example of a tab that I customize image

it does cost me a lot of time to figure that out but hope u can add that to the Zen browser ☺️

The css code i use:

:root { --zen-main-browser-background: none !important; } html#main-window > body { background: url(Omen/Ep8a1_DefianceYoutube\ Cover.png) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: bottom right !important; background-attachment: fixed !important; } .outer-wrapper { background: url(Omen/Ep8a1_DefianceYoutube\ Cover.png) !important; background-repeat: no-repeat !important; background-size: 1366px 768px !important; background-position: bottom right !important; background-attachment: fixed !important; }

DavidGreen63 commented 2 months ago

In all my Firefox browsers, I just used the extension called Stylus, and injected code into the Google home page.

div.L3eUgb {
  background-image: url("xxxxx.jpeg");
  background-repeat: no-repeat;
  background-position: center center; /* was bottom right */
  background-size: cover; /* was contain */
}
div.c93Gbe {
  background:#fff0;
}

So it looks like this in Zen

Clipboard01

dhruvvk2326 commented 2 months ago

@Dredragon-Austin how did you customize your toolbar can you provide the css code or which css code you used . Also which font are you using

JavierFlores09 commented 2 months ago

just use the userContent.css:

@-moz-document url(about:home), url(about:newtab), url(chrome://browser/content/blanktab.html) { 
    body { 
        background-image: url(1175865.jpg) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}
mauro-balades commented 2 months ago

This issue should be discussed further. You can view and continue the discussion here: https://github.com/zen-browser/desktop/discussions/773

~ This is an automatic operation to better enhancements requests organization.