- Affected version
- 2.3.3
In XenForo < 2.3 it was easy to use a style property for an image as a background image in LESS:
Using this code does not work in XF 2.3 any longer and requires a quite more complex approach:
While this does work, it isn't straight forward and requires quite a bit of aditional CSS for clients to parse and render.
XenForo already provides
This does not work, so right now,
Suggested Change
Introduce a new style property value type URL, if a property has this type generate
This would allow to actually use such custom properties in LESS pretty similar to how it could be done in XF < 2.3:
Code:
.selector
{
background-image: url(@xf-publicLogoUrl);
}
Using this code does not work in XF 2.3 any longer and requires a quite more complex approach:
I might be missing smth, but it seems like I am unable to figure out how to use an image with variations (like
Smth. like
might work, but that seems pretty complicated (and kinda inefficient) - there must be a simpler way to do this?
publicLogoUrl
) as a background image.Smth. like
Code:
#myid
{
background-image: url({$xf.style.getPropertyVariation('publicLogoUrl', 'default'});
.m-colorScheme(dark {
background-image: url({$xf.style.getPropertyVariation('publicLogoUrl', 'alternate'});
});
}
- Kirby
- Replies: 4
- Forum: Styling and customization questions
While this does work, it isn't straight forward and requires quite a bit of aditional CSS for clients to parse and render.
XenForo already provides
--xf-publicLogoUrl
but as raw text (not even as a string which at least could be used for content()
):
Code:
<html>
<head>Background Image Test</head>
<style>
:root
{
--xf-publicLogoUrl: https://xenforo.com/community/styles/default/xenforo/xenforo-logo.svg;
}
#backgroundImage
{
background-image: url(var(--xf-publicLogoUrl));
}
</style>
</head>
<body>
<div id="backgroundImage">
Test Background Image
</div>
</body>
</html>
This does not work, so right now,
--xf-publicLogoUrl
seems kinda useless.Suggested Change
Introduce a new style property value type URL, if a property has this type generate
--xf-<propertyName>: url(<value>)
; if it has type String make sure the value is escaped.This would allow to actually use such custom properties in LESS pretty similar to how it could be done in XF < 2.3:
Code:
.selector
{
background-image: @xf-publicLogoUrl;
}