Starting adding help-file for user made CSS templates

main.py

@@ -79,6 +79,10 @@ async def logout(request: Request):
     request.session.clear()
     return RedirectResponse(url="/")
 
+@app.get("/help/css")
+async def css_help(request: Request):
+    return templates.TemplateResponse("help_css.html", {"request": request})
+
 @app.get("/overlay/{user_id}")
 async def read_overlay(request: Request, user_id: int, theme_override: str = None, db: Session = Depends(auth.get_db)):
     # This endpoint serves the overlay page.

static/css/main.css

@@ -276,4 +276,16 @@ picture {
     padding: 0.3rem 0.8rem;
     border-radius: 4px;
     cursor: pointer;
+}
+
+/* Styles for help page code examples */
+pre {
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+    border-radius: 6px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: monospace;
+}
 }

templates/dashboard.html

@@ -45,7 +45,10 @@
 </div>
 
 <div class="card">
-    <h2>Custom Themes</h2>
+    <h2>
+        Custom Themes 
+        <a href="/help/css" target="_blank" class="help-link" title="Open CSS guide in new window">(?)</a>
+    </h2>
     <p>Create your own themes with CSS. These are private to your account.</p>
     
     <div id="custom-themes-list">
@@ -72,6 +75,12 @@
 </div>
 
 <style>
+    .help-link {
+        font-size: 0.9rem;
+        vertical-align: middle;
+        text-decoration: none;
+        color: var(--primary-color);
+    }
     .url-box {
         display: flex;
         gap: 10px;

templates/help_css.html

@@ -0,0 +1,46 @@
+{% extends "base.html" %}
+
+{% block title %}CSS Overlay Help - {{ super() }}{% endblock %}
+
+{% block content %}
+<div class="card">
+    <h2>Custom Overlay CSS Guide</h2>
+    <p>This guide will help you create your own custom CSS for the chat overlay. Your CSS is applied on top of a base stylesheet, so you only need to override the styles you want to change.</p>
+</div>
+
+<div class="card">
+    <h3>HTML Structure</h3>
+    <p>Your CSS will be applied to a simple HTML structure. Here are the key classes you can target:</p>
+    <ul>
+        <li><code>.chat-container</code>: The main container holding all messages.</li>
+        <li><code>.chat-message</code>: The container for a single message, including the username and text.</li>
+        <li><code>.username</code>: The part of the message that shows the chatter's name.</li>
+        <li><code>.message-text</code>: The actual content of the chat message.</li>
+    </ul>
+    <p>The <code>body</code> of the overlay is transparent by default, so you only need to style the message elements.</p>
+</div>
+
+<div class="card">
+    <h3>Example: "Bubbly" Theme</h3>
+    <p>Here is a simple example to get you started. This creates chat bubbles with a gradient background.</p>
+    <pre><code>body {
+    font-family: 'Comic Sans MS', cursive, sans-serif;
+    font-size: 18px;
+    text-shadow: 1px 1px 2px #333;
+}
+
+.chat-message {
+    background: linear-gradient(135deg, #7f5af0, #a970ff);
+    color: white;
+    padding: 10px 15px;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    display: inline-block;
+}
+
+.username {
+    font-weight: bold;
+    color: #e0e0e0;
+}</code></pre>
+</div>
+{% endblock %}