<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
        {font-family:SimSun;
        panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
        {font-family:Tahoma;
        panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
        {font-family:Consolas;
        panose-1:2 11 6 9 2 2 4 3 2 4;}
@font-face
        {font-family:"\@SimSun";
        panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
        {font-family:"Courier New \;color\:\#A6A6A6";
        panose-1:0 0 0 0 0 0 0 0 0 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Tahoma",sans-serif;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:#0563C1;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
p
        {mso-style-priority:99;
        mso-margin-top-alt:auto;
        margin-right:0cm;
        mso-margin-bottom-alt:auto;
        margin-left:0cm;
        font-size:11.0pt;
        font-family:"Tahoma",sans-serif;}
pre
        {mso-style-priority:99;
        mso-style-link:"HTML Preformatted Char";
        margin:0cm;
        margin-bottom:.0001pt;
        font-size:10.0pt;
        font-family:"Courier New";}
p.msonormal0, li.msonormal0, div.msonormal0
        {mso-style-name:msonormal;
        mso-margin-top-alt:auto;
        margin-right:0cm;
        mso-margin-bottom-alt:auto;
        margin-left:0cm;
        font-size:12.0pt;
        font-family:"Times New Roman",serif;}
span.EmailStyle19
        {mso-style-type:personal;
        font-family:"Tahoma",sans-serif;
        color:windowtext;}
span.HTMLPreformattedChar
        {mso-style-name:"HTML Preformatted Char";
        mso-style-priority:99;
        mso-style-link:"HTML Preformatted";
        font-family:Consolas;}
span.EmailStyle22
        {mso-style-type:personal-reply;
        font-family:"Tahoma",sans-serif;
        color:#1F497D;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-size:10.0pt;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-CA" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span style="color:#1F497D">Thank you David, that approach worked!&nbsp; I added an SVG icon to the button.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">My CSS ended up like this:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">input[name=&quot;_action_create&quot;] {<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; background-position-x: 4px;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; background-position-y: 3px;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; background-size: 15px;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; background-image: url(/style/images/Iconnewitem.svg);<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">&nbsp;&nbsp;&nbsp; padding-left: 26px;<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">}<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">Tomasz<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p>&nbsp;</o:p></span></p>
<p class="MsoNormal"><b><span lang="EN-US" style="font-family:&quot;Calibri&quot;,sans-serif">From:</span></b><span lang="EN-US" style="font-family:&quot;Calibri&quot;,sans-serif"> David R Newman &lt;drn@ecs.soton.ac.uk&gt;
<br>
<b>Sent:</b> September 17, 2020 6:48 PM<br>
<b>To:</b> eprints-tech@ecs.soton.ac.uk; Tomasz Neugebauer &lt;Tomasz.Neugebauer@concordia.ca&gt;<br>
<b>Subject:</b> Re: [EP-tech] icons for form button &quot;new item&quot;<o:p></o:p></span></p>
<p><o:p>&nbsp;</o:p></p>
<div>
<p class="MsoNormal"><o:p>&nbsp;</o:p></p>
</div>
<p>Hi Tomasz,<o:p></o:p></p>
<p>You could try something like this is the CSS:<o:p></o:p></p>
<p>input[name=&quot;_action_create&quot;] {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-image: url(/style/images/help.png);<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-repeat: no-repeat;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-position: 8px 4px;<br>
}<o:p></o:p></p>
<p>There are a couple of potential issues.&nbsp; That CSS will apply to any other buttons with the name &quot;_action_create&quot; but I don't think there are many iif any other places where this is used.&nbsp; The other problem os that as this icon is in the background and the
 text is set via the phrase the text may overlap the icon so you may need to hack around with the width of the input button to fix this and/or make it look more aesthetically pleasing.<o:p></o:p></p>
<p>Regards<o:p></o:p></p>
<p>David Newman<o:p></o:p></p>
<div>
<p class="MsoNormal">On 17/09/2020 23:09, Tomasz Neugebauer via Eprints-tech wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal">This is a really basic question in a way, so I am thinking that others may have found a solution already.<o:p></o:p></p>
<p class="MsoNormal">We have phrases in EPrints, for customization, but has anyone been able to add an icon/image to some of the most important buttons.<o:p></o:p></p>
<p class="MsoNormal">The button that is perhaps the most important for OA is the &#8220;New Item&#8221; button that appears for users after they log in.<o:p></o:p></p>
<p class="MsoNormal">I think we would want that button to stand out, and adding an icon to it would help in that regard.<o:p></o:p></p>
<p class="MsoNormal">How would I do that?<o:p></o:p></p>
<p class="MsoNormal">Normally, I would do it with a piece of code like this, for example: &lt;i class=&quot;fa fa-file-text-o&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;<o:p></o:p></p>
<p class="MsoNormal">Which, combined with some CSS gets me an icon.<o:p></o:p></p>
<p class="MsoNormal">However, the only place that I see in EPrints to make this change would be in the phrases, this one:<o:p></o:p></p>
<p class="MsoNormal">&lt;epp:phrase id=&quot;Plugin/Screen/NewEPrint:action:create:title&quot;&gt;New Item&lt;/epp:phrase&gt;<o:p></o:p></p>
<p class="MsoNormal">And that string makes its way to a &#8220;value&#8221; parameter inside a form, which means I can&#8217;t add any markup to get the icon.<o:p></o:p></p>
<p class="MsoNormal">&nbsp;<o:p></o:p></p>
<p class="MsoNormal" style="mso-margin-top-alt:0cm;margin-right:0cm;margin-bottom:12.0pt;margin-left:17.85pt;background:white">
<span lang="FR-CA" style="font-size:8.0pt;font-family:&quot;Courier New ;color:#A6A6A6&quot;,serif">Tomasz</span><o:p></o:p></p>
<p class="MsoNormal">&nbsp;<o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif"><br>
<br>
<o:p></o:p></span></p>
<pre>*** Options: <a href="http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech">http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech</a><o:p></o:p></pre>
<pre>*** Archive: <a href="https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.eprints.org%2Ftech.php%2F&amp;data=01%7C01%7Ceprints-tech%40ecs.soton.ac.uk%7C2e4dc7db5e9e4655646908d85c1ab3e6%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=gcE0dzSwIGlmKhNUNd2XMb6246omwEiRp1DBPN0PVyM%3D&amp;reserved=0" originalSrc="http://www.eprints.org/tech.php/" shash="RFynn0/LJ7Kj1eiAxbRzXKz0g7T66L9xVEIRK3BIeSWdkEh+CklkdQ/9XIoG1YCtXuWb6qGGEmGEZ+ntCd+Pm1rYuYhs5gLJ7LZdDeA250bGBWxpdZaG3OxzEjloOyavwlXn/ORo0pt3+Dfx1VnX3SJfOE1h6IQfoocvzG71GSs=">http://www.eprints.org/tech.php/</a><o:p></o:p></pre>
<pre>*** EPrints community wiki: <a href="https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwiki.eprints.org%2F&amp;data=01%7C01%7Ceprints-tech%40ecs.soton.ac.uk%7C2e4dc7db5e9e4655646908d85c1ab3e6%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=V2oYbUHzh%2FLeKhBRoFUgFhyDgAv9gNz0l1xXiYEKCzg%3D&amp;reserved=0" originalSrc="http://wiki.eprints.org/" shash="FTtHKPZBWWEcv6FG/6hNdMlUHbCHiBmR4r2thA3xDP/b2na5CjhjEn58LRbaN0kbQYOEJHjsSt3u1hFXAzTBf51RT+eLHAWwjoa1DulEDpwBxYZUdz7C8CbvDR7edmB5WHo4427/qGriXfu7yJdAnCWVwu/eg1EFzV+7JqP0Ce4=">http://wiki.eprints.org/</a><o:p></o:p></pre>
</blockquote>
<div id="DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2">
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif"><o:p>&nbsp;</o:p></span></p>
<table class="MsoNormalTable" border="1" cellpadding="0" style="border:none;border-top:solid #D3D4DE 1.0pt">
<tbody>
<tr>
<td width="58" style="width:41.25pt;border:none;padding:9.75pt .75pt .75pt .75pt">
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif"><a href="https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.avg.com%2Femail-signature%3Futm_medium%3Demail%26utm_source%3Dlink%26utm_campaign%3Dsig-email%26utm_content%3Demailclient&amp;data=01%7C01%7Ceprints-tech%40ecs.soton.ac.uk%7C2e4dc7db5e9e4655646908d85c1ab3e6%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=WTM4NvJHq%2BpZj3Kvhdm1De9J%2BxVX4NTogFy8ucntTJw%3D&amp;reserved=0" originalSrc="http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=emailclient" shash="yl9qgIBML13JL4hejZp/sOd4W1vmm3ae8w1rPzlc93Yjb/2XaSWuUmfhkpz0KTNDsWOcNsgmWtGJ7NaoQuIGdJo7tRdUsyGrm8FODusgXiJFm9gYTfn/eN90NTdkPa5GjoJIzcVohmrgFhW1GIE6iMW87j5UF1c7XMUHy0AoDTg=" target="_blank"><span style="text-decoration:none"><img border="0" width="46" height="29" style="width:.4791in;height:.302in" id="_x0000_i1025" src="https://ipmcdn.avast.com/images/icons/icon-envelope-tick-green-avg-v1.png"></span></a><o:p></o:p></span></p>
</td>
<td width="473" style="width:352.5pt;border:none;padding:9.0pt .75pt .75pt .75pt">
<p class="MsoNormal" style="line-height:13.5pt"><span style="font-size:10.0pt;font-family:&quot;Arial&quot;,sans-serif;color:#41424E">Virus-free.
<a href="https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.avg.com%2Femail-signature%3Futm_medium%3Demail%26utm_source%3Dlink%26utm_campaign%3Dsig-email%26utm_content%3Demailclient&amp;data=01%7C01%7Ceprints-tech%40ecs.soton.ac.uk%7C2e4dc7db5e9e4655646908d85c1ab3e6%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=WTM4NvJHq%2BpZj3Kvhdm1De9J%2BxVX4NTogFy8ucntTJw%3D&amp;reserved=0" originalSrc="http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=emailclient" shash="yl9qgIBML13JL4hejZp/sOd4W1vmm3ae8w1rPzlc93Yjb/2XaSWuUmfhkpz0KTNDsWOcNsgmWtGJ7NaoQuIGdJo7tRdUsyGrm8FODusgXiJFm9gYTfn/eN90NTdkPa5GjoJIzcVohmrgFhW1GIE6iMW87j5UF1c7XMUHy0AoDTg=" target="_blank">
<span style="color:#4453EA">www.avg.com</span></a> <o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif"><o:p>&nbsp;</o:p></span></p>
</div>
</div>
</body>
</html>