Mautic Community Forums

Custom CSS for Landing Pages

Hi there,



How can I link an external CSS for custom LPs? Would I need to get into theme dev? If so, please advise regarding the process.



Thank you,



Bishoy

Hi there,

How can I link an external CSS for custom LPs? Would I need to get into theme dev? If so, please advise regarding the process.

Thank you,

Bishoy

You can add an external CSS it in a custom theme or via the Content tab - click the code view button in the browser toolbar. There is currently this issue which might cause troubles in Mautic 2.0.1: https://github.com/mautic/mautic/pull/2032

Appreciate the info!

I got started on building a custom landing page using a bootstrap template. However, I’m getting “fr-original-class” and “fr-original-style” instead of “class” or "style? Is there a workaround for this?

Thanks,
Bishoy

Alternatively, if I create a non-Mautic landing page will I be able to use a Mautic form?

On what HTML tags are you getting the fr-… attributes? This PR should fix it: https://github.com/mautic/mautic/pull/2032

Yes, you can embed the Mautic forms to another website: https://mautic.org/docs/en/forms/manage_forms.html

All of the style and class attributes are broken by the editor. So any HTML tags that include a style or class attribute (eg, the anchor tag) will output those attributes as ‘fr-original-class’ or ‘fr-original-style’. I can understand the need for integrating a WYSIWYG editor but if I had to choose I’d rather have full control over the raw HTML and CSS without being hindered by junk syntax.

How can I use this pull request to fix the issue (I’m a Git novice)? Is there a timeline for a stable release that will resolve it?

Thanks again.

I totally understand. The full page editor wasn’t there when developing the new builders for Mautic 2.0.0 actually. Only a HTML source editor was there instead. But users who found out were really scared about the idea of the source code editor so the full page wysiwyg editor was added in the last minute.

Check https://github.com/mautic/mautic#how-to-test-a-pull-request

Agree with @Bishoy, I’m in process of converting to v2.0 , all my e-mails and landing pages are being cleared, would the PR resolve it for e-mails too? If not, is it possible to add a control in the configuration to control features like this in the future releases?

[quote=13611:@escopecz]I totally understand. The full page editor wasn’t there when developing the new builders for Mautic 2.0.0 actually. Only a HTML source editor was there instead. But users who found out were really scared about the idea of the source code editor so the full page wysiwyg editor was added in the last minute.

Check https://github.com/mautic/mautic#how-to-test-a-pull-request[/quote]

Well, I set up Mautic locally on my PC through Bitnami. Do I have to create a new local instance on an AMP package server? I’m having complications with this method, specifically with installing composer and exposing the Github install on “localhost/mautic”. I have so far tried a few different AMPs without success.

Also, would there be a way to safely modify a stable live release of Mautic simply to resolve this frustrating “fr-…” issue?

Apologies for the lengthy questions, but I would certainly appreciate the assistance in advance.

@balkee I believe that https://github.com/mautic/mautic/pull/2032 will fix even the emails/pages created in Mautic 1 which hasn’t been saved after upgrade to Mautic 2. But to be sure, a test would have to be done with the content of your old emails.

@Bishoy I don’t have an easy way how to test it. A local installation is probably simplest.