diff --git a/docs/index.md b/docs/index.md
index bee134d..8c98c67 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -46,7 +46,7 @@ My Title: 57/100
````
In the `apb` code block, you define the attributes as `Title`: `Value` / `Total`.
-
+
The `percentage` will be automatically calculated based on your `Value` and `Total`.
> Note: the text within the code block example on the settings page will automatically be updated to reflect the changes you make in the other settings.
@@ -57,10 +57,10 @@ To make it more convenient, you can add a hotkey that automatically inserts a pr
1. Open Obsidian and go to the **Settings** by clicking the gear icon in the bottom left corner.
2. From the **Settings** menu, go to the **Hotkeys** section on the left sidebar.
3. In the filter search bar found at the top of the Hotkeys section, start typing **"Advanced Progress Bars"** to find the `Advanced Progress Bars: Paste code block` action.
-
+
5. Click on the round plus button next to the found action, and assign the desired hotkey combination (e.g., `Ctrl + Shift + B` or any other combo that suits you).
-
+
## Copy to Clipboard
Instead of manually typing the code block, or setting up a hotkey, you can use the `Copy to Clipboard` button, found at the top of the `APB` settings page to quickly copy it for later pasting into Obsidian.
@@ -83,13 +83,13 @@ Very Large Total: 2034/2345
````
The above stacked bars example would be rendered like this (using default dark colors & settings)
-
+
> Note: The code block example on the settings page will only include one progress bar. You will need to manually add any additional progress bars once pasted into Obsidian.
## Light & Dark Settings
-
+
These two buttons (`Light` & `Dark`) will change **ALL** the color settings to their respective defaults.
All other settings will remain unchanged.
@@ -97,7 +97,7 @@ All other settings will remain unchanged.
## Progress Bar Settings
### Default Title
-
+
You can use this to setup your default progress bar title.
By clicking the `Reset to Default` button this will change the title back to `Progress`.
@@ -107,10 +107,10 @@ If you change this, the `Title` will be automatically changed in the example cod
This setting is used to set the `total` you want for your default progress bar.
This is does not need to be set to `100` (as in percentage). For example, you could set it to `7` if you are tracking seven subtasks.
-
+
### Progress Percentage
-
+
This slider is used to change the percentage of the demonstration progress bar found near the top of the settings.
It is meant as an aid so you can see how your progress bar will look with different settings.
@@ -122,7 +122,7 @@ If you want to use the example code block's `Copy to Clipboard` feature or a hot
It is recommended that you do this *after* you are happy with all the other settings and no longer need to see the demonstration progress bar.
### Full Width
-
+
If this is toggled `on`, then the entire progress bar will expand to fill the width of its container.
@@ -133,7 +133,7 @@ The new `Width` setting will allow you to enter in a number to fix the width of
This is particularly useful when displaying a progress bar on a full-screen note, as a flexible width without a fixed limit can cause the progress bar to stretch excessively.
### Height
-
+
This slider allows you to set the height of the progress bar from a range of 1 to 15 pixels.
@@ -143,11 +143,11 @@ Pressing the `Reset to Default` button changes this value back to 8 pixels tall.
If this is toggled `on`, then the progress bar (and its background) will have rounded ends.
Toggling it `off` will change them to square ends.
-
+
## Section Mark Settings
### Section Marks
-
+
If this is toggled `on`, the progress bar will automaticlaly have equally spaced vertical markers along its length.
The following table shows how many marks will be displayed depending on the `Number of Colors` setting (located further down on the settings page).
@@ -188,17 +188,17 @@ Pressing the `Reset to Default` button changes this value back to 3 pixels wide.
## Text Settings
There are four pairs of settings which relate to `Title`, `Percentage`, `Fraction` (value/total) and `Completed Text`.
-
+
If you toggle each text item `on`, it will display that particular text on your progress bar (see image above).
The `completed` text will be displayed over the top of the progress bar, and will only be shown when it reaches 100%.
-
+
(as always, you can see what it will look like by viewing the demo progress bar near the top of the settings.).
-
+
Using the accompanying color settings will allow you to pick your desired custom color for each of the four text items.
@@ -207,7 +207,7 @@ Alternatively, you could use one of the `Light` or `Dark` defaults by pressing t
## Override Error Warning v 1.0.6
Typically, when your `Value` exceeds the `Total`, this error will appear to help you identify and correct any mistakes while editing the Value.
-
+
However, there may be instances where you would prefer the ability to exceed 100%, and this is where this setting proves useful.
@@ -217,14 +217,14 @@ Additionally, a second setting will appear, allowing you to customize the color
As usual, there are two defaults `Light` and `Dark` or select a custom color using the colorpicker.
-
+
As shown in the image above, the percentage text changes color and now displays values exceeding 100%.
## Container Settings
Similar to the text settings above, this section includes two pairs of options for customizing the Border and Background of the container.
-
+
## Progress Bar Color Settings
Here, you will find all the available color options for customizing the progress bar.
@@ -249,7 +249,7 @@ In the image below, you'll see another example showcasing how this works with th
As the percentage increases, the entire bar will change to the color you've set for each of the 5 color settings, updating every 20% increment.
-
+
When your progress bar reaches 100%, it will change to the color specified in the `Completed Color` setting.
In this example, you'll also see the `COMPLETED` text, which has been set using the text settings mentioned earlier.
@@ -266,13 +266,13 @@ The `color-mixed linear gradient` smoothly transitions between two colors (setti
In contrast, the `simple linear gradient` always applys the full gradient of colors, but will stretch and squash it depending on the completion percentage of the progress bar.
-
+
In the above image examples, the left gradients are the `color-mixed linear gradient` and the right ones are the `simple linear gradient`.
The `Primary Gradient` is used to set the left color of the gradient, whilst the `Secondary Gradient` is used to set the right color.
-
+
Each has two default buttons for `Light` and `Dark` colors, or you can alternatively use the colorpicker to select any color you wish.
@@ -284,7 +284,7 @@ You can see in the image above, that the bottom completed progress bar is using
This is the color for the remaining portion of the progress bar.
In this example it is a mid blue-grey color.
-
+
## Tasks Settings v 1.0.7
Here, you will find all the available options for customizing the progress bar when using tags to link to tasks.
@@ -305,7 +305,7 @@ My Title#orange: 57/100
```
````
As you can see in the image below, the tag will be displayed as a badge to the left of your `Title`.
-
+
> Note: If there is at least one matching tag in your tasks, APB will automatically find them, and change your `Value/Total` in the code block. You do not need to manually edit the code block once setup.
@@ -335,7 +335,7 @@ The `#orange` progress bar would see 2 linked top level tasks (task 1 and task 3
If you add a tag to your progress bar and it does not match any task tags, you will see an error saying (in this example) `#orange not found`.
-
+
> Note: if you see this error, the progress bar's data may be incorrect and will not update as it is not correctly linked.
@@ -348,7 +348,7 @@ In the `Add Tags to Tasks` example above, you will notice there are 3 top tasks,
This `#banana` tag was ignored by the progress bar which was looking for `#orange` tags.
You can however (if you desire) add a second progress bar, and give it the `#banana` tag so it will track all `#banana` top tasks.
-
+
In the image above, both `#orange` and `#banana` are being tracked automatically.
@@ -382,11 +382,11 @@ If you activate the sub task toggle, APB will keep a count of all subtasks of yo
```
So for the tasks example above, you will see a sub task count for `#banana` that will be 1/3 as there are a total of three sub tasks (or sub-subtasks), one of which is completed.
-
+
As you can see in the image below, if you complete all sub tasks for the specified tag, your text will change color and add the word `COMPLETED` after it.
-
+
> Note: subtasks **do not** require tags themselves, they will be counted according to their top tasks tag.
If you do add tags to subtasks, they will be totally ignored by APB.
@@ -440,6 +440,6 @@ As shown in the example above, the code block omits the closing backticks and be
In earlier versions, this workaround worked, but starting with release `1.0.8`, I have refined it to hide the list bullet for progress bars, resulting in a cleaner, more polished look (see image below).
-
+
Now, you can effortlessly place simple progress bars anywhere in column lists without a list bullet on the left, enhancing visual clarity.