CMS Development

Ohhcoconut
Colaborador(a)

Editing the header for only one email.

Hey,

I'm trying to edit the header on a new template of emails I downloaded from the marketplace. When I preview my email with the option of seeing it from a mobile device, the right side of my logo image is nearly touching the right side of the screen, see attached photo.

 email_header.PNG

When I go to edit this template in the design manager, it allows me to edit the "branding" and the "resonant CSS include". I'd assume that I would edit it in the "branding" .css style.  This is the styling in there:

<table style="width: 700px;{# set this to 700 to force email width on outlook #}" class="setFullWidth"><tr>
<td style=" padding-bottom: 5px; padding-top: 5px; padding-left: 5px; padding-right: 50px; margin-bottom: 30px; background-color: {{ primary_accent_color }}">
    {% logo "logo_image" overrideable=true, suppress_company_name=true, src="https://cdn2.hubspot.net/hubfs/2574624/Resonant/resonant-logo.png", original_width=163, original_height=21, img_alt="resonant logo", width=163, height=21, label="Logo" %}
</td></tr></table>

 

I think that the % logo links to the designer's files. I am overriding the logo with my own logo hosted in my file manager.

 

Does this question make sense? Any sort of help would be much appreciated!

0 Avaliação positiva
4 Respostas 4
Jsum
Conselheiro(a) de destaque

Editing the header for only one email.

You have some email options in the account settings for your hubspot portal, namely how wide you want the email and the padding you want around your email. Templates you download will be effected by these settings. It sounds like you emails padding has been set to 0 in your settings.

0 Avaliação positiva
jackjadish
Membro

Editing the header for only one email.

On your custom module please choose the logo and edit it with the style you required. Ex: you can add the padding and margin for the logo image alone. So once the page load, those properties will be applied. 

 

Does this make sense?

0 Avaliação positiva
Ohhcoconut
Colaborador(a)

Editing the header for only one email.

@jackjadish When you say the "custom module" that I would access thru the design manager, I do not see any module titled "logo" or otherwise. I see different options of columns, footers, and CTA, but no Logo. If you notice in the html code I included earlier, the "branding" had padding around the logo. 

 

I tried to edit the module from within the email but there is no option in the module of the logo to add padding or change the style. 

 

Thank you for your help!

 

@Jsum I went to my email settings and only see options for the email width and the body padding. I do not see any information in the account settings for the email regarding logo padding. Does the "branding" code attached by default in this template not apply to the "logo" we use? Does that question make sense? 

 

Thank you! 🙂

0 Avaliação positiva
Ohhcoconut
Colaborador(a)

Editing the header for only one email.

CORRECTION: This is the proper coding for the back end:

<table style="width: 700px;{# set this to 700 to force email width on outlook #}" class="setFullWidth"><tr>
<td style=" padding-bottom: 50px; padding-top: 50px; padding-left: 50px; margin-bottom: 30px; background-color: {{ primary_accent_color }}">
    {% logo "logo_image" overrideable=true, suppress_company_name=true, src="https://cdn2.hubspot.net/hubfs/2574624/Resonant/resonant-logo.png", original_width=163, original_height=21, img_alt="resonant logo", width=163, height=21, label="Logo" %}
</td></tr></table>

I'm unsure if there's a difference, but I accidentally copied the wrong template's code. 

0 Avaliação positiva