Search code examples
cssemailsmarty

Inline css not being applied/used in smarty template for sending mail

I work on the website archi-wiki,org, we have a weekly mail and I'm doing the css for it. Unfortunatly, we use smarty template for this mail and I haven't found a way to use css other than inline css. The problem I face is that some of the css properties I have written doesn't get used. In the following template code, it concerns the properties justify-content:space-between; flex-wrap:wrap; from the div id="container" and the properties flex-direction: column; align-items:center; from the a id="image".

<!DOCTYPE HTML>
<html lang="{$wiki.lang}">
    <head>
        <meta charset="UTF-8" />
        <title>{$title}</title>

    </head>
    <body style='margin:0px auto; background-color:#fafafa; font-family: "Open Sans",Helvetica,Roboto,Arial,sans-serif; font-weight: normal; color: #34414a;width:fit-content;'>
        <a href="{$wiki.url}" target="_blank"><img src="{$wiki.url}skins/archi-wiki/resources/img/logo_archi_wiki.png" alt="Archi-Wiki Logo" height="80"/></a>
        <p> Bonjour,</p>
        <p>{$intro}</p>
        <p>
            Voici les pages qui ont été créées ou modifiées cette semaine sur <a href="{$wiki.url}" target="_blank" style="color: #a65447">{$wiki.name}</a>.
        </p>
        {foreach $changeLists as $namespace=>$recentChanges}
            {foreach $recentChanges as $groupName=>$group}
                {if $groupName != '*'}
                    <h3 style="margin-left:0em; width:max-content; border-bottom: 2px solid #d96e5d;">{$groupName}</h3>
                {else if $namespace != null}
                    <h3 style="margin-left:0em; width:max-content; border-bottom: 2px solid #d96e5d;">{$namespace}s</h3>
                {/if}
                <div ïd="container" style="display:flex; max-height:min-content; justify-content:space-between; flex-wrap:wrap;">
                    <div>
                        {if isset($group.new)}
                            <h4 style="margin-left:1.5em; width:max-content; border-bottom: 1px dotted #d96e5d;">Nouvelles pages&nbsp;:</h4>
                            <ul>
                                {foreach $group.new as $change}
                                    <li><a href="{$wiki.url}{$change.title|escape:url}" target="_blank" style="color: #a65447;">{$change.shortTitle|replace:($namespace|cat:':'):''}{if isset($change.quartier)} ({$change.quartier}){/if}</a>  {$val=$change.newlen-$change.oldlen} {if $val>500} <span style="color: #006400; font-weight: bold;">({$val} nouveaux caractères)</span> {elseif $val > 1} <span style="color: #006400;">({$val} nouveau caractère)</span> {elseif $val > -1} <span style="color: black;">({$val|replace:'-':''} nouveau caractère)</span> {elseif $val > -2} <span style="color: black;">({$val|replace:'-':''} caractère supprimé)</span> {elseif $val > -500} <span style="color: #8b0000;">({$val|replace:'-':''} caractères supprimés)</span> {else} <span style="color: #8b0000; font-weight: bold;">({$val|replace:'-':''} caractères supprimés)</span> {/if}</li>
                                {/foreach}
                            </ul>
                        {/if}
                        {if isset($group.edit)}
                            <h4 style="margin-left:1.5em; width:max-content; border-bottom: 1px dotted #d96e5d;">Pages modifiées&nbsp;:</h4>
                            <ul>
                                {foreach $group.edit as $change}
                                    <li><a href="{$wiki.url}{$change.title|escape:url}" target="_blank" style="color: #a65447;">{$change.shortTitle|replace:($namespace|cat:':'):''}{if isset($change.quartier)} ({$change.quartier}){/if}</a>  {$val=$change.newlen-$change.oldlen} {if $val>500} <span style="color: #006400; font-weight: bold;">({$val} nouveaux caractères)</span> {elseif $val > 1} <span style="color: #006400;">({$val} nouveau caractère)</span> {elseif $val > -1} <span style="color: black;">({$val|replace:'-':''} nouveau caractère)</span> {elseif $val > -2} <span style="color: black;">({$val|replace:'-':''} caractère supprimé)</span> {elseif $val > -500} <span style="color: #8b0000;">({$val|replace:'-':''} caractères supprimés)</span> {else} <span style="color: #8b0000; font-weight: bold;">({$val|replace:'-':''} caractères supprimés)</span> {/if}</li>
                                {/foreach}
                            </ul>
                        {/if}
                    </div>
                    {if isset({$group.biggestChange})}<a id="image" href="{$wiki.url}{$group.biggestChange|escape:url}" style="color:#34414a; text-decoration: none; display:flex; flex-direction: column; align-items:center;"><img src="{$group.image}" height="250px"/><p style="margin:0px">{$group.biggestChange}</p></a>{/if}
                </div>
            {/foreach}
        {/foreach}
        <p>Pour ne plus recevoir les alertes mail, il vous suffit de vous connecter à votre profil <a href="{$wiki.url}Spécial:Préférences" target="_blank">{$wiki.name}</a>.</p>
</body>

Here's some code from the resulting mail :

...
<div style="display:flex;max-height:min-content">
  <div>
    <h4 style="margin-left:1.5em;width:max-content;border-bottom:1px dotted #d96e5d"> Nouvelles pages :</h4>
    <ul>...</ul>
    <h4 style="margin-left:1.5em;width:max-content;border-bottom:1px dotted #d96e5d"> Pages modifiées :</h4>
    <ul>...</ul>
  </div>
  <a href="..." style="color:#34414a;text-decoration:none;display:flex">
    <img src="..." height="250px">
    <p style="margin:0px"> Adresse:24 ...</p>
  </a>
</div>
...

Edit : the same problem appears when I do css in the header :

<!DOCTYPE HTML>
<html lang="{$wiki.lang}">
    <head>
        <meta charset="UTF-8" />
        <title>{$title}</title>
        <style type="text/css">
            {literal}
                h4{
                    margin-left:1.5em; 
                    width:max-content; 
                    border-bottom: 1px dotted #d96e5d;
                }
                h3{
                    margin-left:0em; 
                    width:max-content; 
                    border-bottom: 2px solid #d96e5d;
                }
                #container{
                    display:flex; 
                    max-height:min-content; 
                    justify-content:space-between; 
                    flex-wrap:wrap;
                }

                #image{
                    color:#34414a; 
                    text-decoration: none; 
                    display:flex; 
                    flex-direction: column; 
                    align-items:center;
                }
            {/literal}
        </style>

    </head>
    <body style='margin:0px auto; background-color:#fafafa;font-family: "Open Sans",Helvetica,Roboto,Arial,sans-serif;font-weight: normal;color: #34414a; width:fit-content; '>
        <a href="{$wiki.url}" target="_blank"><img src="{$wiki.url}skins/archi-wiki/resources/img/logo_archi_wiki.png" alt="Archi-Wiki Logo" height="80"/></a>
        <p> Bonjour,</p>
        <p>{$intro}</p>
        <p>
            Voici les pages qui ont été créées ou modifiées cette semaine sur <a href="{$wiki.url}" target="_blank" style="color: #a65447">{$wiki.name}</a>.
        </p>
        {foreach $changeLists as $namespace=>$recentChanges}
            {foreach $recentChanges as $groupName=>$group}
                {if $groupName != '*'}
                    <h3>{$groupName}</h3>
                {else if $namespace != null}
                    <h3>{$namespace}s</h3>
                {/if}
                <div id="container"">
                    <div>
                        {if isset($group.new)}
                            <h4>Nouvelles pages&nbsp;:</h4>
                            <ul>
                                {foreach $group.new as $change}
                                    <li><a href="{$wiki.url}{$change.title|escape:url}" target="_blank" style="color: #a65447;">{$change.shortTitle|replace:($namespace|cat:':'):''}{if isset($change.quartier)} ({$change.quartier}){/if}</a>  {$val=$change.newlen-$change.oldlen} {if $val>500} <span style="color: #006400; font-weight: bold;">({$val} nouveaux caractères)</span> {elseif $val > 1} <span style="color: #006400;">({$val} nouveau caractère)</span> {elseif $val > -1} <span style="color: black;">({$val|replace:'-':''} nouveau caractère)</span> {elseif $val > -2} <span style="color: black;">({$val|replace:'-':''} caractère supprimé)</span> {elseif $val > -500} <span style="color: #8b0000;">({$val|replace:'-':''} caractères supprimés)</span> {else} <span style="color: #8b0000; font-weight: bold;">({$val|replace:'-':''} caractères supprimés)</span> {/if}</li>
                                {/foreach}
                            </ul>
                        {/if}
                        {if isset($group.edit)}
                            <h4>Pages modifiées&nbsp;:</h4>
                            <ul>
                                {foreach $group.edit as $change}
                                    <li><a href="{$wiki.url}{$change.title|escape:url}" target="_blank" style="color: #a65447;">{$change.shortTitle|replace:($namespace|cat:':'):''}{if isset($change.quartier)} ({$change.quartier}){/if}</a>  {$val=$change.newlen-$change.oldlen} {if $val>500} <span style="color: #006400; font-weight: bold;">({$val} nouveaux caractères)</span> {elseif $val > 1} <span style="color: #006400;">({$val} nouveau caractère)</span> {elseif $val > -1} <span style="color: black;">({$val|replace:'-':''} nouveau caractère)</span> {elseif $val > -2} <span style="color: black;">({$val|replace:'-':''} caractère supprimé)</span> {elseif $val > -500} <span style="color: #8b0000;">({$val|replace:'-':''} caractères supprimés)</span> {else} <span style="color: #8b0000; font-weight: bold;">({$val|replace:'-':''} caractères supprimés)</span> {/if}</li>
                                {/foreach}
                            </ul>
                        {/if}
                    </div>
                    {if isset({$group.biggestChange})}<a id="image" href="{$wiki.url}{$group.biggestChange|escape:url}"><img src="{$group.image}" height="250px"/><p style="margin:0px">{$group.biggestChange}</p></a>{/if}
                </div>
            {/foreach}
        {/foreach}
        <p>Pour ne plus recevoir les alertes mail, il vous suffit de vous connecter à votre profil <a href="{$wiki.url}Spécial:Préférences" target="_blank">{$wiki.name}</a>.</p>
</body>
Solution

  • I have figured it out, I used multiples table with the smaller one having align="left" and in the td cells, it goes in the right place without having mch to add in css. I have removed a lot of my css