Skip to content

Commit

Permalink
Update speechbox.md
Browse files Browse the repository at this point in the history
added styling options section
  • Loading branch information
ChapelR committed Jan 27, 2020
1 parent dd0dc32 commit 2c8ddaa
Showing 1 changed file with 20 additions and 0 deletions.
20 changes: 20 additions & 0 deletions docs/examples/speechbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div class="say">
<img src="[imageSrc]">
<p>[Name]</p>
<p>[Content]</p>
</div>
```

The `.say` `<div>` 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.

0 comments on commit 2c8ddaa

Please sign in to comment.