Home > know-how > MailBeez > module specific header images

module specific header images

If you like to define different header images by module, you can use following syntax in your main template (on template manager use nerdmode):

{if $module_code == 'coupon_birthday'}
<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} 
<a href="{$catalog_server}" target="_blank"><img src="/*stylevar:$header_logo_img_url*/" style="border-width: 0px; border-style: solid; margin: 0px;" /></a>
{/if}

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.