• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

dynamic css

Zephyr

Well-known member
#1
Extra.css

<xen:if is="{$xenOptions.XenCrea_Scroll_HeaderActive} AND {$xenOptions.XenCrea_Scroll_ImagePath} != null">
#header
{
@property "header";
background: url('{$XenCrea_Scroll_ImagePath}');
@property "/header";
}
<xen:else />
#header
{
@property "header";
background: none;
@property "/header";
}
</xen:if>


Hello, is it possible to dynamically set an element of a css code please?
 

Chris D

XenForo developer
Staff member
#2
Some conditionals work, some don't.

What I have done before now is used template conditionals in templates to load different CSS.

e.g.

<xen if is="{$xenOptions.something}">
<xen:require css="something.css" />
<xen:else />
<xen:require css="somethingElse.css" />
</xen:if>
 

Zephyr

Well-known member
#3
This is not the problem,
background-image: url('{$xenOptions.XenCrea_Scroll_ImagePath}');

{$xenOptions.XenCrea_Scroll_ImagePath} is not converted/rewrited by the url of image :s
 

Zephyr

Well-known member
#4
It's good :)

#header
{
background-image: url('{$xenOptions.XenCrea_Scroll_ImagePath}') !important;
}

@property "header"; is bug, it must do without.