Default CSS and modification example

Focuslist-v0-Styling.md

@@ -1 +1,88 @@
-Welcome to the Wiki.
+# Restyling the Focuslist widget
+
+To add the focuslist widget to your stream (after adding the Croccyfocus bot), use the command `!focuslist` in your channel to see your unique browser source link. Then create a new browser source on OBS (or your streaming software of choice), using that link.
+We recommend a browser source width of at least 400 and a height of around 300 to 500 depending on expected usage. The list will scroll if there are too many users to display in the given height.
+
+The resulting widget will show all the hyperfocused users currently active in your stream, and how long they have remaining in their session.
+
+This page describes how to *re-style* this widget so that it visually blends in with your stream layout.
+
+(NB: Unlike most settings, the preview in OBS does *not* update the Custom CSS when you press "Refresh Cache". Thus, when you perform changes to the style as described below, you need to press *OK* to close the settings window and apply the changes.)
+
+To simplify testing while restyling, you can change the `community=n` value in the browser source URL to `community=testing` to display some fake users and hyperfocus sessions! Remember to change it back afterwards though!
+
+## Default Style
+In the source properties for the browser source in OBS, *replace* the contents of the 'Custom CSS' field with the following:
+```css
+body {
+    background-color: rgba(0, 0, 0, 0); 
+    margin: 0px auto; 
+    overflow: hidden;
+
+	--header-border-color: brown;
+	--header-border-width: 2px;
+	--header-border-radius: 10px;
+	--header-height: 60px;
+	--header-font-size: 30px;
+	--header-font-color: white;
+	--header-background-color: #321;
+	--header-padding: 10px;
+
+    --username-max-width: 100%;
+
+	--task-font-size: 25px;
+	--task-font-color: white;
+	--task-background-color: rgba(0, 0, 0, 0.5);
+	--task-border-color: black;
+	--task-border-width: 0px;
+	--task-border-radius: 5px;
+	--task-margin-bottom: 5px;
+	--task-padding: 10px;
+	--task-max-width: 100%;
+
+}
+
+.username {
+  color: pink
+}
+```
+This is the *default style*, and should not change the appearance of the widget when you reload.
+
+<img src="https://git.thewisewolf.dev/HoloTech/hyperfocus-widget/raw/commit/4221b836d04eb6ea9e7f1d147579a2f65f69d337/examples/default.png" height=300 />
+
+
+## Adjusting the style
+
+Each line in the Custom CSS field controls a styling variable for the widget.
+The `header` variables refer to the rounded brown box on top of the list which by default say `!hyperfocused`.
+
+The `task` variables refer to the rows that each user occupies.
+The `color` variable in `username` allows modification of the username colour in those rows.
+
+See https://cssreference.io/property/color/ for a quick guide on the values accepted for the 'color' variables.
+
+Otherwise, I suggest you play around with the values and see what suits your style best!
+
+## An example
+
+Modifying the 'header' part of the CSS as follows results in the below example.
+```css
+	--header-border-color: powderblue;
+	--header-border-width: 4px;
+	--header-border-radius: 20px;
+	--header-height: 60px;
+	--header-font-size: 30px;
+	--header-font-color: brown;
+	--header-background-color: lightpink;
+	--header-padding: 10px;
+```
+
+<img src="https://git.thewisewolf.dev/HoloTech/hyperfocus-widget/raw/commit/4221b836d04eb6ea9e7f1d147579a2f65f69d337/examples/modified-header.png" height=200 />
+
+
+## For advanced users
+If you are comfortable working with CSS and JS (or are feeling adventurous and want to learn), the focuslist widget is opensource and available here: https://git.thewisewolf.dev/HoloTech/hyperfocus-widget
+
+If you download or clone it locally, it should work in exactly the same way as the hosted widget, and you can modify the text, styles, and behaviour to your heart's content.
+
+A new v1 widget will eventually be written, with clearer variable names and a simpler dynamic configuration interface.