#Transparent New Tab v2 (Integrated URL style)

30 messages · Page 1 of 1 (latest)

edgy oar
#
  • Set 'New Tab' to 'Blank Page' in Zen Settings
  • Set 'browser.tabs.allow_transparent_browser' to 'true' in 'about:config'
  • Install Dark Reader to auto set backgrounds on sites that don't have one already
  • Install Drop Shadow mod: https://zen-browser.app/mods/abc2d6d8-ea9c-4313-a99c-fb1e76e8b3e5
  • Copy css into your userChrome.css file
@media not (-moz-bool-pref:"zen.view.compact"){
  #browser {
    &:has(#navigator-toolbox[zen-expanded="true"]) {
      &:not(:has(.zen-split-view-splitter)) {
        --urlbar-min-width: 28px !important;

        #nav-bar {
          --zen-toolbar-height: 36px;

          background-color: rgba(0, 0, 0, 0.2) !important;
          border-radius: 10px 10px 0px 0px !important;
          padding-left: 6px !important;
          margin-right: 6px !important;
          margin-top: 6px !important;
          margin-left: 1px;
        }

        .browserContainer {
          border-radius: 0px 0px 10px 10px !important;
          
        &:not([urlbar-exceeds-toolbar-bounds]) {
            backdrop-filter: blur(10px) saturate(1.5);
          }  
        }
        
        .browserSidebarContainer {
          background-color: rgba(0, 0, 0, 0.12) !important;
        } 
      }
    }
  }
}```

*Not compatible with custom homepages like Bonjourr or Tabliss*

*The following mods break the cohesive appearance of the integrated URL style and it's recommended to disable them:*
- Cleaned URL bar
- Sleek Borders
image.png image.png
Drop Shadow

Adds a drop shadow to the website's browser panel.

#

Shout out to @kind bison for the integrated URL design #css-mods message

marsh stag
#

@edgy oar how did u put the folders and those shortcuts i supose those are in the left top of the screen they look really good

edgy oar
marsh stag
#

Oh ok

#

thanks

kind bison
#

Cool!

#

Creative use of gradients

placid talon
#

This looks really cool!

placid talon
edgy oar
placid talon
#

Aight

marsh stag
marsh stag
#

i figured it out nvm

steel iron
#

Hi, can I ask you how did you move essentials to the bottom? I really love it! Is there eny userChrom.css or something?

inner wharf
#

i have done something like this but i used custom css in bonjour to make the site transparent but i still have things like time.

rich cradle
edgy oar
rich cradle
#

Will you upload it to the store?

edgy oar
#

I'm not sure it's the right kind of package for the mod store, it still requires some manual steps to achieve the cohesive look, like installing additional mods and changing about:config settings.

rich cradle
#

I think users are able and willing to do it with a good description.

edgy oar
#

Which is why I outline all the needed steps in my github and in this thread.

Official Mods are more complete packages that don't require extra setup by the user, just configuration in the settings. I will try to submit, but I doubt it will pass checks. @raven jetty Is my logic correct here? I don't want to submit something that users will have to glue together.

raven jetty
#

right now it's not possible to modify single pages using the mods

edgy oar
#

ty

raven jetty
#

when the theme is downloaded it is wrapped into a @ moz-document directive to only modify the user browser interface

#

it is one of the things I want to work on

#

along with mod synchro, however, my time is limited and right now it's pretty much consumed by my job

rich cradle
edgy oar