added sideberry userchrome.css

firefox.md

@@ -31,6 +31,61 @@ Sources: [this](https://www.quippd.com/firefox/wiki/recommended-extensions/), [t
 | Augmented Steam                          | [Repo](https://github.com/IsThereAnyDeal/AugmentedSteam)                          | [AMO](https://addons.mozilla.org/en-US/firefox/addon/augmented-steam/), [Home](https://augmentedsteam.com/)                                                      | This is an "Improved browsing and shopping experience for Steam" that lets you view deals quickly or quickly jump to the steamdb entry                                                                         |
 | LanguageTool                             | **The extension isn't**, [Repo](https://github.com/languagetool-org/languagetool) | [AMO](https://addons.mozilla.org/en-US/firefox/addon/languagetool/), [Home](https://languagetool.org/)                                                           | Ever wanted to write but you just made oh so many errors? This handy tool just fixes them for you                                                                                                              |
 
+### Sideberry
+
+To disable the top `navbar` you should consider using a custom `userChrome.css` like the following:
+
+1. go to [`about:config`](about:config) and set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
+2. enter your FF profile dir using [`about:support`](about:support) and click on "*Profile Folder*" → if you find a file named `prefs.js` and `places.sqlite` you're at the right place
+3. clone the [firefox-csshacks](https://github.com/MrOtherGuy/firefox-csshacks) repo into chrome using the command: `git clone https://github.com/MrOtherGuy/firefox-csshacks.git chrome`
+4. copy the `userChrome_example.css` to `userChrome.css` and configure it to your liking
+
+My file looks like this:
+
+```css
+/* Example userChrome.css file */
+
+/* Import your desired components first */
+
+/*@import url(chrome/tab_close_button_always_on_hover.css);*/
+/*@import url(chrome/tab_loading_progress_throbber.css);*/
+/*@import url(chrome/button_effect_scale_onclick.css);*/
+/*@import url(chrome/blank_page_background.css);*/
+/*@import url(chrome/autohide_menubar.css);*/
+/*@import url(chrome/hide_toolbox_top_bottom_borders.css);*/
+/*@import url(chrome/vertical_context_navigation.css);*/
+/*@import url(chrome/minimal_popup_scrollbars.css);*/
+/*@import url(chrome/button_effect_icon_glow.css);*/
+/*@import url(chrome/dark_context_menus.css);*/
+/*@import url(chrome/dark_additional_windows.css);*/
+/*@import url(chrome/dark_checkboxes_and_radios.css);*/
+/*@import url(chrome/minimal_text_fields.css);*/
+/*@import url(chrome/minimal_toolbarbuttons.css);*/
+/*@import url(chrome/urlbar_centered_text.css);*/
+/* @import url(chrome/autohide_tabstoolbar.css); */
+@import url(chrome/hide_tabs_toolbar_v2.css);
+
+/* Apply your custom modifications after imports */
+
+:root{
+  --toolbar-bgcolor: rgb(36,44,59) !important;
+  --uc-menu-bkgnd: var(--toolbar-bgcolor);
+  --arrowpanel-background: var(--toolbar-bgcolor) !important;
+  --autocomplete-popup-background: var(--toolbar-bgcolor) !important;
+  --uc-menu-disabled: rgb(90,90,90) !important;
+  --lwt-toolbar-field-focus: rgb(36,44,59) !important;
+}
+
+#sidebar-box{ --sidebar-background-color: var(--toolbar-bgcolor) !important; }
+window.sidebar-panel{ --lwt-sidebar-background-color: rgb(36,44,59) !important; }
+```
+
+where you can see that I imported the `chrome/hide_tabs_toolbar_v2.css` file that completly hides the upper `navbar`
+
+> [!TIP] Additonal Information
+> there are way more options, that you can browse trough [here](https://mrotherguy.github.io/firefox-csshacks/)
+
 ## Filterlists
 
 - [Bypass Paywalls Clean filter](https://filterlists.com/lists/bypass-paywalls-clean-filter)
+