Issues with MediaWiki Infobox CSS

Question

I am quite new to MediaWiki and I have a basic installation. I would like to add this infobox to my wiki:

{| cellspacing="1" cellpadding="1" style="float:right; clear:right; margin: 0 0 .5em 1em; width:280px; background: border-collapse:collapse; border:3.5px solid {{{color|}}}; font-size:smaller; line-height:1.5"
|-
|<div>
{| border="0" cellpadding="4" cellspacing="0" style="float:right; margin:0 0 0 0; width:100%; background:; border-collapse:collapse; vertical-align: middle"
|-
! colspan="2" style="text-align:center; color:#FFFFFF; background:#212121; font-size:150%;" | {{{conflict|<font color="white">{{{conflict|}}}</font>}}}
|- style="text-align:center;"
|-
! colspan="2" style="text-align:center; color:#FFFFFF; background:#212121; font-size:100%;" | {{{partof|<font color="white">Part of {{{partof|}}}</font>}}}
|- style="text-align:center;"
|-
{{#if:{{{image<includeonly>|</includeonly>}}} |
{{!}} colspan="2" style="text-align:center;background-color:#;" {{!}}{{{image}}}
{{!}}-
}}
|- 
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{date|}}}| |display: none;}}" valign="top" | <font size=2>'''Date'''</font>
| style="{{#if:{{{date|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{date|}}}
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{location|}}}| |display: none;}}" valign="top" | <font size=2>'''Location'''</font>
| style="{{#if:{{{location|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{location|}}}
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{result|}}}| |display: none;}}" valign="top" | <font size=2>'''Result'''</font>
| style="{{#if:{{{result|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{result|}}}
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{status|}}}| |display: none;}}" valign="top" | <font size=2>'''Status'''</font>
| style="{{#if:{{{status|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{status|}}}
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;" 
|-
! colspan="2" style="{{#if:{{{hideb|}}}|display: none;| |}} text-align:center; font-weight:normal; color:#FFFFFF; background:#212121;" | '''Belligerents'''
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{left_belligerents|}}}| |display: none;}}" valign="top" | {{{left_belligerents|}}}
| style="{{#if:{{{right_belligerents|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{right_belligerents|}}}
|-
! colspan="2" style="{{#if:{{{hideb|}}}|display: none;| |}} text-align:center; font-weight:normal; color:#FFFFFF; background:#212121;" | '''Commanders and leaders'''
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{left_leadership|}}}| |display: none;}}" valign="top" | {{{left_leadership|}}}
| style="{{#if:{{{right_leadership|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{right_leadership|}}}
|-
! colspan="2" style="{{#if:{{{hideb|}}}|display: none;| |}} text-align:center; font-weight:normal; color:#FFFFFF; background:#212121;" | '''Strength'''
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{left_strength|}}}| |display: none;}}" valign="top" | {{{left_strength|}}}
| style="{{#if:{{{right_strength|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{right_strength|}}}
|-
! colspan="2" style="{{#if:{{{hideb|}}}|display: none;| |}} text-align:center; font-weight:normal; color:#FFFFFF; background:#212121;" | '''Casualties and losses'''
|- style="border-top: 1px solid #999; border-bottom: 1px solid #999;"
| style="{{#if:{{{left_casualties|}}}| |display: none;}}" valign="top" | {{{left_casualties|}}}
| style="{{#if:{{{right_casualties|}}}| |display: none;}}" class="infoboxcell" valign="top" | {{{right_casualties|}}}
|-
<div>
|}
|}
<noinclude>
Example usage:<pre>
{{Infobox conflict
|color=Example
|conflict=Example
|partof=Example
|image=Example
|date=Example
|location=Example
|result=Example
|status=Example
|left_belligerents=Example
|right_belligerents=Example
|left_leadership=Example
|right_leadership=Example
|left_strength=Example
|right_strength=Example
|left_casualties=Example
|right_casualties=Example
}}
</pre>
</noinclude>

However, most of the CSS doesn't get parsed for some reason.

I have enabled the following extensions but it still didn't work. I tried searching for anwsers on the internet but didn't find anything.

wfLoadExtension ( 'TemplateStyles' );
wfLoadExtension( 'Scribunto' );  
$wgScribuntoDefaultEngine = 'luastandalone';
$wgEnableParserHooks = true;

Answer 1

1. You need to enable Parser Funcitons to use {{#if:}}}.
2. Disabling table lines with CSS (display: none) is unusual and I doubt that it is the best practice. I suggest that you wrap the whole table row with {{#if:}}, replacing | with {{!}} and inserting <nowiki /> to guarantee that a new line is not lost in the beginnings and ends of parser function parametres:

{{#if:{{{date|}}}|<nowiki />
{{!}}-
{{!}} {{{date}}}
}}

and

{{#if:{{{left_casualties|}}}{{{right_casualties|}}}|<nowiki />
{{!}}-
! colspan="2" {{!}} Casualties:
{{!}}-
{{!}} {{{left_casualties|}}} {{!}}{{!}} {{{right_casualties|}}}
}}