chore: Added 'Live Editing Zen Theme' guide

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",

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!