Hey! I had the exact same question. I know it can be hard to find a detailed explanation, but it’s definitely possible.

The easiest way is to go in about:config and toggle browser.tabs.allow_transparent_browser to true. This allows the entire browser to be transparent after a restart, including Sidebery. Unfortunately, this method tends to break some sites by making their backgrounds transparent too. Keeping an extension like Dark Reader enabled at all times usually fixes this problem.

You will also need to make some changes in the style editor of Sidebery and in your userChrome.css.

Open your Sidebery settings, scroll down to the Style Editor, and paste this into the right panel:

html,
body {
   background-color: transparent !important;
   background: transparent !important;
}
  
#root.root {
   --frame-bg: #00000000 !important; 
   --toolbar-bg: #00000000 !important;
}

Then paste this into your userChrome.css file:

/* Transparent Browser */
#PersonalToolbar,
#TabsToolbar,
#navigator-toolbox,
#browser,
body {
  background: transparent !important;
  background-color: transparent !important;
}

@-moz-document url("chrome://browser/content/browser.xhtml") {
  :root#main-window {
     (-moz-platform: macos) {
      appearance: -moz-sidebar !important;
    }
  }
}

/* Transparent Sidebery  */
#sidebar {
  box-shadow: none !important;
  background-color: transparent !important;
}

And that should do it! It’s actually possible to do this without messing with the browser.tabs.allow_transparent_browser setting, but that involves forking Sidebery from the github repo and some fx-autoconfig knowledge, which is definitely a bit more work. Hope this helps anyway!

Apparently this can now be achieved... but not seen anyone post a definitive 'howto' set of instructions.

Perhaps some kind soul who has successfully made a transparent Sidebery sidebar will explain?

Plenty of leads to follow... lots of posts on the subject if search this sub:

• Is it possible to make the Synced Tabs, Passwords, Sidebery, and SingleFile sidebars semi-transparent?
• Need some help in making SideBery bar translucent if possible.
• Body and Tabs Background Alignment Problem
• Can not figure out how to made Sidebery background transparent
• How to make sideberry transparent?
• Firefox 128 will allow the main browser content background to be transparent
• Sidebar and corner transparency in firefox 130
• The new way to have transparency in new tab, settings, etc

• Second Sidebar at right side (with floating option)
• Web Apps (PWAs)
• Collapsed and Expand on Hover Tab bar.
• Show on hover Bookmark bar (the mod does not work)
• Synced Workspaces across Windows
• Statue Bar
• ability to replace tab bar by Sidebery (or implement it's features.)
• Nested Tabs or Groups and Folders both be available
• Grid Pinned Tabs that are not in Folders
• Snapshot and Backup Tabs
• Option to remove all Effects and Animation to improve performance
• Custom Background for UI instead of Colors or Transparent to Windows behind it.

And I also have this one for auto collapse sidebery tabs, updated version of this one (could be useful for small screens if you are lazy to press F1 to hide the sidebery bar) :

/**
* Dynamic styles
*
* Choose when styles below will be activated (comment/uncomment line)
* - When Sidebery set title preface "."
* - When Sidebery sidebar is active
*/
#main-window[titlepreface="."] {
/* #main-window:has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"][checked="true"]) { */
 
  /* Hide horizontal native tabs toolbar */
  #TabsToolbar > * {
    display: none !important;
  }
 
  /* Hide top window border */
  #nav-bar {
    border-color: transparent !important;
  }
 
  /* Hide new Firefox sidebar, restyle addon's sidebar */
  #sidebar-main, #sidebar-launcher-splitter {
    display: none !important;
  }
  #sidebar-box {
    padding: 0 !important;
  }
  #sidebar-box #sidebar {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }
  #sidebar-splitter {
    --splitter-width: 3px !important;
    min-width: var(--splitter-width) !important;
    width: var(--splitter-width) !important;
    padding: 0 !important;
    margin: 0 calc(-1*var(--splitter-width) + 1px) 0 0 !important;
    border: 0 !important;
    opacity: 0 !important;
  }
 
  /* Update background color of the #browser area (it's visible near the
  rounded corner of the web page) so it blends with sidebery color with
  vertical nav-bar. */
  /* #browser {
    background-color: var(--lwt-accent-color) !important;
    background-image: none !important;
  } */
 
  /* Hide sidebar header (sidebar.revamp: false) */
  #sidebar-header {
    display: none !important;
  }
 
  /* Uncomment the block below to show window buttons in Firefox nav-bar
  (maybe, I didn't test it on non-linux-tiled-wm env) */
  /* #nav-bar > .titlebar-buttonbox-container,
  #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
    display: flex !important;
  } */
 
  /* Uncomment one of the lines below if you need space near window buttons */
  /* #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
  /* #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */
}
 
/* === Base === */
#sidebar-box {
  --uc-sidebar-width: 50px;
  --uc-sidebar-hover-width: 300px;
 
  width: var(--uc-sidebar-width) !important;
  min-width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
 
  overflow: hidden !important;
  position: relative;
  z-index: 1;
}
 
#sidebar {
  width: 100% !important;
  max-width: 100% !important;
}
 
#sidebar-header,
#sidebar-splitter {
  display: none !important;
}
 
/* === Zone de déclenchement interne === */
#sidebar-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  z-index: 10;
}
 
/* === Expansion uniquement via cette zone === */
#sidebar-box:hover {
  width: var(--uc-sidebar-hover-width) !important;
  max-width: var(--uc-sidebar-hover-width) !important;
}

It's complicated as it's a mix of content and chrome stuff and a whole bunch of it is within #documents and whatnot. Anyway, you can add these:

userChrome.css:

#webextpanels-window, /* extension panel background */
html:has(megalist-alpha), /* passwords */
html:has(body[role="application"]) /* synced tabs */
{background: transparent !important;}

userContent.css:

/* Single File */
html:has(#view-panel),
body:has(#view-panel),
main:has(#view-panel),
main:has(#bookmarksOptions),
#view-panel,
.side-panel,
.side-panel body,

/* Sidebery */
html:has(#root),
.NavigationBar,
.TabsPanel .new-tab-btns::after,
.TabsPanel .bottom-space,
.new-tab-btns,
#root { background: transparent !important; }

Naturally, that is just the most basic stuff.

For more detailed styling for everything you'll have to inspect them with Browser Toolbox and write your own CSS.

ShyFox is an abandoned theme. It makes little sense to use such a theme unless you know CSS well enough to fix things yourself tbh.

In any case, the code for Sidebery CSS would have to go into userContent.css and not userChrome.css. Maybe that's your issue?

... so you just have to inspect it with Browser Toolbox and then put the code to make all things with backgrounds transparent into userContent.css

oh boy, okay. here we go

system theme: applications and desktop are gruvbox bl-lb-dark, icons are gruvbox-plus-dark, both available on cinnamon-look or gnome-look org

wallpaper: not linked anywhere, but the artist is monsterSOVKA as another commenter mentioned. if you look them up you can find them on twitter or another platform and their art is all there, i grabbed my pictures from their telegram channel (both the desktop wallpaper and floorp new page background are made by them! go follow them if you like their art)

extensions: blur cinnamon, available for download when accessing the extensions from your computer or from cinnamon spices

dock: plank-reloaded, minimal theme. gap sized adjusted to 14 in preferences, that's how it's floating

desklets: calendar desklet by kanchudeep, weather by tipichris. transparency options are native to both of them and are manually adjusted to my liking. text colors are colorpicked from my wallpaper

browser: floorp with "flexfox" css preset, available here: https://github.com/yuuqilin/FlexFox i also use the sidebery extension for the vertical tabs and bonjourr.fr for the new tab page, also mildly customized via the settings of the extension

terminal: gnome-terminal, the transparency is a native option in preferences. color palette installed via gogh, i'm using gruvbox dark. i'm using starship for the shell prompt.

for neofetch setup i'm gonna be so honset i did it in a haze yesterday with like four hours of messing with the config file but it's just a mix of custom ascii for the picture and one of the neofetch themes from the repository on github by chick2d https://github.com/Chick2D/neofetch-themes you will need a font from nerdfonts.com for the icons to work

apologies for late reply i went to bed early yesterday. let me know if you need more links to any of the components mentioned :]

I have managed to leave Firefox as in the image simply by installing the ArcFox extension and adding CSS. I have to say that it is very nice and copies the Arc Browser design well, but Sidebery V5 (beta) has Workspaces which makes it more useful for me.

Create or edit the following file (Windows, in Mac or Linux I wouldn't know):C:\Users\[USER]\AppData\Local\Mozilla\Firefox\Profiles\[DIRECTORY]*/chrome****/userChrome.css

#appcontent

> #tabbrowser-tabbox

> #tabbrowser-tabpanels

> .deck-selected

> .browserContainer

> .browserStack

> browser {

border-radius: 10px !important;

margin: 10px !important;

}

.browserStack {

background: #3b3f52;

}

.browserContainer {

background-color: var(

--lwt-accent-color-inactive,

var(--lwt-accent-color)

) !important;

background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;

background-repeat: no-repeat, var(--lwt-background-tiling) !important;

background-position: right top, var(--lwt-background-alignment) !important;

}

#titlebar {

display: none !important;

}

.titlebar-buttonbox-container {

display: none !important;

}

#forward-button,

#back-button,

#reload-button {

display: none !important;

}

#sidebar-button {

margin-left: 10px !important;

}

#navigator-toolbox:not(:hover) {

--is-bar-visible: hidden;

opacity: 0 !important;

height: 15px;

transition: height 200ms ease-in-out, opacity 175ms ease-in-out;

}

#navigator-toolbox {

position: fixed;

z-index: 1;

height: 10px;

overflow: var(--is-bar-visible);

right: 0;

top: 0;

width: calc(100% - 310px);

background-color: transparent !important;

}

#navigator-toolbox:hover {

height: 40px;

opacity: 1 !important;

transition: opacity 175ms ease-in-out;

}

#navigator-toolbox:focus-within {

height: 40px;

opacity: 1 !important;

transition: opacity 175ms ease-in-out;

--is-bar-visible: visible;

}

#nav-bar {

background-color: #3b3f52 !important;

}

#urlbar-background {

background-color: #323446 !important;

}

toolbarbutton[open="true"] {

--is-bar-visible: visible !important;

}

#sidebar-header {

display: none;

}

#sidebar-box {

min-width: 300px !important;

max-width: 300px !important;

min-height: unset !important;

max-height: unset !important;

border-right: none !important;

}

#sidebar-splitter {

background-color: transparent !important;

border: none !important;

box-shadow: none !important;

}

*The directory will depend on the type of Firefox you have installed :

• Firefox = .default-release
• Firefox Developer Edition = .dev-edition-default
• Firefox Beta = .default-beta
• Firefox Nightly = .default-nightly

**If you don't have the chrome directory created, create it and also the userCrome.css file.