How change OJS footer image?

Software Support
1

OJS 3.4.0.5 - how can I change the footer image shown on the front and other pages?
I want a new footer image with my logo and site title.
This is not the same as adding some text via css to the existing footer image.

2

try such a css:

.pkp_brand_footer img {
  background: url(https://upload.wikimedia.org/wikipedia/commons/f/f8/Graffiti_Vinnytsia_2022_G1.jpg) no-repeat;
    background-size: auto;
  background-size: 150px 64px;
  content-visibility: hidden;
  width: 150px;
  height: 64px;
  max-width: unset;
}
1 Like
3

Thank you! Will try it.
I’ll have to look to see how/where to add a new css like this.
Can it reference a local file image, or needs to be a URL?
(love your sample image!)

4

You can add stuff to the footer by going to the:
website configuration => appearance => footer
path: management/settings/website#appearance/appearance-setup

And then you can paste a custom HTML by clicking in the “<>”. For example, mine is:

<div class="custom_footer_content">
<div style="display: flex; align-items: center;"><img style="width: 100%;" src="https://domain.domain/public/journals/1/pageHeaderLogoImage_pt_BR.png" alt="Logo" /></div>
</div>

The src image I took from the journal logo.

But this will not remove the standard OJS logo (in my case I choose to put side by side).

The custom CSS, like what @cager proposed you may upload in the Advanced part from Appearence.
Path: /management/settings/website#appearance/advanced

My related custom CSS is:

.custom_footer_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pkp_structure_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pkp_structure_footer_wrapper {
    background-color: #081434;
}
  
.pkp_footer_content {
    display: flex;
    align-items: center;
}

.pkp_brand_footer img {
    filter: invert(1);
}

The result:

Captura de tela de 2024-08-09 10-28-29
Captura de tela de 2024-08-09 10-28-29909Ă—157 23.5 KB

1 Like
5

Wonderful - many thanks.
A new adventure…

6

Thanks - but I an not clear how to merge these two suggestions.
I can paste in the code you gave into management/settings/website/appearance/setup but as I think was described, then one huge version of my image is inserted above the standard branding footer.
The @cager code if inserted similarly - just shows up as text in the footer - I think I just don’t know where to put the ```
.pkp_brand_footer code, and same for your other .custom and .pkp code fragments.
Sorry for the naivete - css is not one of my areas!
What I want is just like what you showed, add my logo with a transparent background onto the current default footer image.

7

The CSS should be put like the image attached, not where I said to put the HTML part (my install is in Portuguese). So, I think would be easier for you to follow @cager solution.

image
image1016Ă—329 21.6 KB

8

ok, thanks.
I copied the @cager text and put it into a local custom.css file, and then under administration/Settings/Website/advanced JournalStyleSheet uploaded that file as (I think) you advise.
Then cleared the data and template caches, but see no result of change in the footer.
Trying your html example did add my logo, but oversized and above the footer
So - no HTML, my.css with @cager data (and my graphic, gives me two footers, one with my large icon above the standard footer image.
Adding your css to try to scale it, didn’t work. ??

9

The upload sounds ok. The thing about my example is it is for the “default” theme. So needs to be adjusted for other themes and other css you put in. But it sounds like you got some conflicting leftovers somewhere in your settings.

I think the other issue is that the “Additional Content” section is not really for html and css. The content is cleaned and transformed - so all but a few allowed codes are removed, but also some codes displayed as text instead of doing their thing.
To add to the confusion - there would be a “custom header” plugin that allows putting unmodified code in.

1 Like