diff --git a/docs/examples/speechbox.md b/docs/examples/speechbox.md index 3e969d1..874b1d4 100644 --- a/docs/examples/speechbox.md +++ b/docs/examples/speechbox.md @@ -67,3 +67,23 @@ Nothing. (character: 'Lisa', 'assets/lisa.jpg') ``` +### Styling Options + +The generated HTML structure of the speech box element looks something like this: + +```html +
+ +

[Name]

+

[Content]

+
+``` + +The `.say` `
` is also given an attribute `data-character`, that holds the character's name string, for per-character styling. + +Selectors you may want to target: + +- `.say`: the container and outer element. +- `.say img`: the portrait. +- `.say p:first-of-type`: the name text. +- `.say p:last-of-type`: the dialogue content text. \ No newline at end of file