Changing the layout of new order email

[Mayfil]

Hello,

Thank you for always helping me a lot.

We want to change the layout of new order email like the image below.

And also we need to add one letter(for example "#") to the customer's name.

So we separate the customer's name and address as follows;

                        <p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
　　　　　　　　                {{var order.getBillingAddress().getStreet2()}}

                                        {{var order.getBillingAddress().getStreet1()}}

                                        {{var order.getBillingAddress().getCity()}}

                                        {{var order.getBillingAddress().getRegion()}}</span></p>

But there is a big space before the address when I receive test mail.

How can I fix it?

The following is a part of the customized new order email;

            {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details" align="left">
                        <h6>Billing address:</h6>

                            <p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
　　　　　　　　                  {{var order.getBillingAddress().getStreet2()}}

                                        {{var order.getBillingAddress().getStreet1()}}

                                        {{var order.getBillingAddress().getCity()}}

                                        {{var order.getBillingAddress().getRegion()}}</span></p>

                    </td>
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details" align="left">
                        <h6>Shipping address:</h6>

                              <p><span class="no-link">{{var order.getShippingAddress().getName()}}#<br>
　　　　　　　　                  {{var order.getShippingAddress().getStreet2()}}

                                        {{var order.getShippingAddress().getStreet1()}}

                                        {{var order.getShippingAddress().getCity()}}

                                        {{var order.getShippingAddress().getRegion()}}</span></p>

                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>

[Mayfil]

Hello,

Thank you for your attention.

I tried from the beginning with the original magento mail template and it was successful.

The following is the code;

 {{layout handle="sales_email_order_items" order=$order}}
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="address-details">
                        <h6>Billing address:</h6>
                        <p><span class="no-link">{{var order.getBillingAddress().getName()}}様<br>
                        {{var order.getBillingAddress().getStreet2()}}{{var order.getBillingAddress().getStreet1()}}{{var order.getBillingAddress().getCity()}}{{var order.getBillingAddress().getRegion()}}</span></p>
                    </td>
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="address-details">
                        <h6>Shipping address:</h6>
                        <p><span class="no-link">{{var order.getShippingAddress().getName()}}様<br>
                        {{var order.getShippingAddress().getStreet2()}}{{var order.getShippingAddress().getStreet1()}}{{var order.getShippingAddress().getCity()}}{{var order.getShippingAddress().getRegion()}}</span></p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    {{depend order.getIsNotVirtual()}}
                    <td class="method-info">
                        <h6>Shipping method:</h6>
                        <p>{{var order.shipping_description}}</p>
                    </td>
                    {{/depend}}
                </tr>
                <tr>
                    <td class="method-info">
                        <h6>Payment method:</h6>
                        {{var payment_html}}
                    </td>
                </tr>
            </table>

[DavidStephan]

Have a look at these references.

http://www.webspeaks.in/2011/06/customize-new-order-email-template-in-magento.html

http://magento.stackexchange.com/questions/62505/change-1-9-rwd-new-order-e-mail-template-item-tabel

http://www.outsourcing4work.de/en/software/magento-developer/

http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html

I hope this can help you with your query related to changing the layout of new order email.

[Mayfil]

Hello, DavidStephan.

Thank you for your advice.

It seemed that at first magento didn't neglect the space after <br> tag in the code below. That's why there were space before the address in the mail.

<p><span class="no-link">{{var order.getBillingAddress().getName()}}#<br>
　　　　　　　　                  {{var order.getBillingAddress().getStreet2()}}

But as I wrote in the second post, I was successful to fix the strange layout of new order email by editing the original magento template again from the beginning.

Now I have another problem showing my shop's logo in the sales mail.

So I can study it from the sites that you introduced me. I will post a question if I can't fix it.

Thank you very much!