Hello,
Just saying beforehand that I am not good in CSS at all.
Blizzard uses discourse for their forums and every employee can distinguish their post with the blizzard logo in the background. I tried to replicate it with CSS but I am not good at that at all.
Now I see that Blizzard uses SVGs for that little background logo
My approach is awful and since I have my logos in SVGs I prefer it that way, how is it possible?
```
.moderator .regular>.cooked {
background-image: url("https://cdn.pixelcatproductions.net/f/p/e6921b3dffa0800c866c0fdab5c03cd73b50211aa47d586feb96fe5c9ae66cdc648685cb4e8a00fd440e05dfbb2dc0bb12c7/TransparentBlackText600x600.png");
padding: 10px;
}
```
---
It looks like their implementation goes beyond simple CSS changes because that SVG is added to the markup, but this should also be possible with CSS alone…
I think this should get you most of the way there
```SCSS
.topic-post.moderator {
position: relative;
&:before {
content: "";
position: absolute;
display: block;
width: 100px;
height: 100px;
background: url('data:image/svg+xml;utf8,
');
}
}
```
---
that is interesting! I didnt know you can add HTML markup to the CSS. I’ll try this now and get back with the results.my JS code worked for a bit but makes hamburger button unclickable
> **My CSS Approach**
>
> ```
> .distinguished-post-wrapper-marking {
> height: 100%;
> width: 100%;
> //Added for when parent has padding
> overflow: hidden;
> position: absolute;
> }
>
> .distinguished-post-marking {
> opacity: 0.5;
> transform: rotate(-15deg);
> fill: #F3910F;
> margin-top: 8px;
> }
>
> ```
> **My JS Approach**
>
> ```
> $( document ).ajaxComplete(function() {
> $('div.group-Employee').each(function(){
>
> if($(this).children('div.distinguished-post-wrapper-marking').length <= 0){
> $(this).prepend('
');
> }
>
> });
> });
>
> ```
Not sure why it bugs out but sometimes wont show the logo in the background either, only on one distinguished post.
---
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,
> ');
> }
> }
>
> ```
