Changeset - 51906236eed3
[Not reviewed]
default
0 5 0
Thomas De Schampheleire - 8 years ago 2018-02-06 21:28:13
thomas.de_schampheleire@nokia.com
HTML email templates: restrict amount of visible hyperlinks

Users report that some HTML email templates are confusing due to the large
number of hyperlinks in them. They typically click the first thing they see
that looks clickable without actually reading what they are clicking on,
expecting that it all points to the same thing.

In pullrequest invitations, the pullrequest and changeset URLs should be
clickable, but the source and target repository should not: this is not what
you typically want to see when taking action on this mail.

Similarly in comment emails, the corresponding repository should not be
clickable.

Unfortunately, even if we remove the <a> hyperlink tags on these repository
URLs, most mail clients will still recognize the text as being URLs
and make them clickable anyway. Worse, they will do so in a different
styling than the other links.

Therefore, do add <a> tags in the HTML, but make use of styling like that of
data_style, i.e. regular text color, grey background with dark grey border.
The links _will_ thus be clickable but it will not be as inviting as before,
thus removing confusion.
5 files changed with 30 insertions and 29 deletions:
0 comments (0 inline, 0 general)
kallithea/model/notification.py
Show inline comments
 
@@ -332,16 +332,17 @@ class EmailNotificationModel(object):
 
                "color_border": "#ddd",
 
                "color_background_grey": "#f9f9f9",
 
                "color_button": "#395fa0",
 
                "monospace_style": "font-family:Lucida Console,Consolas,Monaco,Inconsolata,Liberation Mono,monospace",
 
                "sans_style": "font-family:Helvetica,Arial,sans-serif",
 
                })
 
            _kwargs.update({
 
                "default_style": "%(sans_style)s;font-weight:200;font-size:14px;line-height:17px;color:%(color_text)s" % _kwargs,
 
                "comment_style": "%(monospace_style)s;white-space:pre-wrap" % _kwargs,
 
                "data_style": "border:%(color_border)s 1px solid;background:%(color_background_grey)s" % _kwargs,
 
                "emph_style": "font-weight:600;color:%(color_emph)s" % _kwargs,
 
                "link_style": "color:%(color_link)s;text-decoration:none" % _kwargs,
 
                "link_text_style": "color:%(color_text)s;text-decoration:none;border:%(color_border)s 1px solid;background:%(color_background_grey)s" % _kwargs,
 
                })
 

	
 
        log.debug('rendering tmpl %s with kwargs %s', base, _kwargs)
 
        return email_template.render_unicode(**_kwargs)
kallithea/templates/email_templates/changeset_comment.html
Show inline comments
 
@@ -9,25 +9,25 @@
 
    <tr>
 
        <td>
 
<%include file="comment.html" args="text=body,author=cs_comment_user,status=status_change"/>\
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                ${_('Changeset on')}
 
                <a style="${link_style}"
 
                <a style="${link_text_style}"
 
                   href="${cs_target_repo}">${cs_target_repo}</a>
 
                ${_('branch')}
 
                <span style="${data_style}">${branch}</span>:
 
            </div>
 
            <div>
 
                "<a style="${link_style}"
 
                   href="${cs_url}">${h.shorter(message, 60, firstline=True)}</a>"
 
                ${_('by')}
 
                <span style="${data_style}">${cs_author.full_name_and_username}</span>.
 
            </div>
 
        </td>
 
    </tr>
kallithea/templates/email_templates/pull_request.html
Show inline comments
 
<%inherit file="main.html"/>\
 
\
 
<%block name="header">\
 
<% title = _('Mention on Pull Request %s "%s" by %s') % (pr_nice_id, pr_title, pr_user_created) if is_mention else _('Added as Reviewer of Pull Request %s "%s" by %s') % (pr_nice_id, pr_title, pr_user_created) %>\
 
<%include file="header.html" args="title=title,link=pr_url"/>\
 
</%block>\
 
\
 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
 
    <tr>
 
        <td>
 
            <div>
 
                ${_('Pull request from')}
 
                <a style="${link_style}"
 
                <a style="${link_text_style}"
 
                   href="${pr_source_repo}">${pr_source_repo}</a>
 
                ${_('at')}
 
                <span style="${data_style}">${pr_source_branch}</span>
 
                ${_('to')}
 
                <a style="${link_style}"
 
                <a style="${link_text_style}"
 
                   href="${pr_target_repo}">${pr_target_repo}</a>
 
                ${_('at')}
 
                <span style="${data_style}">${pr_target_branch}</span>
 
            </div>
 
            <div>
 
                <a style="${link_style}"
 
                   href="${pr_url}">${pr_nice_id}</a>
 
                "<span style="color:${color_link}">${pr_title}</span>"
 
                ${_('by')}
 
                <span style="${data_style}">${pr_owner.full_name_and_username}</span>.
 
            </div>
 
        </td>
kallithea/templates/email_templates/pull_request_comment.html
Show inline comments
 
@@ -9,30 +9,30 @@
 
    <tr>
 
        <td>
 
<%include file="comment.html" args="text=body,author=pr_comment_user,status=status_change,close=closing_pr"/>\
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                ${_('Pull request from')}
 
                <a style="${link_style}"
 
                <a style="${link_text_style}"
 
                   href="${pr_source_repo}">${pr_source_repo}</a>
 
                ${_('branch')}
 
                <span style="${data_style}">${pr_source_branch}</span>
 
                ${_('to')}
 
                <a style="${link_style}"
 
                <a style="${link_text_style}"
 
                   href="${pr_target_repo}">${pr_target_repo}</a>
 
                ${_('branch')}
 
                <span style="${data_style}">${pr_target_branch}</span>:
 
            </div>
 
            <div>
 
                <a style="${link_style}"
 
                   href="${pr_url}">${pr_nice_id}</a>
 
                "<span style="color:${color_link}">${pr_title}</span>"
 
                ${_('by')}
 
                <span style="${data_style}">${pr_owner.full_name_and_username}</span>.
 
            </div>
 
        </td>
kallithea/tests/models/test_dump_html_mails.ref.html
Show inline comments
 
@@ -102,25 +102,25 @@ View Comment: http://comment.org
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Changeset on
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://example.com/repo_target">http://example.com/repo_target</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
@@ -261,25 +261,25 @@ View Comment: http://comment.org
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Changeset on
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://example.com/repo_target">http://example.com/repo_target</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
@@ -438,25 +438,25 @@ View Comment: http://comment.org
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Changeset on
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://example.com/repo_target">http://example.com/repo_target</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
@@ -615,25 +615,25 @@ View Comment: http://comment.org
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Changeset on
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://example.com/repo_target">http://example.com/repo_target</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">brunch</span>:
 
            </div>
 
            <div>
 
                "<a style="color:#395fa0;text-decoration:none"
 
                   href="http://changeset.com">This changeset did something clever which is hard to explain</a>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
    </tr>
 
@@ -948,30 +948,30 @@ View Pull Request: http://pr.org/7
 
                </tr>
 
                <tr>
 
                    <td height="30px" style="height:30px" colspan="3"></td>
 
                </tr>
 
                <tr>
 
                    <td></td>
 
                    <td>
 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                at
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                at
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -1137,30 +1137,30 @@ View Pull Request: http://pr.org/7
 
                </tr>
 
                <tr>
 
                    <td height="30px" style="height:30px" colspan="3"></td>
 
                </tr>
 
                <tr>
 
                    <td></td>
 
                    <td>
 
<table cellpadding="0" cellspacing="0" border="0" width="100%">
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                at
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                at
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -1356,30 +1356,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -1521,30 +1521,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -1704,30 +1704,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -1887,30 +1887,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -2069,30 +2069,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -2251,30 +2251,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -2439,30 +2439,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
 
@@ -2627,30 +2627,30 @@ View Comment: http://pr.org/comment
 
        <td height="10px" style="height:10px" colspan="3"></td>
 
    </tr>
 
</table>
 
        </td>
 
    </tr>
 
    <tr>
 
        <td height="30px" style="height:30px"></td>
 
    </tr>
 
    <tr>
 
        <td>
 
            <div>
 
                Pull request from
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="https://dev.org/repo">https://dev.org/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">devbranch</span>
 
                to
 
                <a style="color:#395fa0;text-decoration:none"
 
                <a style="color:#202020;text-decoration:none;border:#ddd 1px solid;background:#f9f9f9"
 
                   href="http://mainline.com/repo">http://mainline.com/repo</a>
 
                branch
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">trunk</span>:
 
            </div>
 
            <div>
 
                <a style="color:#395fa0;text-decoration:none"
 
                   href="http://pr.org/7">#7</a>
 
                "<span style="color:#395fa0">The Title</span>"
 
                by
 
                <span style="border:#ddd 1px solid;background:#f9f9f9">u2 u3 (u2)</span>.
 
            </div>
 
        </td>
0 comments (0 inline, 0 general)