Updated README

README.md

@@ -1,37 +1,111 @@
-<h1 align="center">
-  Modular Clocks
-</h1>
 
-<h4 align="center">Download Now!</h4>
+<br />
+<div align="center">
+  <a href="https://github.com/Jax-Core/ModularClocks">
+    <img src="https://i.imgur.com/716pCXy.png" alt="Logo" width="200" height="200">
+  </a>
 
-A gallery of hand-crafted rainmeter clocks with built in preview and settings menu. Download rainmeter [here](https://www.rainmeter.net/).
+<h3 align="center">ModularClocks</h3>
+
+  <p align="center">
+    Animated & Modern Clock Styles.
+    <br />
+    <a href="https://www.deviantart.com/jaxoriginals/art/ModularClocks-v2-1-883898019"><strong>More Info »</strong></a>
+    <br />
+    <br />
+    <a href="https://discord.gg/JmgehPSDD6">Report Bugs & Request Features </a>
+  </p>
+</div>
+
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about">About</a>
+    </li>
+    <li>
+      <a href="#Features">Features</a>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+        <li><a href="#setting-up">Styles Setup</a></li>
+      </ul>
+    </li>
+    <li> <a href="#help-and-credits">Help & Credits</a></li>
+
+  </ol>
+</details>
+
+
+## About
+
+![ModularClocks](https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/97bfd084-7ef0-496f-a835-3c41f482d38c/dem902r-659bc44d-7939-4cc8-9eb4-e638bf22c97d.png)
+
+ModularClocks is a Rainmeter skin that includes a gallery of hand-crafted rainmeter clocks, a preview option, and an efficient settings menu.
 
-## Styles Previews
-<img src="https://github.com/EnhancedJax/ModularClocks/blob/main/%40Resources/Images/Preview/Fullscale/Measure.png"/>
-<img src="https://github.com/EnhancedJax/ModularClocks/blob/main/%40Resources/Images/Preview/Fullscale/Text.png"/>
-<img src="https://github.com/EnhancedJax/ModularClocks/blob/main/%40Resources/Images/Preview/Fullscale/Center.png"/>
-<img src="https://github.com/EnhancedJax/ModularClocks/blob/main/%40Resources/Images/Preview/Fullscale/Graph.png"/>
-<img src="https://github.com/EnhancedJax/ModularClocks/blob/main/%40Resources/Images/Preview/Fullscale/Smart.png"/>
 
 ## Features
-- Blur / shadow / color fill
-- Auto-centering
-- Animated clocks
-
-# Installation
-### Requirements
-Rainmeter 4.4 beta or newer: [Download here](https://www.rainmeter.net/)
-
-### Installation Instructions
-1. Install rainmeter
-1. Download the latest release
-1. Open the .rmskin package 
-1. Leave the installation settings default, and press install
-
-**You'll also have to install ImageMagick for the skin to function. Follow [THIS](https://github.com/khanhas/MagickMeter#how-to-install) guide.**
-
-## Contact me
-via Discord: **Jax#1090**
-
-## Special thanks to
-[@khanhas](https://github.com/khanhas) for the MagickMeter plugin
+
+* 5 Clock Presets
+* Animated Styles
+* Resizable Styles 
+
+## Getting Started
+
+### Prerequisites
+
+- **Rainmeter v4.5 or newer.** Rainmeter can be installed by downloading the `.exe` file [from Rainmeter's official website.](https://www.rainmeter.net/)
+- **JaxCore v40005 or newer.** JaxCore can be installed by downloading the `.rmskin` file from [JaxCore's official website.](https://jax-core.github.io/)
+
+### Installation
+
+Assuming you successfully downloaded and installed Rainmeter as well as JaxCore, you can now proceed to install ModularClocks by following the steps below.
+
+1. Download and run the `.rmskin` file for **ModularClocks** from the official [JaxCore site](https://jax-core.github.io/) to install **ModularClocks**.
+2. Leave the installation settings at their defaults and click Install.
+3. When the installation is finished, a startup pop-up should appear. Follow through the pop-up to finish installing **ModularClocks**.
+
+* Note:  If you find that the JaxCore option is red on the startup pop-up, please press the red button and Core will be installed automatically. Perchance this fails, you can manually install Core by downloading the `.rmskin` file from [JaxCore's official website.](https://jax-core.github.io/)
+
+### Setting Up
+
+To use the custom clock styles, you must first install and configure **[ImageMagick](https://github.com/khanhas/MagickMeter).** Follow the instructions below to setup **ImageMagick**.
+
+
+#### Installing ImageMagick:
+
+1. Open **[this link](https://www.imagemagick.org/script/download.php#windows)**. This link will take you to another site where you must locate and download the appropriate installer.
+2. Find a suitable release under **Windows Binary Release** that corresponds to your requirements and download it. The `ImageMagick-7.1.0-19-Q16-HDRI-x64-dll.exe` executable will be used to install for this guide.
+3. After the download is complete, run the installer, which in this case is `ImageMagick-7.1.0-19-Q16-HDRI-x64-dll.exe`.
+4. Leave the installation settings at their defaults and follow through the installation. You can tinker around with the settings **ONLY** if you know what they do.
+5. Open **[this link](https://github.com/khanhas/MagickMeter/releases)** and dowload the latest release of the **MagickMeter** skin. The `magickmeter_0.7.3.rmskin` Rainmeter skin file will be used to install for this guide. 
+6. Leave the installation settings at their defaults and click Install.
+7. Restart Rainmeter and your plugin will be activated.
+
+And that is how you setup **ImageMagick**. You can now proceed to configure the Clock Presets.
+
+* **Note:** An alternate approach for **Step 5** and **Step 6** is:
+  - Download the [plugin DLLs](https://github.com/khanhas/MagickMeter/releases)
+  - Copy the version that corresponds to your system from the zip file (x86 or x64)
+  - Open Run(`Win + R`), type `%appdata%\Rainmeter\Plugins\` and press **OK**.
+  - Manually paste DLL you copied in the second step.
+  - Finally, restart Rainmeter and your plugin will be activated.
+
+#### Choosing Presets:
+Follow the steps outlined below to setup custom clock presets:
+
+1. Open Core and head over to the **Desktop** section.
+2. Select **ModularClocks** from the list and proceed to the **Appearance** tab.
+3. Under **Clock Style** choose a preset that tickles your fancy.
+4. The clock style will be changed if you refresh **ModularClocks** by deactivating and activating the toggle on the bottom left.
+
+* **Note:** The **Render** and **Appearance** tabs allow you to further customize each preset as required.
+
+## Help and Credits
+- MagickMeter and ImageMagick plugins by [khanhas](https://github.com/khanhas)
+- Join the [Core Community Discord Server](https://discord.gg/JmgehPSDD6) for more help.