From 08e1f9fbe5d19ac3effd309110898067fc65575c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Pokorn=C3=BD?= Date: Thu, 23 May 2024 21:33:41 +0200 Subject: [PATCH 1/2] How to modify form templates in custom theme --- docs/themes/forms.rst | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/docs/themes/forms.rst b/docs/themes/forms.rst index 849db166..78c35fec 100644 --- a/docs/themes/forms.rst +++ b/docs/themes/forms.rst @@ -3,11 +3,34 @@ Customizing Forms To provide custom Form field templates or to manipulate the Form body, create the following directory structure:: + Field/ <– for customizing form field types html/ - MauticFormBundle - Builder <– for customizing the form structure itself - Field <– for customizing form field types + MauticFormBundle/ + Builder/ + _style.html.twig <– for customizing CSS for Form + form.html.twig <– for customizing the form structure itself -Copy from ``app/bundles/FormBundle/Views/Builder/form.html.php`` into the Theme’s Builder directory and/or one or more of the fields templates in ``app/bundles/FormBundle/Views/Field/*.html.php`` into the Theme’s `field` directory. Then customize to the desired layout. Note that these must be PHP templates. +Copy from ``app/bundles/FormBundle/Resources/views/form.html.twig`` into the Theme’s Builder directory and/or one or more of the fields templates in ``app/bundles/FormBundle/Views/Field/*.html.php`` into the Theme’s `field` directory. Then customize to the desired layout. -You can add a custom style sheet to the Form by adding a ``style.html.twig`` with your custom CSS to ``html/MauticFormBundle/Builder``. The best way is to copy the content of the default Form styles and modify them to your needs. +You can add a custom style sheet to the Form by adding a ``_style.html.twig`` with your custom CSS to ``html/MauticFormBundle/Builder``. The best way is to copy the content of the default Form styles and modify them to your needs. + +Customize field types +********************* + +For change HTML generated by field types, you can create a new template in the `Field` directory. +I recommend copy the original template from `app/bundles/FormBundle/Resources/views/Field/*.html.twig` and modify it. + + +How modify templates including base `text.html.twig` template +============================================================= + +Several templates including the base `text.html.twig` template. +So you will want modify it, but you also need modify templates including it - change `include` statement. + +For example `email.html.twig` including:: + + {{ include('@MauticForm/Field/text.html.twig', { ... + +you need change `@MauticForm` to you theme, for example:: + + {{ include('@themes/MyTheme/Field/text.html.twig', { ... \ No newline at end of file From 4f6fc17653d34f10e6362c4bfd3aa8b2501dc3ec Mon Sep 17 00:00:00 2001 From: Lukas Pokorny Date: Fri, 24 May 2024 17:21:25 +0200 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: John Linhart --- docs/themes/forms.rst | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/themes/forms.rst b/docs/themes/forms.rst index 78c35fec..c8bccc0d 100644 --- a/docs/themes/forms.rst +++ b/docs/themes/forms.rst @@ -17,20 +17,19 @@ You can add a custom style sheet to the Form by adding a ``_style.html.twig`` wi Customize field types ********************* -For change HTML generated by field types, you can create a new template in the `Field` directory. -I recommend copy the original template from `app/bundles/FormBundle/Resources/views/Field/*.html.twig` and modify it. +Create a new template in the `Field` directory to change HTML generated by field types. +The best way is to copy the original template from `app/bundles/FormBundle/Resources/views/Field/*.html.twig` and modify it. -How modify templates including base `text.html.twig` template -============================================================= +How to modify templates including base `text.html.twig` template +================================================================ -Several templates including the base `text.html.twig` template. -So you will want modify it, but you also need modify templates including it - change `include` statement. +Several templates are including the base `text.html.twig` template so you may need modify it. In that case you also need to modify templates including it. Change the `include` statement. -For example `email.html.twig` including:: +For example `email.html.twig` including: {{ include('@MauticForm/Field/text.html.twig', { ... -you need change `@MauticForm` to you theme, for example:: +you need change `@MauticForm` to you theme, for example: {{ include('@themes/MyTheme/Field/text.html.twig', { ... \ No newline at end of file