Background SVG distinguished posts

[JustinBack (Justin René Back)]

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;
}

[awesomerobot (Kris)]

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

.topic-post.moderator {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    background: url('data:image/svg+xml;utf8,
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="100" height="100"><path fill="currentColor" d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"></path></svg>');
  }
}

[JustinBack (Justin René Back)]

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('<div class="distinguished-post-wrapper-marking distinguished-post-wrapper-marking"><img class="distinguished-post-marking distinguished-post-marking" src="https://cdn.pixelcatproductions.net/f/p/b0a106ab1c4e3d6c3b3e6969647d8f3aaf9c6984f739714e4ce04988a8414b83a2713ce7786281d7dc1003142dafe2ee8b96/TransparentBlackText.svg" width="200"></img></div>');
        }
        
    });
});

Not sure why it bugs out but sometimes wont show the logo in the background either, only on one distinguished post.

[JustinBack (Justin René Back)]

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,
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200"><path fill="F99A07" d="M337.06,274.75l46.68-96.89a119.5,119.5,0,0,0-29.49-11.25c-.93,3.76.87,13,1,13.49-14.47-39-45.32-48.69-45.32-48.69-24.11,27.49-15.92,68-15.92,68-4.34-4.34-5.78-19.29-5.78-19.29-106.36-34-145.36,62.84-145.87,64.12,25.08-41.46,68.55-45.67,102-27,24.55,13.71,39.22,39.08,57.39,55.46,6.17,5.55,20.46,13.57,28.39,16.52l4.64-9.63c-3.07-1.18-5.16-6-4.39-18C330.33,261.62,330.76,272.44,337.06,274.75Zm-21.87-125.5s22.67,9.17,26,28.46c0,0-6.62-14.19-24.11-22.19,0,0-10.61,14.47-10.12,30.87C307,186.39,302.65,166.13,315.19,149.25Zm14.95,92.6c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M341.23,177.71s-6.62-14.19-24.11-22.19c0,0-10.61,14.47-10.12,30.87,0,0-4.35-20.26,8.19-37.14C315.19,149.25,337.86,158.42,341.23,177.71Z M330.14,241.85c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M462.77,196c-40-14.3-67.36,6.25-68,6.74l9.63-9.64a86.26,86.26,0,0,0-20.67-15.28l-46.68,96.89c3,1.07,7.22.28,13.34-4.39-.27.32-9.8,11.49-15.68,9.25l-4.64,9.63c2.5.94,4.31,1.44,4.89,1.32,2.41-.48,29.9,1,29.9,1s44.36,8.21,58.84-5.3,6.26-42,6.26-42c-1.87,1.4-11.88,3.26-12.5,3.37C453.61,237.49,462.77,196,462.77,196Zm-97.9,58.83c.23-.4,12.26-20.49,33.27,3.85C397.74,258.47,380.6,247.73,364.87,254.87Zm57.19-16.51c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85.72-.28,19.59-7.46,37.95,1.91C445.77,208,440.51,231.82,422.06,238.36Z M445.77,208s-5.26,23.87-23.71,30.41c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85C408.54,205.76,427.41,198.58,445.77,208Z M398.14,258.72c-.4-.25-17.54-11-33.27-3.85C365.1,254.47,377.13,234.38,398.14,258.72Z M350.4,270.36c-.27.32-9.8,11.49-15.68,9.25-3.07-1.18-5.16-6-4.39-18,0,0,.43,10.82,6.73,13.13C340,275.82,344.28,275,350.4,270.36Z M322.39,293.47c-69-8.66-60-33.37-120-37.15-50.23-3.17-61.86,28.05-64.42,39.39a16.76,16.76,0,0,1-.69-1.72C139.64,192.28,238,208.41,266,245.58,290.44,278,316.25,291,322.39,293.47Z M323.67,294c-14.28-4.64-75,19.27-75,19.27-85.12,26.94-106.88-9-110.72-17.52,2.56-11.34,14.19-42.56,64.42-39.39,60,3.78,51,28.49,120,37.15C323.06,293.74,323.49,293.9,323.67,294Z M439.41,281.44C417.47,368,309.89,379.88,309.89,379.88c-130.78,14.82-166.2-55.07-171.8-68.64,9.55,15,44.09,52.43,150.58,51.28C288.67,362.52,394.38,356.84,439.41,281.44Z M440.1,278.56q-.33,1.45-.69,2.88c-45,75.4-150.74,81.08-150.74,81.08-106.49,1.15-141-36.27-150.58-51.28-.6-1.45-.86-2.26-.86-2.26,17.36,14.47,50.16,36.18,118.64,10.13S362,298.37,362,298.37C425.07,308.79,440.1,278.56,440.1,278.56Z"></path></svg>');
  }
}

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,
<svg fill="%23F99A07" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200"><path fill="F99A07" d="M337.06,274.75l46.68-96.89a119.5,119.5,0,0,0-29.49-11.25c-.93,3.76.87,13,1,13.49-14.47-39-45.32-48.69-45.32-48.69-24.11,27.49-15.92,68-15.92,68-4.34-4.34-5.78-19.29-5.78-19.29-106.36-34-145.36,62.84-145.87,64.12,25.08-41.46,68.55-45.67,102-27,24.55,13.71,39.22,39.08,57.39,55.46,6.17,5.55,20.46,13.57,28.39,16.52l4.64-9.63c-3.07-1.18-5.16-6-4.39-18C330.33,261.62,330.76,272.44,337.06,274.75Zm-21.87-125.5s22.67,9.17,26,28.46c0,0-6.62-14.19-24.11-22.19,0,0-10.61,14.47-10.12,30.87C307,186.39,302.65,166.13,315.19,149.25Zm14.95,92.6c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M341.23,177.71s-6.62-14.19-24.11-22.19c0,0-10.61,14.47-10.12,30.87,0,0-4.35-20.26,8.19-37.14C315.19,149.25,337.86,158.42,341.23,177.71Z M330.14,241.85c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M462.77,196c-40-14.3-67.36,6.25-68,6.74l9.63-9.64a86.26,86.26,0,0,0-20.67-15.28l-46.68,96.89c3,1.07,7.22.28,13.34-4.39-.27.32-9.8,11.49-15.68,9.25l-4.64,9.63c2.5.94,4.31,1.44,4.89,1.32,2.41-.48,29.9,1,29.9,1s44.36,8.21,58.84-5.3,6.26-42,6.26-42c-1.87,1.4-11.88,3.26-12.5,3.37C453.61,237.49,462.77,196,462.77,196Zm-97.9,58.83c.23-.4,12.26-20.49,33.27,3.85C397.74,258.47,380.6,247.73,364.87,254.87Zm57.19-16.51c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85.72-.28,19.59-7.46,37.95,1.91C445.77,208,440.51,231.82,422.06,238.36Z M445.77,208s-5.26,23.87-23.71,30.41c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85C408.54,205.76,427.41,198.58,445.77,208Z M398.14,258.72c-.4-.25-17.54-11-33.27-3.85C365.1,254.47,377.13,234.38,398.14,258.72Z M350.4,270.36c-.27.32-9.8,11.49-15.68,9.25-3.07-1.18-5.16-6-4.39-18,0,0,.43,10.82,6.73,13.13C340,275.82,344.28,275,350.4,270.36Z M322.39,293.47c-69-8.66-60-33.37-120-37.15-50.23-3.17-61.86,28.05-64.42,39.39a16.76,16.76,0,0,1-.69-1.72C139.64,192.28,238,208.41,266,245.58,290.44,278,316.25,291,322.39,293.47Z M323.67,294c-14.28-4.64-75,19.27-75,19.27-85.12,26.94-106.88-9-110.72-17.52,2.56-11.34,14.19-42.56,64.42-39.39,60,3.78,51,28.49,120,37.15C323.06,293.74,323.49,293.9,323.67,294Z M439.41,281.44C417.47,368,309.89,379.88,309.89,379.88c-130.78,14.82-166.2-55.07-171.8-68.64,9.55,15,44.09,52.43,150.58,51.28C288.67,362.52,394.38,356.84,439.41,281.44Z M440.1,278.56q-.33,1.45-.69,2.88c-45,75.4-150.74,81.08-150.74,81.08-106.49,1.15-141-36.27-150.58-51.28-.6-1.45-.86-2.26-.86-2.26,17.36,14.47,50.16,36.18,118.64,10.13S362,298.37,362,298.37C425.07,308.79,440.1,278.56,440.1,278.56Z"></path></svg>');
  }
}

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

@cpradio That seems to make the entire post the same color, along with extending it to the edge of the screen (shown below) [oops] 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,
<svg fill="%23F99A07" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200"><path fill="F99A07" d="M337.06,274.75l46.68-96.89a119.5,119.5,0,0,0-29.49-11.25c-.93,3.76.87,13,1,13.49-14.47-39-45.32-48.69-45.32-48.69-24.11,27.49-15.92,68-15.92,68-4.34-4.34-5.78-19.29-5.78-19.29-106.36-34-145.36,62.84-145.87,64.12,25.08-41.46,68.55-45.67,102-27,24.55,13.71,39.22,39.08,57.39,55.46,6.17,5.55,20.46,13.57,28.39,16.52l4.64-9.63c-3.07-1.18-5.16-6-4.39-18C330.33,261.62,330.76,272.44,337.06,274.75Zm-21.87-125.5s22.67,9.17,26,28.46c0,0-6.62-14.19-24.11-22.19,0,0-10.61,14.47-10.12,30.87C307,186.39,302.65,166.13,315.19,149.25Zm14.95,92.6c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M341.23,177.71s-6.62-14.19-24.11-22.19c0,0-10.61,14.47-10.12,30.87,0,0-4.35-20.26,8.19-37.14C315.19,149.25,337.86,158.42,341.23,177.71Z M330.14,241.85c-6.27-14-23.88-18.81-23.88-18.81C334,222.56,330.14,241.85,330.14,241.85Z M462.77,196c-40-14.3-67.36,6.25-68,6.74l9.63-9.64a86.26,86.26,0,0,0-20.67-15.28l-46.68,96.89c3,1.07,7.22.28,13.34-4.39-.27.32-9.8,11.49-15.68,9.25l-4.64,9.63c2.5.94,4.31,1.44,4.89,1.32,2.41-.48,29.9,1,29.9,1s44.36,8.21,58.84-5.3,6.26-42,6.26-42c-1.87,1.4-11.88,3.26-12.5,3.37C453.61,237.49,462.77,196,462.77,196Zm-97.9,58.83c.23-.4,12.26-20.49,33.27,3.85C397.74,258.47,380.6,247.73,364.87,254.87Zm57.19-16.51c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85.72-.28,19.59-7.46,37.95,1.91C445.77,208,440.51,231.82,422.06,238.36Z M445.77,208s-5.26,23.87-23.71,30.41c.39-.27,13-9.17,17.85-27.47,0,0-16-8-32.09-4.85C408.54,205.76,427.41,198.58,445.77,208Z M398.14,258.72c-.4-.25-17.54-11-33.27-3.85C365.1,254.47,377.13,234.38,398.14,258.72Z M350.4,270.36c-.27.32-9.8,11.49-15.68,9.25-3.07-1.18-5.16-6-4.39-18,0,0,.43,10.82,6.73,13.13C340,275.82,344.28,275,350.4,270.36Z M322.39,293.47c-69-8.66-60-33.37-120-37.15-50.23-3.17-61.86,28.05-64.42,39.39a16.76,16.76,0,0,1-.69-1.72C139.64,192.28,238,208.41,266,245.58,290.44,278,316.25,291,322.39,293.47Z M323.67,294c-14.28-4.64-75,19.27-75,19.27-85.12,26.94-106.88-9-110.72-17.52,2.56-11.34,14.19-42.56,64.42-39.39,60,3.78,51,28.49,120,37.15C323.06,293.74,323.49,293.9,323.67,294Z M439.41,281.44C417.47,368,309.89,379.88,309.89,379.88c-130.78,14.82-166.2-55.07-171.8-68.64,9.55,15,44.09,52.43,150.58,51.28C288.67,362.52,394.38,356.84,439.41,281.44Z M440.1,278.56q-.33,1.45-.69,2.88c-45,75.4-150.74,81.08-150.74,81.08-106.49,1.15-141-36.27-150.58-51.28-.6-1.45-.86-2.26-.86-2.26,17.36,14.47,50.16,36.18,118.64,10.13S362,298.37,362,298.37C425.07,308.79,440.1,278.56,440.1,278.56Z"></path></svg>');
  }
}