Hi

Very new to this and I am sure this is something simple. I've uploaded a resource, and in the theme editor using custom CSS I have added the following:

.ipsHeader__primary {

background-color: transparent;

background-image: url('{resource="custom/Banner Image.JPG" app="core" location="front"}');

width: 100%;

background-position: center bottom;

background-size: cover;

background-repeat: no-repeat;

}

However it does nothing - the file address is the address in the resource above the 'Use this tag in templates to insert this resource'.

Any help would be welcome! Also - how do you change the images in grid view?

Thanks

 

Hi, I've just come acrosss this myself. I think it might be a bug. I assume you are using IC5 from the CSS class name?

The code that is generated in Manage Resources won't work when you use it in CSS templates, it appears as empty quotes when you inspect the source code.

That bug has been fixed for the next update. If you add your code to the front end Custom CSS area (in the Theme Editor), it'll work correctly.

Awesome, thanks @Ehren

Confirmed this workaround works!

Edited June 9, 2025Jun 9 by The Old Man

This workaround has its hazards!

On 6/9/2025 at 5:19 AM, Ehren said:

That bug has been fixed for the next update. If you add your code to the front end Custom CSS area (in the Theme Editor), it'll work correctly.

Hi @Ehren

I just wanted to double check this is definitely fixed in the next release, as I couldn’t see a bug in the tracker for it. It is so vital that we can parse PHP in the CSS and JS templates in the back-end Theme Designer Mode Settings.

Many thanks!

Graham

Yep. I reported this issue to the devs on May 16 and Esther fixed it on May 22, ready for 5.0.9.

Fantastic, thanks Ehren!

I don't think this has been fully fixed after all.

I upgraded from v5.0.8 to v5.0.9 then I moved my custom CSS back to the AdminCP Theme Settings CSS template, and whilst the PHP is now being correctly parsed inside the CSS template (to control what gets output in the generated CSS), the CSS image resources are still not appearing inside the generated CSS.

The CSS excerpt:

background-image: url( '{resource="custom/moonlight-night-horror-full-moon-703553-2000.webp" app="core" location="front"}' );