diff --git a/content/.obsidian/workspace.json b/content/.obsidian/workspace.json index 6418fc1..d66bad0 100644 --- a/content/.obsidian/workspace.json +++ b/content/.obsidian/workspace.json @@ -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", diff --git a/content/assets/live-editing/inspect.png b/content/assets/live-editing/inspect.png new file mode 100644 index 0000000..b0c687f Binary files /dev/null and b/content/assets/live-editing/inspect.png differ diff --git a/content/guides/live-editing.md b/content/guides/live-editing.md new file mode 100644 index 0000000..d54fb58 --- /dev/null +++ b/content/guides/live-editing.md @@ -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!