XF 2.2 How to use if else conditional and database info in css syntax

[FoxSecrets]

I need to change css according to database checkbox value.

What's the best approach to get that?

e.g. (no idea how)

<xf:css>
    <xf:if is="{$item.status} == 1">
        .myclass {
             display: none;
          }
    <xf:else />
         .myclass {
             display: block;
          }
    </xf:if>
</xf:css>

 

[digitalpoint]

You are better off adding a class to the HTML element based on the $item.status checkbox, and then a static CSS rule that sets the display for that class.

CSS is compiled down and intended to be static (same for all users). However, if you must do it dynamically like that, put the <xf:css> inside the <xf:if> statement (but purely from a design standpoint, you are better off having static CSS and applying a class to an HTML element).

<xf:if is="{$item.status} == 1">
    <xf:css>
        .myclass {
             display: none;
          }
    </xf:css>
<xf:else />
    <xf:css>
        .myclass {
            display: block;
          }
    </xf:css>
</xf:if>

TL;DR: don't put conditions inside <xf:css> tags.

 

[FoxSecrets]

Great @digitalpoint , it worked! and thanks for the explanation!!