[EP-tech] icons for form button "new item"

David R Newman drn at ecs.soton.ac.uk
Thu Sep 17 23:47:46 BST 2020


Hi Tomasz,

You could try something like this is the CSS:

input[name="_action_create"] {
         background-image: url(/style/images/help.png);
         background-repeat: no-repeat;
         background-position: 8px 4px;
}

There are a couple of potential issues.  That CSS will apply to any 
other buttons with the name "_action_create" but I don't think there are 
many iif any other places where this is used.  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.

Regards

David Newman

On 17/09/2020 23:09, Tomasz Neugebauer via Eprints-tech wrote:
>
> This is a really basic question in a way, so I am thinking that others 
> may have found a solution already.
>
> We have phrases in EPrints, for customization, but has anyone been 
> able to add an icon/image to some of the most important buttons.
>
> The button that is perhaps the most important for OA is the “New Item” 
> button that appears for users after they log in.
>
> I think we would want that button to stand out, and adding an icon to 
> it would help in that regard.
>
> How would I do that?
>
> Normally, I would do it with a piece of code like this, for example: 
> <i class="fa fa-file-text-o" aria-hidden="true"></i>
>
> Which, combined with some CSS gets me an icon.
>
> However, the only place that I see in EPrints to make this change 
> would be in the phrases, this one:
>
> <epp:phrase id="Plugin/Screen/NewEPrint:action:create:title">New 
> Item</epp:phrase>
>
> And that string makes its way to a “value” parameter inside a form, 
> which means I can’t add any markup to get the icon.
>
> Tomasz__
>
>
> *** Options: http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech
> *** Archive: https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.eprints.org%2Ftech.php%2F&amp;data=01%7C01%7C%7C0c554a8559c0490918f408d85b5bb303%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=ie47WGKsNd3TQ264bf7Ekm4hbMuTttn6tBDAwkB%2BL70%3D&amp;reserved=0
> *** EPrints community wiki: https://eur03.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwiki.eprints.org%2F&amp;data=01%7C01%7C%7C0c554a8559c0490918f408d85b5bb303%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=ZeiZVQllKa5R%2FNGw9cHNrYPyEkThBWzW1GciUsrKTis%3D&amp;reserved=0


-- 
This email has been checked for viruses by AVG.
https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.avg.com%2F&amp;data=01%7C01%7C%7C0c554a8559c0490918f408d85b5bb303%7C4a5378f929f44d3ebe89669d03ada9d8%7C0&amp;sdata=vYznkqF6N6XXi4NRx%2FrjiM11mLNuMWsP5CKmY9Vu7%2F8%3D&amp;reserved=0
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/eprints-tech/attachments/20200917/4a38f81d/attachment-0001.html 


More information about the Eprints-tech mailing list