Changing the site header

Software Support
1

Hi.I’ve installed the ojs3 and now I’m trying to customize the look of my journal. I’ve read many articles but couldn’t find the answer. As I understand in ojs2 there was an option to choose whether the header to be just the site title or to upload an image and use it for a header. The problem is that I cannot find a way to do this in ojs3. Can you help me? Is there an option or plugin or something else that i must use? In other words:
How can I change the header of the site and use instead of the original header a header image?

2

This specific option is not present in OJS3. You can instead use CSS to do this out of the box.

Consider, for example, a stylesheet with a declaration of:

h1.pkp_site_title {
   text-indent: -999px;
   background-image: url(/ojs/public/site/sitelogo.jpg);
   background-repeat: no-repeat;
}

Alternately, you can use a theme plugin such as the bootstrap3 theme, which will require a lot more work, but allow substantial flexibility:

1 Like
3

We’re discouraging the use of header images in OJS 3. In our experience, many journals used them to upload header images with critical content, like the name of the journal. That technique doesn’t work well for small screen devices, like mobile phones, because the text is often shrunk to a size at which it is no longer readable.

If you’re using the header image for a purely decorative background, then go for it. But if it includes text, like a journal’s name, motto or description, make sure to test how this looks on a mobile phone. If the text is not readable, consider an alternate approach.

2 Likes
4

Where exactly should I add that code if the theme is Default Manuscript Child Theme?

Thank you very much.

5

I’m not familiar with the Default Manuscript Child Theme, but in general, CSS overrides should be made via your Journal Style Sheet:
https://pkp.gitbooks.io/ojs3/content/en/website_settings.html

6

Hi there,

I’m using manuscript theme and I want to upload the logo do you know the exact size of the header?

7

I have tried this but nothing will show up in my customer css to replace the background but no changes
im using manuscritpt theme.
.pkp_structure_head {
background-image: url(‘http://mysite/ameclogo2.jpg’);
background-repeat: no-repeat;
}

8

Hi Nate, I find that your post here is similar to our journal. We are using OJS v.3.2 November 2020 build and using an image that has the name of the journal. The look perfectly works on a bigger screen (>1000px) but while on a smaller one like on the mobile phone, the logo as a header did not fit its place.
I already apply the CSS code, but doesn’t work for this field. Any advice for me? Here is the journal link Health Information : Jurnal Penelitian .

Thank you

9

Unfortunately, that logo as-is just won’t work well on a mobile device. We don’t support different logos for mobile and large screen views, so you’ll need a logo that works for both. I don’t know if you have any influence on the logo choice, but I’d recommend a more horizontal layout like this:

hijp

1 Like
10

Thank you Nate … We moved not to use long logos anw :sweat_smile: and making the header more simple…

1 Like