Hello,

That's me again :) Right now I am just posting bugs/tickets, but one day I'll walk them all will provide patches wherever I can.

This time I have a question about the default template webform-element-base-html.html.twig.

Right now it reads:

{% if title %}<b>{{ title }}</b><br/>{% endif %}
{{ value }}<br/><br/>

I wonder if those 2 <br/><br/> at the very end are necessary? I think it's a bit strong assumption to hardcode 2 line breaks at this level of default theme implementation.

Wouldn't it be better to wrap the whole thing into some kind of wrapper and then give it some margin(padding)-bottom. That way other themers can tweak the whole thing the way they need it and nothing is hardcoded.

CommentFileSizeAuthor
#4 2842142-better-theming-2.patch1.62 KBbucefal91
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bucefal91 created an issue. See original summary.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer commented

webform-element-base-html.html.twig is used to generate HTML friendly emails. Using <br/> tags for spacing is the simplest and most reliable way to add spacing in an HTML email.

Themers looking to send more complex HTML emails can override this template and add inline styles.

bucefal91’s picture

bucefal91 CreditAttribution: bucefal91 at Websolutions Agency commented

Maybe something like this? I know my patch is still long way from the ideal solution, but I hope you can see my point - introducing attributes with the idea that these attributes can then be manipulated through other (pre)-process functions (presumably in custom themes) and your base webform-element-base-html.html.twig becomes much more flexible. There's no need to override the template since this way the majority of tasks can be applied via manipulating the attributes and then doing necessary CSS in the custom theme.

And you also will have probably better time defining standard CSS classes in template_preprocess_webform_element_base_html(), just like Field API or Views does it.

You see my logic here?

bucefal91’s picture

bucefal91 CreditAttribution: bucefal91 at Websolutions Agency commented
FileSize
2842142-better-theming-2.patch1.62 KB

Crap, the patch somehow got forgotten. I attach it now.

bucefal91’s picture

bucefal91 CreditAttribution: bucefal91 at Websolutions Agency commented
Status: Active » Needs review

ahhh, and it needs "needs review" status.

Status: Needs review » Needs work

The last submitted patch, 4: 2842142-better-theming-2.patch, failed testing.

bucefal91’s picture

bucefal91 CreditAttribution: bucefal91 at Websolutions Agency commented
Status: Needs work » Needs review

I've just looked through the test failures. They all fail because the HTML output of webform-element-base-html.html.twig has changed.

If you like my suggestion I can adapt the tests so they start passing with the new approach.

jrockowitz’s picture

jrockowitz CreditAttribution: jrockowitz as a volunteer commented

@bucefal91 Check out the below article which helps explains why we should avoid using classes (and a lot of other features) in any HTML email related markup.

https://css-tricks.com/using-css-in-html-emails-the-real-story/

Personally, I want the Webform's templates to be as simple as possible, while making it possible for all templates to overridden. Maybe someone can write a blog post about building custom and most advanced HTML email template overrides for the Webform module.

bucefal91’s picture

bucefal91 CreditAttribution: bucefal91 at Websolutions Agency commented
Status: Needs review » Closed (won't fix)

Hello!

Yes, I understand your position. Then I'll do what I need in a custom theme.

krishanchandra’s picture

krishanchandra CreditAttribution: krishanchandra at Publicis Sapient commented

We can theme our webform through custom twig.
We need to set this in <theme_name >.theme file

function example_theme() {
  return array(
    'webform_form_id' => array(
      'arguments' => array('form' => NULL,),
      'template' => 'example-webform_template-name',
      'render element' => 'form'
    ),
  );
}

After this code we can use example-webform_template-name.html.twig for our webform theming.