diff --git a/README.md b/README.md index 9f80cbb..d700d95 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,34 @@ -# RDJ-Viewer-themes +# RadioDJ Viewer Themes +A collection of custom CSS themes for the RadioDJ Viewer web interface. These themes are designed to transform the standard "Now Playing" display into stylized stream overlays, such as Minecraft-style toast notifications. + +## 🚀 How to Use (Recommended Method) + +Because of modern browser security and CORS restrictions, the most reliable way to use these themes in OBS is to copy the code directly into your Browser Source. + +### Step 1: Get the Theme Code +1. Open the folder for the theme you want (e.g., `css/minecraft/`). +2. Click on the `.css` file. +3. Click the **Raw** button in the Gitea interface. +4. Select all the text (`Ctrl + A`) and copy it (`Ctrl + C`). + +### Step 2: Configure OBS +1. Right-click your **RadioDJ Viewer** Browser Source in OBS and select **Properties**. +2. Set the **Width** to `600` and the **Height** to `200`. +3. Scroll down to the **Custom CSS** box. +4. Delete any existing text and **Paste** your copied code. +5. Click **OK**. + +--- + +## 🛠️ Optimization Tips + +### Fixing Blurry Text +If you are using a stylized or pixel-art font and it appears blurry in OBS, add this snippet to the very top of your Custom CSS box: + +```css +* { + image-rendering: pixelated; + -webkit-font-smoothing: none; + font-smooth: never; +} \ No newline at end of file