defaultManuscript - add background image

Software Support
1

@NateWr

I am trying to add a background image to site footer. (actually, new div with sprite image)
I have created new folder images in plugins/themes/defaultManuscript with image.png.

I am trying to load that image in styles/layout.less, with css command
background-image:url("…/images/image.png") but I’ve only got following error “Failed to load resource: the server responded with a status of 404 (Not Found) image.png”

Than I tried background-image:url(“images/image.png”) and many other paths, but none of them worked.

Can you help me with correct path, or right place to put image?

2

Hi @Dragoljub_Djordjevic,

Have you tried saving the image to the ‘template> image’ folder and linking from this folder on your css? I found that this worked for well for me when I was adding a full header image and worked on a footer as well.

Kind Regards,
Patricia M.
Public Knowledge Project Intern

3

Thanks, I’l try tomorrow. I’ll let you know if I made it

4

I can insert image with tag in .tpl file, but I don’t know how to load image as background image in layout.less file

5

Hi @Dragoljub_Djordjevic,

If you only need this for one installation, I recommend using the full HTTP path to the image, rather than a relative path. That will be something like this:

http://your-site.com/plugins/themes/your-theme/path-to-your-image.png

Alternatively, you can use the Theme API to add a pre-rendered .css file, and in that case the relative URLs will work.

6

Ok, I’ll try that. Currently site is on localhost, and I managed to upload image to 3rd party img upload site and it works… I’ll change it once site goes to production server. Thanks

7

Can you help me find out where is this part of journal title coming from?

title

When I coment out lib/pkp/templates/frontend/components/headerHead.tpl
#21 {load_header context=“frontend”} this part of title is gone, but I’m not sure if anything else is affected?

Not all journals have this part of title, only couple of 50…

Thanks

8

If you send the link to the journal I’ll take a look and see if I can identify where it’s coming from through the HTML output.

If it’s still only on localhost, you can use the Inspect Element of your browser’s dev tools to find it in the HTML elements, and send me a screenshot of that. (How to inspect elements.)

9

Here it is, please take a look:

Capture

10

background-image: url(’…/…/…/…/…/…/plugins/themes/default/images/backgraund.jpg’);

1 Like