docs/content/docs/guides/live-editing.mdx

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.
![inspect button](/assets/live-editing/inspect.png)
- **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!