Change mailing subscription

[JWinterhalter]

I would like to change the standardised mailings. This is an HTML code – unfortunately I cannot save it and the following error message appears.

How can I proceed here?

I want to change the Logo size and the font. 

[JWinterhalter]

As soon as I copy the HTML to be able to edit it, the preview is no longer displayed and I can no longer see my changes. But I haven't changed anything in the code yet.

@TomM2 @Anton 

[Anton · Accepted solution]

Hi @JWinterhalter 

DE:

Diese Fehler kommen höchstwahrscheinlich daher, dass du den Code aus einer anderen Ordnerstruktur herauskopierst und HubSpot bei den hinterlegten Pfaden im Code keine Datei(en) finden kann. 

Es scheint, als würdest du das E-Mail subscription confirmation template aus dem @hubspot/cmsdefaultsystempages Ordner in ein anderes Theme kopieren wollen. Das ist an sich korrekt, jedoch musst du dabei beachten, dass dein Theme höchstwahrscheinlich keine system-base.html besitzt. 

Um diesen Fehler zu beheben, musst du in Zeile 11(standardgemäß) den Code von 

{% extends "../system-base.html" %}

zu

{% extends "../layout.html" %}

(oder wie deine Haupt-Layout-Datei heißt; sollte sich im Ordner templates/layouts befinden; kann in jedem theme anders heißen) ändern.

Auch solltest du den Pfad korrekt anpassen. 

Wenn deine Ordnerstruktur ungefähr so aussieht:

• THEME
  • ... 
  • templates
    • layouts
      • base.html
    • system
      • email_subscription_confirmation.html

dann sollte der Pfad passen.

Andernfalls kannst du auch andere Variationen des Pfades ausprobieren

{% extends "./templates/layouts/base.html" %}

{% extends "../../base.html" %}

...

Um den Fehler mit dem Modul zu beheben, ändere den Code von

{% email_subscriptions_confirmation "email_subscriptions_confirmation"
      extra_classes="email-subscription-confirmation",
      email_heading_level="p"
      header="",
      unsubscribe_all_success={{ template_translations.subscription_confirmation_unsubscribe_all_success.message }},
      subscription_update_success={{ template_translations.subscription_confirmation_sub_update_success.message }},
      subheader_text=""
    %}

zu

{% email_subscriptions_confirmation "email_subscriptions_confirmation"
      path="@hubspot/email_subscriptions_confirmation" {# diese Zeile ist neu #}
      extra_classes="email-subscription-confirmation",
      email_heading_level="p"
      header="",
      unsubscribe_all_success={{ template_translations.subscription_confirmation_unsubscribe_all_success.message }},
      subscription_update_success={{ template_translations.subscription_confirmation_sub_update_success.message }},
      subheader_text=""
    %}

ab. Wenn du eine eigene Version dieses Moduls im theme hast, kannst du den Pfad entsprechend anpassen. Erfahrungsgemäß würde ich aber abraten, die Pref-Center relevanten Module zu verändern. 

Um deine initiale Frage zu beantworten:

Um die Logo größe zu verändern, öffne eine CSS Datei deines themes und schreibe dein gewünschtes Styling hinein. 
Da ich nicht weis, welches Theme du verwendest, ist es nicht einfach eine konkrete CSS Datei zu empfehlen. Jedoch würde ich zuerst alle Sub-Ordner im CSS Ordner nach etwas wie system.css überprüfen und falls eine solche Datei vorhanden sein sollte, die Änderungen dort vornehmen. Falls du keine solche Datei finden solltest, kannst du es in die theme.css(Name kann abweichen - bspw. theme-overrides.css) einfügen oder selber eine neue CSS Datei erstellen. 

Falls du eine system.css findest, oder eine neue Datei anlegst, solltest du im Template auch den Pfad der Datei anpassen - oder

{% set template_css = "../css/templates/system.css" %}

durch

{{ require_css(get_asset_url("PFAD/ZU/DEINER/DATEI.css")) }}

ersetzen.

In dieser Datei kannst du dann das Logo mittels folgendem CSS code anpassen:

header.system-logo img{
height:80px; {# die gewünschte Logo höhe #}
width: auto; {#würde ich so belassen, damit das Logo automatisch skaliert #}
}

Wenn du bis hier hin alle Dateien und Pfade korrekt angepasst hast, sollte sich die Schrift automatisch an deine Theme einstellungen anpassen. Falls du etwas ändern möchtest, empfehle ich mittels des Developer Modus(Rechtsklick auf das gewünschte Element -> Untersuchen) des Browsers das jeweilige Element herauszufinden und es entsprechend in die CSS hineinzuschreiben. Da dies Systemseiten sind, die keine richtige Vorschau URL besitzen, ist das posten eines Links leider nicht hilfreich.

EN:

These errors are most likely due to the fact that you are copying the code from a different folder structure and HubSpot cannot find any file(s) in the stored paths in the code.

It seems that you want to copy the email subscription confirmation template from the @hubspot/cmsdefaultsystempages folder to another theme. This is correct in itself, but you have to keep in mind that your theme most likely does not have a system-base.html.

To fix this error, you need to change the code in line 11(by default) from

{% extends "../system-base.html" %}

to

{% extends "../base.html" %}

(or whatever your main layout file is called; should be in the templates/layouts folder; can be called differently in each theme).

You should also adjust the path correctly.

If your folder structure looks something like this:

• THEME
  • ... 
  • templates
    • layouts
      • base.html
    • system
      • email_subscription_confirmation.html

then the path should fit.

Otherwise you can also try other variations of the path like

{% extends "./templates/layouts/base.html" %}

{% extends "../../base.html" %}

...

To fix the error with the module, change the code from

{% email_subscriptions_confirmation "email_subscriptions_confirmation"
      extra_classes="email-subscription-confirmation",
      email_heading_level="p"
      header="",
      unsubscribe_all_success={{ template_translations.subscription_confirmation_unsubscribe_all_success.message }},
      subscription_update_success={{ template_translations.subscription_confirmation_sub_update_success.message }},
      subheader_text=""
    %}

to

{% email_subscriptions_confirmation "email_subscriptions_confirmation"
      path="@hubspot/email_subscriptions_confirmation" {# this line is new #}
      extra_classes="email-subscription-confirmation",
      email_heading_level="p"
      header="",
      unsubscribe_all_success={{ template_translations.subscription_confirmation_unsubscribe_all_success.message }},
      subscription_update_success={{ template_translations.subscription_confirmation_sub_update_success.message }},
      subheader_text=""
    %}

If you have your own version of this module in the theme, you can adjust the path accordingly. From my experience, however, I would advise against changing the Pref-Center relevant modules.

To answer your initial question:

To change the logo size, open a CSS file of your theme and write your desired styling into it.
Since I don't know which theme you are using, it is not easy to recommend a specific CSS file. However, I would first check all sub-folders in the CSS folder for something like system.css and if there is such a file, make the changes there. If you cannot find such a file, you can add it to theme.css (name may vary - e.g. theme-overrides.css) or create a new CSS file yourself.

If you find a system.css or create a new file, you should also adjust the path of the file in the template - or change

{% set template_css = "../css/templates/system.css" %}

to

{{ require_css(get_asset_url("PATH/TO/YOUR/FILE.css")) }}​

In this file you can then customize the logo using the following CSS code:

header.system-logo img{
height:80px; {# the desired logo height #}
width: auto; {#I would leave it like this so that the logo scales automatically #}
}

If you have adjusted all files and paths correctly up to this point, the font should automatically adapt to your theme settings. If you want to change something, I recommend using the developer mode (right-click on the desired element -> Examine) of the browser to find out the respective element and write it into the CSS accordingly. Since these are system pages that do not have a proper preview URL, posting a link is unfortunately not helpful.

best, 

Anton

[PamCotton]

Hey @JWinterhalter, thank you for posting in our Community!

Thanks for your question! To adjust the logo size and font in your mailing:

1. Check the HTML for syntax errors that might cause saving issues.
2. Edit the <img> tag to resize the logo and adjust font styles in the CSS or <style> section.

If the error persists, let me know, and I’ll assist further!

To our top experts @TomM2 and @Anton do you have any suggestions for @JWinterhalter matter?

Thank you,

Pam