chore: Added 'Live Editing Zen Theme' guide

This commit is contained in:
Jafeth Garro 2024-08-23 09:26:30 -06:00
parent 16bc5c57b1
commit b1dcd51c00
3 changed files with 66 additions and 8 deletions

View file

@ -13,13 +13,26 @@
"state": {
"type": "markdown",
"state": {
"file": "faq.md",
"file": "guides/index.md",
"mode": "preview",
"source": true
}
}
},
{
"id": "42952bec6b18e374",
"type": "leaf",
"state": {
"type": "markdown",
"state": {
"file": "guides/live-editing.md",
"mode": "preview",
"source": true
}
}
}
]
],
"currentTab": 1
}
],
"direction": "vertical"
@ -85,7 +98,7 @@
"state": {
"type": "backlink",
"state": {
"file": "faq.md",
"file": "guides/live-editing.md",
"collapseAll": false,
"extraContext": false,
"sortOrder": "alphabetical",
@ -102,7 +115,7 @@
"state": {
"type": "outgoing-link",
"state": {
"file": "faq.md",
"file": "guides/live-editing.md",
"linksCollapsed": false,
"unlinkedCollapsed": true
}
@ -125,7 +138,7 @@
"state": {
"type": "outline",
"state": {
"file": "faq.md"
"file": "guides/live-editing.md"
}
}
}
@ -146,15 +159,19 @@
"command-palette:Open command palette": false
}
},
"active": "c48eb70606bbaae4",
"active": "fe7bf5045f52d84c",
"lastOpenFiles": [
"assets/live-editing",
"assets/live-editing/inspect.png",
"assets/image (3).png",
"guides/index.md",
"guides/live-editing.md",
"faq.md",
"guides/manage-profiles.md",
"guides/install-macos.md",
"faq.md",
"assets/macos-installation-guide/gatekeeper.png",
"assets/macos-installation-guide/open-dmg.png",
"index.md",
"guides/index.md",
"assets/macos-installation-guide/broken-menu.png",
"assets/macos-installation-guide/Screenshot from 2024-08-20 22-41-07.png",
"assets/macos-installation-guide/broken menu.png",

Binary file not shown.

After

Width:  |  Height:  |  Size: 519 B

View file

@ -0,0 +1,41 @@
---
title: Live Editing Zen Theme
---
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
1. Open Zen Browser.
2. Type `about:profiles` in the address bar and press Enter.
3. Look for the **Profile you want to save your theme** .
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`.
## Step 3: Open Style Editor in Zen Browser
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
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 ![[inspect.png]] 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.
1. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`.
> [!tip]
> 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.
> [!Notes]
>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 layout.
---
This guide is designed to help you quickly and efficiently customize your Zen Browser experience. Happy theming!