A customization pack for Zen Browser
Cohesion + Wazz-Tweaks
What is Pinneapple Fried? | Features Included | Installation | FAQ | Acknowledgements
2025-01-26.23-45-36.mp4
Pineapple Fried is a pack of customizations (a 'rice') made for Zen Browser.
It integrates new UI styles and personal tweaks.
Note
As of Pineapple Fried v2.1.0:
Natsumi-Tweaks (the compatibility layer that added support for some tweaked Natsumi styles and animations) has been removed.
You're welcome to iterate on the last version of natsumi-tweaks from PF v2.0.0 to add compatibility for Natsumi, but I will not be continuing to update it.
Cohesion adds an integrated URL style, transparent newtab pages, and a cohesive transparent look to the various bars and panels
Cohesion.mp4
More personal changes with some community additions.
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:
- userChrome.css
- userContent.css
- Brower Configs (in about:config)
- Zen Settings
- Toolbar layout
- Mods
- Browser Transparency
- Gradients (optional)
- Extensions (optional)
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
- 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)
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";
These are the configs you need to use. If they do not exist, type the config and click the + button to create it.
browser.tabs.allow_transparent_browser=true*zen.urlbar.replace-newtab=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.
pf.use.zen-menu-buttonSet totrueto replace the menu button with the Zen logopf.use.window-buttonsAutohide the Min Max and Close buttons for Multitoolbar mode
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'
c): Home
- Homepage and new windows: Firefox Home (default)
- New tabs: Firefox Home (default)
- Right click on the Tab Bar and select 'Customize Toolbar'
- Click and drag items to arrange them in this same order:
Account | Bookmark toolbar items | Nav buttons | 4x Spacers | URL Bar | 4x Spacers
Nav Buttons | Account | URL Bar
*Bookmark Toolbar Items go back into the normal Bookmark Bar
-
SuperPins Settings:
- 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
zenin the list on the left - Style Settings:
- Titlebar Color:
Default - Backdrop Type:
Mica - Corner Mode:
Default
- Titlebar Color:
- Advanced:
- Extend Frame Into Client Area:
Off - Blur Behind:
On
- Extend Frame Into Client Area:
| OS | Link |
|---|---|
| Windows 10 | DWMBlurGlass |
| MacOS | Adjust Contrast to change transparency |
| Linux | |
| - KDE | KWin Better Blur |
| - Gnome | Blur My Shell |
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.
- 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.
Sure! Just paste it right below the Pineapple Fried loader (userChrome.css) and you can use your own userchrome alongside Pineapple Fried.
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.
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).
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.
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.
Thank you to:
- greeeen-dev for the incredible work in Natsumi Browser
- asev for ZenCss, which served as the base for Natsumi Browser's base CSS for v1
- vicky5124 for the Tab Groups CSS
- mr-cheff and Zen's contributors for creating Zen Browser