Magz Firefox Customizations

Personal tweaks and edits Magz use for Firefox browser.

For now, includes:

• Custom "new tab" page and "homepage" (using Tabliss add-on and the Custom CSS option)

• Collapsible and "modern" vertical tabs that adapts to most Firefox themes (using Sidebery 5 add-on and Custom CSS)

Screenshots and Demonstration

Screenshots:

Videos:

Demonstration of Tabliss "custome homepage" and Sidebery 5 customization

Showcase1.mp4

Vertical Sidebar Adapting to Different Firefox Themes

showcase2.mp4

Template:

Will see this when first import Tabliss data though:

Installation

• Download this Github Repository as a .zip file

(Click the "Code" button, then "Download .Zip")

• Unzip the file somewhere you'll remember.

The Custom Homepage Tab:

• Install Tabliss add-on. (or test out the web version first).
• Click the cog wheel (settings) on the new Tabliss page, scroll down and click "import" settings.

• Import the "tabliss.json" file. It will be in the .zip file downloaded from the github repository, in the "Tabliss" section.

• This imports the base template with the few custom CSS tweaks and layout.

• On the Tabliss Change the text, the city used for the weather, the links shortcuts, upload images you want for the background, and anything else to suit your needs.

Vertical Tabs SideBar

• Install Sidebery 5 beta from the Github page.

• Approve the add-on installation and give it permission to be enabled during private browsing when it asks (otherwise, won't have visible tabs later on). This can also be turned on in Add-on Manager, by going into "Sidebery" settings and select "Run in Private Windows: allow".

• Type about:config in browser url bar. Search toolkit.legacyUserProfileCustomizations.stylesheets and change to "true", if it wasn't before. This allows for browser profile customization.

  

• Type about:profiles and click the "root directory"s "open folder" button.

  

• Copy-Paste or drag the "chrome" folder in the Firefox tweaks unzipped file, into the root directory folder.

  

• Copy-Paste the "sidebery" folder into the "chrome" folder, or have the "sidebery" folder somewhere that won't get accidentally deleted.

• Right-click the Sidebery Sidebar or the Sidebery add-on icon on the Firefox browser. Click "open settings" or "configure panel".

• In the Sidebery Settings menu, click "help" section, then "import add-on data" and select the "sidebery-data.json" file in the "sidebery" folder from unzipped github folder.

  

• Close Firefox, and open it again for both the Sidebery style settings and the Browser settings to take effect.

Can change general settings of the sidebar in sidebery's settings - like if it's on the left or right

Optionally: Can change the position of the sidebery bar icon on the top menu bar, to be closer to the sidebar by right clicking and choosing "customize toolbar".

Acknowledgements / Credits

Code:

• Firefox Vertical Tabs by ranmaru22. (Used the "userChrome.css" from this, for the upper menu bar tweak and taking off horizontal tab - originally intended to be used with a different sidebar add-on)

• "Yet another Sidebery setup" by a deleted Reddit user. (Used the "userChrome.css" from this - that makes the sidebar collapse when not hovered and so on. Used the sidebery stylesheet as a base for appearance, but heavily edited and changed code - it wasn't fully working 2 years later after all)

• Tabliss's developer - The homepage setup uses the Tabliss add-on

• Sidebery's developer - The sidebar uses the Sidebery add-on

Featured Graphics and themes:

These were used in the demonstration as example images. They are not in the github repository, nor being redistributed as part of customization setup.

Example Background Images by:

• _ Roitz _
• killian Ng
• nymria
• Senbon Umishima
• siun_5513
• sumi
• swdrk_
• lirseven
• zephyo
• Atey Ghailan

Example themes:

• Dark neon.
• Carribean Current.
• Dark.
• Dark Pink (pink).
• Firefox Alpenglow.
• Innovator (Bold).
• Light.
• Lush (Bold).
• Matte Black (pink).
• Rainbow Pastel.
• Stained Glass.

Time:

(For reference: Published July 21, 2023 - using latest Firefox at time, version 115.0.2) (Updated: March 8, 2024 - fixed BrowserCustom.css, for Firefox version 123.0.1)