Alright, worked quite a bit on this and these are the final results (Box Shadows will be improved once I figure out how it wont interfere with the buttons)
> **CSS**
>
> ```
> .moderator .regular>.cooked {
> background-color: transparent;
> }
>
> .moderator>article>.row>.topic-body>.contents {
> box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 3px #F99A07, 0 0 0 4px orange, 0 0 10px 4px rgba(244,148,14,0.75);
> }
>
> .topic-post.moderator {
> position: relative;
> &:before {
> content: "";
> position: absolute;
> display: block;
> width: 100px;
> height: 100px;
> transform: rotate(-15deg);
> fill: #F99A07 !important;
> opacity: 0.4;
> background: url('data:image/svg+xml;utf8,
> ');
> }
> }
>
> ```
To surround the staff profile picture with a box only
```
.moderator>article>.row>.topic-avatar>a>img {
box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 3px #F99A07, 0 0 0 4px orange, 0 0 10px 4px rgba(244,148,14,0.75);
}
```
> **CSS | Thinner profile picture border, removed post border and added SVG background color**
>
> ```
> .moderator .regular>.cooked {
> background-color: transparent;
> }
>
> /*.moderator>article>.row>.topic-body>.contents {
> box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 3px #F99A07, 0 0 0 4px orange, 0 0 10px 4px rgba(244,148,14,0.75);
> }*/
>
> .moderator>article>.row>.topic-avatar>a>img {
> box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
> }
>
> .topic-post.moderator {
> position: relative;
> &:before {
> content: "";
> position: absolute;
> display: block;
> width: 100px;
> height: 100px;
> transform: rotate(-15deg);
> opacity: 0.4;
>
> background: url('data:image/svg+xml;utf8,
> ');
> }
> }
>
> ```
This looks awesome in dark mode and this the final-final result. I won’t add any post borders as that was very ugly.
Now I need to look for a method to auto mark as Staff Color 🙂
Last Edit:
Searching around I have actually found a way to “Auto add Staff color”: By modifying the css (yay!)
> [@Questions regarding Staff Color](https://meta.discourse.org/t/questions-regarding-staff-color/79169/3):
>
> @cpradio That seems to make the entire post the same color, along with extending it to the edge of the screen (shown below) Would it be possible to have it only highlight the post itself?
Replace **group-Employee** with your own group!
> **CSS | (Now with comments!)**
>
> ```
> // Let us remove the background color of the post so our logo is clearly visible
> .group-Employee .regular>.cooked {
> background-color: transparent;
> }
>
> // This is the avatar shadow box
> .group-Employee>article>.row>.topic-avatar>a>img {
> box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
> }
>
> // This is the user title color
> .group-Employee>article>.row>.topic-body>.topic-meta-data>.names>.user-title {
> background-color: #4c3319;
> }
>
> // The logo magic
> .topic-post.group-Employee {
> position: relative;
> &:before {
> content: "";
> position: absolute;
> display: block;
> width: 100px;
> height: 100px;
> transform: rotate(-15deg);
> opacity: 0.4;
>
> background: url('data:image/svg+xml;utf8,
> ');
> }
> }
>
> ```
---
_[View the full topic](https://meta.discourse.org/t/background-svg-distinguished-posts/110850)._