mirror of
https://github.com/zen-browser/docs.git
synced 2025-07-07 17:05:34 +02:00
64 lines
3.1 KiB
Text
64 lines
3.1 KiB
Text
---
|
|
title: Live Editing Zen Theme
|
|
description: Learn how to live edit the appearance of Zen Browser by editing the userChrome.css file.
|
|
---
|
|
|
|
import { Callout } from 'fumadocs-ui/components/callout';
|
|
|
|
This Guide will help you customize the appearance of Zen Browser by live editing the `userChrome.css` file. Follow the steps below to start customizing your browser's theme.
|
|
|
|
## Step 1: Access the Profile Folder
|
|
|
|
<Callout type="warn">
|
|
On the Flatpak version of Zen, the profile folder will be located at `~/.var/app/app.zen_browser.zen/.zen`.
|
|
</Callout>
|
|
|
|
1. Open Zen Browser.
|
|
2. Type `about:support` in the address bar and press Enter.
|
|
3. Look for the **Application Basics** section.
|
|
4. Click on **Open Profile Folder**. This will open the folder where Zen Browser stores your user data.
|
|
|
|
## Step 2: Create the `chrome` Folder
|
|
|
|
1. In the Profile Folder, create a new folder and name it `chrome`.
|
|
2. Inside the `chrome` folder, create a new blank file named `userChrome.css`.
|
|
3. Restart Zen Browser to apply the changes.
|
|
|
|
## Step 3: Open Style Editor in Zen Browser
|
|
|
|
<Callout type="warn" title="How do I enable the Browser Developer Tools?">
|
|
After Zen Browser version `1.0.0-a.31` the Browser Developer Tools is <strong>disabled</strong> by default for security.
|
|
|
|
1. Open the `about:config` page. This page contains advanced settings for the browser.
|
|
2. Search for `devtools.debugger.remote-enabled` and toggle it to `true`.
|
|
3. Search for `devtools.chrome.enabled` and toggle it to `true`.
|
|
</Callout>
|
|
|
|
1. In Zen Browser, press `Ctrl + Shift + Alt + I` to open the Developer Tools.
|
|
2. Navigate to the **Style Editor** tab.
|
|
3. In the filter/search bar, type `userChrome` to locate the `userChrome.css` file you created earlier.
|
|
|
|
## Step 4: Edit the `userChrome.css` File
|
|
|
|
<Callout type="warn">
|
|
If a style does not apply as expected, try adding the `!important` keyword at the end of the CSS rule. This forces the browser to apply the style regardless of any other existing styles.
|
|
</Callout>
|
|
|
|
<Callout type="info" title="Tip">
|
|
If you wish to edit pop-ups or menus that automatically hide, be sure to enable the `Disable Popup Auto-Hide` option from the <em>Browser Toolbox</em> settings menu ( ⋯ button )
|
|
</Callout>
|
|
|
|
1. The `userChrome.css` file should now be visible in the Style Editor.
|
|
2. You can start editing the file directly within the Style Editor.
|
|
|
|
- **Note:** You can use the **Inspect** button to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file.
|
|
3. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
|
|
|
|
Any changes you make to the `userChrome.css` file will be applied immediately to Zen Browser.
|
|
Use this file to customize various UI elements, such as colors, fonts, and the layout.
|
|
|
|
You can use this guide to help you [create your Zen theme and publish it.](/themes-store/themes-marketplace)
|
|
|
|
---
|
|
|
|
This guide is designed to help you quickly and efficiently customize your Zen Browser experience. Happy theming!
|