Thank you David, that approach worked!  I added an SVG icon to the button.

My CSS ended up like this:

 

input[name="_action_create"] {

    background-position-x: 4px;

    background-position-y: 3px;

    background-size: 15px;

    background-image: url(/style/images/Iconnewitem.svg);

    background-repeat: no-repeat;

    padding-left: 26px;

}

 

Tomasz

 

 

From: David R Newman <drn@ecs.soton.ac.uk>
Sent: September 17, 2020 6:48 PM
To: eprints-tech@ecs.soton.ac.uk; Tomasz Neugebauer <Tomasz.Neugebauer@concordia.ca>
Subject: Re: [EP-tech] icons for form button "new item"

 

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

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: http://www.eprints.org/tech.php/

*** EPrints community wiki: http://wiki.eprints.org/