wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-16 11:29:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated docs (#2998)

Browse Source
This commit is contained in:
Wyatt Johnson
2020-06-25 09:21:24 -06:00
committed by GitHub
parent 9f9f5a8a8e
commit e488e878d0
2 changed files with 150 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/source/02-04-css.md
+33 -7
View File
@@ -5,7 +5,7 @@ permalink: /v5/css/
You can add your own stylesheet in **Admin** > **Configure** > **Advanced** > **Custom CSS**.
If you would like to change the styling of any elements of the comment embed, we provide global classnames. Most elements will be tagged with either `.coral` or `.coral-stream`.
If you would like to change the styling of any elements of the comment embed, we provide global classnames. Most elements will be tagged with either `.coral` or `.coral-stream`.
The easiest way to find the classname for the element you're looking for is to use the web inspector, and then update your stylesheet accordingly.
@@ -16,15 +16,41 @@ You can also navigate to https://github.com/coralproject/talk/blob/master/src/co
You can set the class name of the `<body>` tag inside the embed by using the `bodyClassName` parameter when calling `Coral.createStreamEmbed`:
```js
Coral.createStreamEmbed({
bodyClassName: "pink",
});
Coral.createStreamEmbed({
bodyClassName: "pink"
});
```
This will allow your styles to include variations:
```css
.pink button.coral {
background: pink;
}
.pink button.coral {
background: pink;
}
```
### Reaction styling
As of Coral 6.3.0, Coral has support for styling based on the number of
reactions that a given comment has received. It does so via the:
```sh
.coral-reacted-{{ n }}
```
Where `{{ n }}` is the number of reactions the comment has received. You can
invert this when creating CSS to allow you to highlight comments that have at
least `{{ n }}` reactions. For example, if you wanted to add a coral color to
comments with at least 3 reactions, you could write:
```css
.coral-comment .coral-indent {
background-color: coral;
}
.coral-reacted-0 .coral-indent,
.coral-reacted-1 .coral-indent,
.coral-reacted-2 .coral-indent {
background-color: transparent;
}
```