Background SVG distinguished posts

Development

AI-generated summary

The discussion is about implementing a background SVG in distinguished posts, similar to Blizzard’s employee posts on their forums. JustinBack initially tried to achieve this with CSS but was unsuccessful.

awesomerobot provided a SCSS solution using the :before pseudo-element to add an SVG background to moderator posts, which JustinBack found interesting and decided to try.

JustinBack also shared his own approaches using both CSS and JavaScript, but they had some issues, such as making the hamburger button unclickable.

After working on the solution, JustinBack posted the final results, which include a modified version of awesomerobot’s SCSS solution with improved box shadows and SVG styling.

1

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.

703Ă—329 120 KB

Now I see that Blizzard uses SVGs for that little background logo

264Ă—119 5.32 KB

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

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>');
  }
}
3

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.

4

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)

borders
borders785Ă—244 29.7 KB

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

768Ă—257 19.2 KB

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 :slight_smile:

Last Edit:
Searching around I have actually found a way to “Auto add Staff color”: By modifying the css (yay!)

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