Help customizing a theme in OJS 2.4.7.1

Software Support
1

Hello everyone,
I’m new to OJS and our University department need some changes in the site.

I managed to copy the CSS and the HTML files from the page so I could locally make all the changes I needed. I have already some CSS and HTML skills so it wasn’t a problem modifying the stylesheet. Basically is using the same theme but with all the modifications I want (BlueSteel theme).

However, my changes includes a Banner that has a different size from the original one, I could see it how it could look with all the CSS instructions and all, but the image itself is located in the HTML file, not in the CSS, so when i want to change the theme to my custom theme, OJS only let me upload the Stylesheet but I would like to know where I can modify the banner section in the Admin settings from OJS so I can upload al the changes I need.

I tried everything to understand how to make it in the forum but I’m still struggling about how does OJS archives work, maybe there’s something i’m not understanding well, so please let me know about something i could be missing.

This is how it’s look before all my changes:
antes

This is with all the changes I want to make:
despues

Thank you very much in advance and I hope you can guide me

2

In Journal Setup 5.1, try changing the Journal Title back from “Title image” to “Title text”, and then use CSS to hide #headerTitle h1 and place a background image on #headerTitle. This is better semantically than using the image as the title anyway.

3

Thanks for your answer, I’ll try that. How does OJS interpret the images i put in the CSS file? what’s the main directory for it, because i’m not sure where I can upload the images and which folder do I have to put in the url source.

4

Your custom CSS will be delivered from the path ./public/journals/{id}/journalStyleSheet.css under your OJS root.

You can use the TinyMCE jbImages plugin (“upload an image” in any rich text box, say, from the Setup page) to upload an image to ./public/site/images/{username}/{imagename}, or your can manually place the image on the server under the “public” folder if you have file access.

Thus, from the CSS file you could reference this with a relative path:

background-image: url(../../site/images/ben/header.png);

or an absolute path:

background-image: url(/ojs/public/homepage-header.png);