1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Style e-mail elements

Discussion in 'Styling and Customization Questions' started by RichardKYA, Sep 5, 2015.

  1. RichardKYA

    RichardKYA Well-Known Member


    I've styled all the e-mail templates, but I can't find where to edit and style the e-mail elements, quotes, etc. They still display as the XF default style...
    Screen Shot 2015-09-05 at 20.43.59.jpg

    Where can I style these to match my custom style?

    Thank you
    Freelancer likes this.
  2. RichardKYA

    RichardKYA Well-Known Member

    Hi all,

    Anyone have any input at all on this please? It's pretty much the last thing that needs customizing on my site and it's kind of annoying to receive an e-mail that doesn't fit the look and feel of the rest of the site.

    Thanks :)
  3. Freelancer

    Freelancer Well-Known Member

    I have the same problem like @RichardKYA

    It seems like if there is a quoted text inside a thread reply eMail, that the eMail template placeholder "{xen:raw $reply.messageHtml}" (for example) does not use the current selected Style CSS from the frontend but the default style only. I was able to completely adapt the eMails via template mods to my design but this is the bottleneck.

    Is there any chance to tweak this? And if yes, where do I have to look?
  4. trigatch4

    trigatch4 Member

    This warrants a response... seems like an important and basic feature to let linger on for so long?

    Alternatively, would it be possible to offload or send the XF E-mail content via API to a provider like Mandrill where we can create our own templates? We have Mandrill set up to process our e-mails but that's all it does... we have no way to edit the e-mail contents through Mandrill, only through XF admin.
  5. Arty

    Arty Well-Known Member

    I've been using customized emails on my forum for about half a year. Several customers asked for possibility to change emails to match forum style, so currently (among few other things, so its going slowly) I'm working on add-on that makes email layout easy to customize.

    No ETA yet.
    empire, Aivaras, Mouth and 4 others like this.
  6. Freelancer

    Freelancer Well-Known Member

    Shut up, take my money... :D

    That would be the answer to all trouble... I think if eMails "just" draw their properties from the specific user's forum frontend style selected (the usual suspects "primaryContent", "secondaryContent", "discussionListItem" etc etc etc) plus an extra "email.css" to adjust and tweak for HTML responsive eMail if necessary, it would be genius.
    Mouth and Axel B like this.
  7. Axel B

    Axel B Well-Known Member

    More money here. Would love an addon that covers this :)
    Arty likes this.
  8. Arty

    Arty Well-Known Member

    Add-on development is in progress.

    I've just finished working on first part - automatically adjusting layout to selected style. Add-on retrieves style properties of selected style and changes email layout to match those style properties.

    Few screenshots of topic reply notification email with different popular styles applied to it:

    test_basic.png test_xenith.png test_fragzone.png test_uix.png test_quark.png test_latte.png test_uix_dark.png test_pulse.png test_elegance.png test_graphite.png

    Due to vast difference between what's available in style properties and code in email templates for default style, emails don't perfectly match selected style. That's where second part of development comes in - ability to customize email layout in admin panel.
    empire, Aivaras, Mouth and 3 others like this.
  9. Freelancer

    Freelancer Well-Known Member

    Oh wow.... that is impressive. :)(y) Cant wait to have it. Solves all eMail styling problems.

    Great you add possibilities to tweak it in Admin CP. That would be like having an "EXTRA.CSS" for eMails. Then even add-ons from third parties should not be a problem.
    Arty likes this.
  10. RichardKYA

    RichardKYA Well-Known Member

    Arty likes this.
  11. Arty

    Arty Well-Known Member

    It won't be like that, more like style properties. Each element has style: wrapper around all email, header, link in header, etc. That style is simple list of CSS rules.

    Customizer will show you list of possible elements, split into sections for better readability. You can tweak CSS rules for each element.

    In addition to customizing CSS you will also be able to customize HTML code in header and footer. You can put your logo there, add some text or something like that.
    Russ, Aivaras, RichardKYA and 3 others like this.
  12. Axel B

    Axel B Well-Known Member

    Looks great @Arty !
    Looking forward to the final addon :)
    Arty likes this.
  13. Mouth

    Mouth Well-Known Member

    Arty likes this.
  14. Aivaras

    Aivaras Active Member

    Thanks, Arty, for taking up this task.
    Arty likes this.
  15. Arty

    Arty Well-Known Member

    Freelancer likes this.
  16. RichardKYA

    RichardKYA Well-Known Member

    If you're still interested, I've just found where to style the quoted text :D

    I was looking for something else and stumbled upon it in here...


    if ($name)
           $name = '<tr><td style="
             background-color: #F9D9B0;
             border: 1px solid #F9D9B0;
             border-bottom-color: #F9BC6D;
             border-radius: 4px;
             font-size: 11px;
             font-family: \'Trebuchet MS\', Helvetica, Arial, sans-serif;
             line-height: 1.4;
             padding: 3px 8px;
             margin: 0;
             color: #141414">' . $name . '</td></tr>';
         return '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="<rtlcss>
           background-color: #FFF4E5;
           border: 1px solid #F9D9B0;
           border-radius: 5px;
           margin: 1em 86px 1em 0</rtlcss>">' . $name . '<tr>
           <td style="
             font-size: 9pt;
             font-style: italic;
             font-family: Georgia, \'Times New Roman\', Times, serif;
             line-height: 1.4;
             padding: 10px;
             margin: 0">' . $content . '</td></tr></table>';
    Obviously if you do edit this, be sure to make a backup first and keep a record of your edits
    Freelancer likes this.

Share This Page