Theme unexplainably broke

AI-generated summary

The user darkpixlz reported that their theme unexpectedly stopped working, with the background image and blur effects missing. Don identified that the background image URL was likely invalid or inaccessible, suggesting a change to a more stable image source. After fixing the background, darkpixlz noted that the blur effects were still missing, which Don traced to a removed ::before pseudo-element in the CSS that applied the blur. The user also reported that the reactions panel and other elements were still missing, with darkpixlz linking the issue to a recent change in the theme’s display settings.

Hello,

Out of nowhere at some point today, my theme stopped working properly.

The background is no longer appearing;

and multiple blur elements are not working.


image

I attempted to roll back to a working state but nothing worked. I haven’t updated Discourse either.
Here is the code:

Any help is appreciated.

Hey @darkpixlz ,

It seems to the image is not existing or you don’t have permission to view it.

The background image has a highly generated url or something like that :thinking:

Background image url

https://lh3.googleusercontent.com/wcdZLqI--qjG6q7eLaQAFN7FhBWBxVetqDrFgeSTKwNqIEZDHrlPQDgX3iX74RtH5ctTjWcVQAkYTLDqpxbqvPKJcSq5NbfFIc2xc35xQ1-LmAmw1sRI_kR1mvGMUJno6vkKPOf7IsUcVMb7CPtiwM5aCpKOwngXGyoCQ8cb1FYKfTUKvVWbKFDtfb0Gnt9Jq1kvvVRx--dQd8blq6Q0usqj_kPHQKNhSSCv6zSU1zBtv8-TCl1ITeWTprO-X0tx7zgaqspjK6JNrzvquKo8v7MSoIx3yNRHxTLkqOJWRfyBGKXbqfmZKjUuaBGIXYDkSnpJ80ERAQ20R5r8LWsLrtAdtRELusQz_KStRR0YY6DujJ5aWKFqsirINDUDF2jU17wJrr6vPUHBhhDqJwcAplmFJ7_HK_xzOe16GFTIzrKmZ_zMwxCJA8eXw2V5FMBlwsEW7pZObU60g7nA5qouyYp7_0iC1E_2Kv5PG2xsdhR8DvikEM7Zqp3pmiPgvTyooDFTfsVecXtkeazO4EXZc4QSCn0vdLGAtAup9DjUNn9kFhfYr97wED1jMJuS3TDxq_2cAe02ngpnK1Kga64NZMOACWqli_JPEStqRydaCOyNQrGdHMR444AlRfh6TrwAjr-Ls3Pda2MVsS1k2YjxgUp64tX8vHLkW_Asp2Z0iZX2TFKAsfQpJN2CMDesKnDE0wXTq_lFouk2GD0fHHcIj9WQhSBMt31DGcDwTwMT7ByQck81hI3U-Pt2oJhpSXhAqR2WyCg8pobsb2nPKsfzH2XLRr2kzkShKhvkrHJlgY8X3h6QwjqlHt523wuazvyG7nEGvySYdC7pyBi5Qy_YeTEdhhCC0L7EHgUFCgpgkaN4gF9TIE5UyJXDvpWgsTkNt1opCxEgSkCJO2IAt8qsrejCuAeY9dkXAFGaEE-dWVbXyvVayt96pJof-9GG-HZ1iCggB9GuTSD9MIVDiAEr1_LYJbhkT5bepZyqEsXDFV5PHXRtDQJuu9MgWjDBV4PC1Y6K98-3JdTPR7Wko5hkfBIJgvP49aK6l9WvqVyFCTGpmJ1pcIkTeLiGeiD3nr4ydEqsDXFzaDd4DIXlcFVoux3J=w1092-h728-no?authuser=0


Try to change the image url or maybe better solution :arrow_down_small:

Is change the setting type from this.

Background_Image:
   default: "https://lh3.googleusercontent.com/wcdZLqI--qjG6q7eLaQAFN7FhBWBxVetqDrFgeSTKwNqIEZDHrlPQDgX3iX74RtH5ctTjWcVQAkYTLDqpxbqvPKJcSq5NbfFIc2xc35xQ1-LmAmw1sRI_kR1mvGMUJno6vkKPOf7IsUcVMb7CPtiwM5aCpKOwngXGyoCQ8cb1FYKfTUKvVWbKFDtfb0Gnt9Jq1kvvVRx--dQd8blq6Q0usqj_kPHQKNhSSCv6zSU1zBtv8-TCl1ITeWTprO-X0tx7zgaqspjK6JNrzvquKo8v7MSoIx3yNRHxTLkqOJWRfyBGKXbqfmZKjUuaBGIXYDkSnpJ80ERAQ20R5r8LWsLrtAdtRELusQz_KStRR0YY6DujJ5aWKFqsirINDUDF2jU17wJrr6vPUHBhhDqJwcAplmFJ7_HK_xzOe16GFTIzrKmZ_zMwxCJA8eXw2V5FMBlwsEW7pZObU60g7nA5qouyYp7_0iC1E_2Kv5PG2xsdhR8DvikEM7Zqp3pmiPgvTyooDFTfsVecXtkeazO4EXZc4QSCn0vdLGAtAup9DjUNn9kFhfYr97wED1jMJuS3TDxq_2cAe02ngpnK1Kga64NZMOACWqli_JPEStqRydaCOyNQrGdHMR444AlRfh6TrwAjr-Ls3Pda2MVsS1k2YjxgUp64tX8vHLkW_Asp2Z0iZX2TFKAsfQpJN2CMDesKnDE0wXTq_lFouk2GD0fHHcIj9WQhSBMt31DGcDwTwMT7ByQck81hI3U-Pt2oJhpSXhAqR2WyCg8pobsb2nPKsfzH2XLRr2kzkShKhvkrHJlgY8X3h6QwjqlHt523wuazvyG7nEGvySYdC7pyBi5Qy_YeTEdhhCC0L7EHgUFCgpgkaN4gF9TIE5UyJXDvpWgsTkNt1opCxEgSkCJO2IAt8qsrejCuAeY9dkXAFGaEE-dWVbXyvVayt96pJof-9GG-HZ1iCggB9GuTSD9MIVDiAEr1_LYJbhkT5bepZyqEsXDFV5PHXRtDQJuu9MgWjDBV4PC1Y6K98-3JdTPR7Wko5hkfBIJgvP49aK6l9WvqVyFCTGpmJ1pcIkTeLiGeiD3nr4ydEqsDXFzaDd4DIXlcFVoux3J=w1092-h728-no?authuser=0"
   description: "Link to a background image. WARNING: MUST CONTAIN https:// TO WORK"
   type: string

To upload setting type and you can upload the image.

Background_Image:
  type: upload
  default: ""
  description: "Upload a background image."

Oh an “upload” type setting, nice! :slight_smile:


Weird, I can still see it.

That did the trick for the background image, but why is te blur still missing?


The blur on these elements are missing because it handled with ::before pseudo here:

input[type],
div.ac-wrap,
.popup-menu,
#reply-control.open,
.d-editor-textarea-wrapper {
  background-color: rgba(0, 15, 255, 0.00);
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(2rem);
    backdrop-filter: blur(2rem);      
    z-index: -1;
  }
}

But now it has been removed here. So it removes the blur too. Try remove these three lines.

Thanks.

The textbox returned, but the reactions panel is still missing it, along with some other things.
image


And the reason I added the display is because of this;