Change email content width

[olsyrova]

Hi, I am using the CiviCRM Mosaico extension within my WordPress website. By default, the content width of the emails is around 530px. Is there a way to increase this width? Do I need to adjust the width of each content block provided by the Versafix-1 template to achieve this? If so, what would be the right place to do so? I am using the latest versions of both CiviCRM and Mosaico. Thank you very much in advance!

[MegaphoneJon]

You need to adjust the width of each block, yes. Attached is an example where I did this, though it's quite janky (the client had some very odd requests). Nevertheless, you can diff this against versafix-1.html to see where I made edits. 900px-example.html.txt

Don't forget to save this as a new template - set a Mosaico template directory in Administer » CiviMail » Mosaico Settings and put it there! If you edit versafix-1 directly, or put your template alongside it, it will be lost when you upgrade Mosaico.

Finally - the width of the Mosaico editor itself is an issue. And there's a special hook you need to change the CSS. I wrote an extension to change it to 900px. Here's the code and the CSS:

function mosaico900_civicrm_mosaicoStyleUrlsAlter(&$stylesheets): void {
  $stylesheets[] = CRM_Core_Resources::singleton()->getUrl('mosaico900') . 'css/mosaico900.css';
}

#main-edit-area #main-wysiwyg-area replacedbody {
  max-width: 900px;
}

[olsyrova]

Thank you for the quick response, @MegaphoneJon!

Currently, I can only see my custom template if I place it alongside versafix-1. My Mosaico Custom Templates Directory is set to [civicrm.files]/mosaico_tpl, which resolves to /wp-content/uploads/civicrm/mosaico_tpl.

I created /wp-content/uploads/civicrm/custom_mosaico_tpl and added a new HTML template file (.html) there. Then, I updated the Mosaico Custom Templates Directory path to [civicrm.files]/custom_mosaico_tpl.

Unfortunately, this did not work. The new template doesn't appear under Mailing => Mosaico Templates => New Template => Base template.

Do you have an idea what could be wrong here? Thanks in advance!

[romymy]

You always need the whole template-folder for every new template, not only the html-file. Let's say you have one custom template for internal newsletter with a width 900px and one for external with width 700px and the template directory is [civicrm.files]/mosaico_tpl.

In that directory (/wp-content/uploads/civicrm/mosaico_tpl) you need 2 folders, eg. versafix-1-interal and versafix-1-external. In both folders there must be an html file called template-'foldername'.html (wich results in template-versafix-1-interal.html and template-versafix-1-external.html) and in both folders must be subfolders "edres" and "img".

Depending on your Mosaico settings you should now see 2 custom base templates and the original versafix-1, tedc15 and tutorial