Skip to content

Latest commit

 

History

History
296 lines (211 loc) · 12.1 KB

README.md

File metadata and controls

296 lines (211 loc) · 12.1 KB


Pineapple Fried

A customization pack for Zen Browser
Cohesion + Natsumi-Tweaks + Wazz-Tweaks
What is Pinneapple Fried? | Features Included | Installation | FAQ | Acknowledgements

pf.mp4

What is Pineapple Fried?

Pineapple Fried is a pack of customizations (a 'rice') made for Zen Browser.

It integrates new UI styles, personal tweaks, and a compatibility layer for Natsumi Browser


Pineapple Fried has been tested on these versions of Zen:

Build Version Date
Beta 1.0.2-b.5 Dec. 26, 2024
Twilight 1.6t Jan. 05, 2025

Features Included


Cohesion

Cohesion adds an integrated URL style, transparent newtab pages, and a cohesive transparent look to the various bars and panels

Cohesion.mp4


Natsumi-Tweaks

Get the stylish appearance, animations, and features of Natsumi Browser, made compatible with Cohesion with some personal tweaks.

*This is a compatibility layer. It requires Natsumi to already be installed.

image



Wazz-Tweaks

More personal changes with some community additions.

image


Installation

Pineapple Fried and its components are not available on the Zen Mods page, as this isn't intended to be a Mod. You will need to install it by copying the files to your profile's chrome folder. Here's a step-by-step guide to follow:

  1. userChrome.css
  2. userContent.css
  3. Brower Configs (in about:config)
  4. Zen Settings
  5. Toolbar layout
  6. Mods
  7. Browser Transparency
  8. Gradients (optional)
  9. Extensions (optional)

The following guide assumes Natsumi Browser is already installed.


1. userChrome.css

a): If you have not already, follow the Zen Live Editing guide to first make your own chrome folder.

b): Download the "pineapple-fried" folder from above or the Source Code from the releases page and drop it into your "chrome" folder.

c): Add this import statement to userChrome.css (or download the userChrome.css file from above and place it in your "chrome" folder):

@import "pineapple-fried/pineapple-fried.css";

Note

  • Make sure regular Natsumi is imported above Pineapple Fried
  • Remove any of my personal CSS / Cohesion CSS from your userChrome.css file if you have previously used it.
  • It's now all being called via the import statements in your userChrome.css file.
  • You may still add other custom CSS to your userChrome.css underneath the imports.
  • You can Live Edit mod files, just search for the Module name in the Style Browser (Ctrl+Alt+Shift+I)

2. userContent.css

a): The "zen-new-tab" folder should already be inside the "pineapple-fried" folder

b): Add this import statement to "userContent.css" (or download the userContent.css file from above and place it in your "chrome" folder):

/* zen new tabs */
@import "pineapple-fried/zen-new-tabs/zen-new-tabs.css";

3. Browser configs (in about:config)

These are the configs you need to use. If they do not exist, type the config and click the + button to create it.

a): Zen Options

  • browser.tabs.allow_transparent_browser = true*
  • zen.workspaces.show-workspace-indicator = false

Note

*Websites without a background will display the browser UI underneath the content.

Extensions like Dark Reader fix this by setting their own background.

b): Natsumi options

  • natsumi.theme.clip-path-force-polygon: true
  • natsumi.sidebar.blur-zen-sidebar: true
  • natsumi.sidebar.containers-no-inactive-border: true
  • natsumi.sidebar.enable-tab-groups: true*
  • natsumi.sidebar.zen-sidebar-glass-effect: true

4. Zen Settings

a): Look and Feel

  • Select 'Multiple Toolbars'
  • Uncheck 'Show New Tab Button on Tab List'
  • Uncheck 'Show border for the bottom icons'
  • Zen URL bar Behavior = Normal

b): Tab Management

  • Check 'Hide the default container indicator in the tab bar'
  • Check 'Allow workspaces have their own pinned tabs'
  • Check 'Display workspaces as an icon strip'

c): Home

  • Homepage and new windows: Firefox Home (default)
  • New tabs: Firefox Home (default)

5. Toolbar Layout

  • Right click on the Tab Bar and select 'Customize Toolbar'
  • Click and drag items to arrange them in this same order:

image

Account | Bookmark toolbar items | 4x Spacers | Nav buttons | URL Bar | Copy URL button | 4x Spacers


6. Mods


7. Browser Transparency

Windows 11

- Mica For Everyone

  • Download and install from their repo: https://github.com/MicaForEveryone/MicaForEveryone
  • After installing, open and click the '+' button in the bottom left corner
  • Click 'Add Process Rule'
  • Type zen
  • Select zen in the list on the left
  • Style Settings:
    • Titlebar Color: Default
    • Backdrop Type: Mica
    • Corner Mode: Default
  • Advanced:
    • Extend Frame Into Client Area: Off
    • Blur Behind: On

Alternitives

OS Link
Windows 10 DWMBlurGlass
MacOS Set Gradient Contrast to 0 to enable transparency
Linux
- KDE KWin Better Blur
- Gnome Blur My Shell

8. Gradients (optional)

If you like the colors you see in the screenshots above, you can manually copy these gradient settings.

To edit gradient, right click Tab Bar and select Change Theme Color.

image

image

image


9. Extensions (optional)

  • Copy Tab URL Adds the Copy URL button to the URL bar.
  • Proton Pass Is the purple diamond at the far left of the URL bar.
  • Dark Reader Fixes missing backgrounds on websites.

FAQ

"Can I use other userchromes with Pineapple Fried?"

Sure! Just paste it right below the Pineapple Fried loader (userChrome.css) and you can use your own userchrome alongside Pineapple Fried.

"Can I disable individual features?"

You're free to disable loading certain modules (CSS files) if you feel like it. But Natsumi will still need to load config.css, natsumi/preload.css and natsumi/postload.css for things to work.

"Why is userChrome.css so empty?"

Pineapple Fried uses a system where the userChrome.css file acts as a loader that loads the skin, instead of being the file that contains all rules. This way, it's easier for users to quickly enable and disable custom CSS. This system is reffered to as uCL (userChrome Loader).

Troubleshooting

"I don't see any of the Natsumi options in about:config!"

These are custom options which you need to create. Type in the exact name, then press the plus button on the right to create the config.

"Tab groups aren't working!"

Warning

The developer of Zen Browser recommends against using custom CSS to implement Tab Groups like Natsumi's for the time being. Proceed at your own risk.

Set browser.tabs.groups.enabled and natsumi.sidebar.enable-tab-groups to true.

"Something's bugged!"

There may be Zen Mods or userchromes that you're using alongside Pineapple Fried that breaks things. Please disable these then try again.

If the issue still persists, open an issue or report the bug to the developer through Discord.

Acknowledgements

Thank you to: