Change header color not working

The option to change the header’s color doesn’t seem to be working:

I want to change the color but it always comes back to the default blue color.

This is at the Site Administration level.

We’re using OJS 3.0.2

Do you see any messages in the javascript console, or in the server error log? Are you not seeing the Color indicator itself change, or are you only not seeing the new color when you navigate back to the public view of the site?

JavaScript console doesn’t show anything. I even get a confirmation notification:

But if I refresh the page, the color picker is back to blue.

Does this change apply only to the public site? How do I change the left sidebar color? Via CSS only?

Yes, these settings only affect the public site. If you click on “View Site” after your save, do you see the updated color?

The backend/management interface can be controlled by CSS changes (but not by uploading a CSS file at that screen).

The changes appear at the Portal level, but not at the journal level. Is this the expected behavior?

The backend/management interface can be controlled by CSS changes (but not by uploading a CSS file at that screen).

Where/How can I change the CSS? What is the path for the CSS that controls the left sidebar and where do I upload the updated file?

If you have multiple journals installed under your site, you can (and will need to) change Website Settings for each one independently.

I don’t think there is a way in the UI to customize the backend/management look and feel. I think this is best done via a theme plugin - in the absence of @NateWr, @asmecher might have some pointers.

Hi all,

To customize the back-end, a plugin will be required. There aren’t any examples of this that I’m aware of – nobody has raised this yet – but if you look at e.g. this segment of code you’ll see how different contexts are specified for added CSS files.

Alec Smecher
Public Knowledge Project Team

1 Like

HI @alexxxmendonca,

Although a theme plugin is really designed to modify the frontend, you can also modify the backend styles with it. The theming guide outlines the basics of how you’d go about this:

1 Like

Even my header isnt turning white (Even after applying white color to the header in the settings). Site:

I think this question is the same as your post here:

Yes, i had to upload a .css file to change the color to white. But, then the user font color was also white so it became invisible and hence had to delete the .css file.


In my instalation this function is not working.
No error in apache log, no error in console.

The plugin saves the color I want, but no visible change in public interface. Even cleaning cache.

Any sugestions?

Tarcisio Pereira.

@Tarcisio_Pereira, are you using the default theme, or any custom themes? Can you share a link to your site?

Hi @ctgraham

I’m using the default theme, but I can’t share a link. It’s a test installation.
I intend to use a custom theme too, this one: GitHub - NateWr/defaultManuscript: A clean, simple OJS 3 theme with a boxed layout that mimics a paper document.
In both color change is not working.

Tarcisio Pereira

I would hard refresh (shift-F5) the browser to clear any caching, then check the CSS with the browser’s web inspector.

By default, the header#headerNavigationContainer is styled with:

.pkp_structure_head {
    background-color: #1e6292;
    border-bottom: 1px solid #ddd;

Changing the color should change the background-color directive here. Does this change? Is anything else overriding it?

1 Like

Hi @ctgraham

Sorry about my delay.
There was a problem in my test installation.
I reinstalled and everything is ok.

Tarcisio Pereira.