Joomla article text formatting removed

Projects

Using Starter V9.8.1
When creating a newsletter mail template with the Drag & Drop editor and we insert a Joomla article in a block, that article loses all formatting . Line spacing, paragraph breaks etc are gone. We would like the subscribers to see the article EXACTLY as it would be seen on the website. Is there a way to insure the article is displayed EXACTLY as it was written?
We tried using the HTML editor (JCE) but it only inserts a link to the article and these articles are not viewable on the website so the link returns a 404 error. They are for newsletter use only.

jvstratum

Hi,

When an article is displayed in a website it's usingf the (custom) css of your website's template. When you send an email all css must be included in the email since email clients don't lookup youre site's css.

In the right hand panel of the drag and drop editor you have options to style your html elements. You also have the option to add a custom style sheet to tour template or email.

For the paragraph spacing you can add this to your custom style sheet:

p.acymwysidtinymce--text--placeholder {
margin-bottom: 16px !important;
}

In case changing the html elements in the right hand design panel it usually means you have created a custom view for the article add-on. When you do this it overrules the settings in the design panel and you must control all your styling yourself with html elements and custom css. To rest a custom view of the article add-on you only need to delete the code of your custom view and save it. Once done the settings in the design panel are back in place again.

Projects

It appears in that bit of code for the stylesheet, that it is for TINYMCE. We are using JCE as I indicated in my post. I am not proficient in CSS, so I would appreciate a bit more detail in what to do with this and how it will correct the issue.
Thanks!

Projects

I have changed the default editor to TinyMCE, removed the block where the article would go, replaced it with a new article block, added the code snippet above to the block stylesheet in the drag and drop editor, replaced the article and nothing has changed. What am i doing wrong?

jvstratum

Hi,

The information I gave you was for the drag & drop editor. In the html editor you can do something like this:

p {
margin-bottom: 16px !important;
}

Please note that CSS customization falls outside the scope of our support. If you wish to customize the layout, we recommend having a basic understanding of CSS inside-out or consulting a professional who can assist with this task.

We strongly recommend to get familiar with the drag & drop editor, it will make things much easier.

Projects

I AM using the Drag & Drop editor and those snippets in the emails style sheet do nothing. Maybe I wasn't clear- So I will explain again. We want to IMPORT a Joomla article into the editor. The article is all correctly formatted in Joomla with paragraph breaks. But when we drag the article icon into the block and then select the appropriate article, the paragraph "<p> </p>" are stripped out. The code you provided does nothing. We have remedied the problem, at least for now, by using the TEXT block and then creating the article in Word and coping it to the text box. This allows us to keep the formatting as we want and we can do other edits as necessary. It seems to be the long way around to do something that the drag & drop editor is supposed to make easier.
I realize that this is a volunteer forum and not paid support but I would hope that when you give advice, it would work or you could explain in more detail. We have no need for the Enterprise or Pro versions other features. We are a nonprofit so paying for things we don't need only to get support is a waste of money we could use for other things pertinent to our mission.

jvstratum

Hi,

Just to have a clear understanding of the editors, please note that the drag & drop aditor is not using your default cms editor.

The drag & drop editor is based on a customized TinyMCE engine. Apart from the drag & drop editor you can also work with html templates in Acymailing, which does use your default editor you have set in your cms.

Initially I assumed you were using the drag & drop editor. However, after you mentioned changing the editor to the JCE website editor I thought I was wrong and you were actually using html templates, thus using the website's editor (TinyMCE or JCE). Hence, giving you the wrong answer afterwards.

Now this is clear. When you import articles in the drag & drop editor the <p> tags are not stripped out. By default the bottom margin of the <p> element is zero.
This is done because most people do not know the difference between ENTER and SHFT-ENTER. They just hit ENTER twice to start a new paragraph. No worries, it's on the TODO list of our developers to add a parameter for this in the design panel. Unfortunately I do not have an eta for this.

You should be good to go after setting a css declartion for this in the custome stylesheet of your email (template).

In case the first code I gave you doesn't work, please try this code instead:

#acymwysidtemplate p {
margin-bottom: 16px !important;
}

Have a nice day.

Projects

Thank you for clarification. I apologize if I was not clear on the editor. The snippet you gave just now works. Thank you.
For the future, you should not assume that every user is proficient or even understands what CSS or HTML is. I am working for a nonprofit and this is for them to create and send emails to their constituents, so for the people that will be working on this in the back-end, telling them about CSS and code etc is like speaking Greek to a Ugandan! I understand the basics but most often rely on the extension to produce what I want without such injections. Their focus is on doing the things the nonprofit needs to do to support their mission. I can set this up to do what they need but for them to do something on their own, this needs to be REALLY simple! Keep in mind that not everyone that uses AcyMailing is proficient is HTML or CSS. Most generally use some kind of editor that produces the content that they want pretty simply and that is what they expect here. Anything that frustrates the user will push them away.

Projects

We are back to this same problem! We want to send a new newsletter and selected the Joomla article. It drops in to the template. But the formatting is again all gone. I have created the custom style sheet as you suggested above but nothing is changed and I cannot even edit the article now in the template. It shows an orange box that says PREVIEW and when I click anywhere, the article opens on the webpage. But I cannot edit anything. I do not want to see a preview. What I want is for the Joomla article to import into the template EXACTLY as it is written OR a way to edit that article from within the template to get the formatting, text color, line breaks etc all the way we want them. There has to be a way to use this extension without jumping thru ail kinds of technical hoops!