"Classic theme" header colour

Hello,

after having observed and tired the different templates, I have decided to use the “Classic theme”.
I would not like to make actually any graphical change to it, but I have noticed that one specific is almost impossible to avoid: the black color in the header banner.
Since it is completely black, the menu items, when passed on with the mouse, become almost impossible to read (dark red on black is not easily readable). I am actually color-blind; but I think this issue overcome my ability to distinguish the colors.
So, in any case, I attach here a screenshot of the menu, so that you can see the situation by yourself.
Do you think you have an idea about how can I change that black colour? In the theme settings there is only the possibility to change the yellow color of the footer unfortunately.
All the best,
Leonardo22

Hi @leonardo.mancini,

Can you specify OJS and Classic theme plugin version that you are using?

Hi @Vitaliy,
thank you very much for your answer. I am using the latest version of the two: OJS 3.1.2-4 and Classic Theme 1.0.2.
Best,
Leonardo

Thanks for the report. I see that the issue is open but not resolved yet: Make sure all text is readable when using black as primary colour · Issue #49 · pkp/classic · GitHub

Thank you Vitaliy for showing me the issue on the development site.
While waiting it to be resolved, I wonder if I could not just overcome it by completely changing the black color for the header. That would be in any case my goal, as I would like to change the color.
In order to do this, I should act directly on the CSS?
I have seen on the website “source” that the #000 could theoretically easily changed on the css .header instruction. In the example I attach you here, I have tried using a red color.
In order to obtain this, should I create a child theme? I am a bit worried about it, because I have read the documentation about it and I didn’t fidn a step-by-step guide, which I would really need. Or more easily, could I just upload a css additional file under “Settings > Website” in order to give only this instruction? In my case, that would be? But how would this CSS file need to be created for the rest of it? Do you maybe have a facsimile?

.header {
background-color: #ff0939;
padding-top:7px
}

Last but not least, could I just change this instruction in the correspondent css file where it is given at the moment? In that case, I didn’t find in which file that could be.
I have seen some journals which have managed to show the header in white, and to just leave a colored stripe for the menu, still on Classic theme: but that, I couldn’t really say how they have managed to do that.
Sorry for asking so many questions to you. I hope at least this would also come to be helpful for future readers as well.
With all my best regards and best wishes for the new year.
Leonardo19

Yes, it’s enough just to upload CSS through website settings, no need to create a child theme. Just create a file with extension css, say custom.css, with your code and upload it through the form. You can always delete or change it if needed.
Your code looks good but I’d avoid bright red in the header as it draws to much attention.

For the white color you’ll need more than that as it affects menu items and journal title. You may use something like:

.nav-item, .journal-logo-text {
  color: #000;
}

alongside with:

.header {
  background-color: #fff;
}

You may also want to make additional changes, like border-bottom to the header to delimit it from the body as both of them have white background and/or color of the nav-item`s text on mouse hover or focus.

Hi @Vitaliy, hi everyone,

I don’t know if this can be useful, but I have tried to make some workaround with the css, also following your suggestion, and I am arrived - on a empiric way - to the following:

.nav-link:hover, .nav-link:focus, .nav-link:active {
background-color:#ffd120
}

Adding this code with the custom.css, the result would partly solve the issue we were discussing. I attach here a screenshot.17
I am not saying that this is beautiful visually: I have such a difficult time while choosing beautiful colors, when on the web. Maybe I should make the background of a different colour, instead of red? But which colour is beautiful? Maybe something else instead of yellow for the “hover” effect? Maybe, I really can’t say.
Thanks again for your support here on the forum.
Best regards

Hi @leonardo.mancini,

This shade of red looks much better! Yellow and red look good at pairing. When picking colors for a site, I suggest keeping in mind logo colors, design of issue covers (if exist), main disciplines covered, etc.

1 Like