If you like to define different header images by module, you can use following syntax in your main template (on template manager use nerdmode):
<a href="{$catalog_server}" target="_blank"><img src="birthday_header_url" style="border-width: 0px; border-style: solid; margin: 0px;" /></a>
{elseif $module_code == 'mb_newsletter''}
<a href="{$catalog_server}" target="_blank"><img src="newsletter_header_url" style="border-width: 0px; border-style: solid; margin: 0px;" /></a>
{else}
{/if}<a href="{$catalog_server}" target="_blank"><img src="/*stylevar:$header_logo_img_url*/" style="border-width: 0px; border-style: solid; margin: 0px;" /></a>
to define a custom header image for the responsive emails add following CSS code above the </head> tag:
{if $module_code == 'coupon_birthday'}
<style type="text/css">
@media only screen and (max-device-width: 480px), all and (max-width: 480px) {
td[class=headerTd] {
background-image: url(http://www.mystore.com/header_birthday.png);
width: 300px !important;
height: 90px !important;
background-size: 300px 90px ;
background-color: #fffff;
}
}
</style>
{/if}
adopt the bold code to your needs.
explanation:
the template variable “$module_code” is filled with the internal code of the current module, same as you see your browser url when e.g. configuring the “coupon_birthday” module.
The simple logic above outputs different images depending on the current module and for the responsive version it overrides the default CSS settings.