mirror of
https://github.com/zen-browser/docs.git
synced 2025-07-07 17:05:34 +02:00
chore: Added 'Live Editing Zen Theme' guide
This commit is contained in:
parent
16bc5c57b1
commit
b1dcd51c00
3 changed files with 66 additions and 8 deletions
33
content/.obsidian/workspace.json
vendored
33
content/.obsidian/workspace.json
vendored
|
@ -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",
|
||||
|
|
BIN
content/assets/live-editing/inspect.png
Normal file
BIN
content/assets/live-editing/inspect.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 519 B |
41
content/guides/live-editing.md
Normal file
41
content/guides/live-editing.md
Normal 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!
|
Loading…
Add table
Add a link
Reference in a new issue