Classic theme: avoid logo yellow highlight when hovered

Software Support
1

Hi there,
I hope this could result useful also to others using the Classic theme (I am currently using the latest 1.02 on ojs 3.1.2-4).
I have noticed a strange behavior of the website on the logo when I decide to use a image as a logo in substitution to plain text. I know that it is generally suggested to prefer the text, for the mobile version of the website, but somehow I really need to upload an image because it is one of the elements which most give the “identity” of the journal. I will try to upload an image as a logo which could fit in any device.
So, the strange behavior is that when I pass with the mouse over the logo-image, it gets a yellow stripe on it, as if it was a normal link. I attach hereby a screenshot which shows the situation I am trying to describe. I have tried to “detect” the css code which regulates this behavior, but, if I am not wrong, it relies also on all the links. So if I delete if for the logo, it will also affect the normal style behavior of all links, which is something I would like to avoid. In any case, this would be the relevant code if I am not wrong, in the css:

a:hover, a:active, a:focus {
color: #000;
text-decoration: none;
background-color: #ffd120;
}

Does somebody know how could I overcome this problem, avoiding the yellow strip to show up if I use a logo as an image and when I try to go over it with the mouse?
I would be really helpful to anyone willing to the help me on this.
Best regards
Leonardo17

2

Hello there,

I don’t know if this can be useful or not, but I have thought about a possible solution to avoid this yellow line over the logo. Shortly, the only way would be to unfortunately create a child-theme and then somehow insert in the php code a class that would say to not apply to the logo any pointer effects (in this case, the hover effect).
Could that work? I see some other journals which have managed to solve the problem somehow, but I don’t know how since they have not written in the forum about this.
Best wishes for a happy 2020.
Leonardo

3

Hi everyone,

I don’t want to annoy too much with this issue, but it seems to me a relevant one in relation to Classic Theme. Would that be possible to insert in the list of fixes for the next releases? I still can’t keep avoiding this logo to be highlighted with a yellow stripe. I see some journals have probably found a way to avoid this, but they didn’t share a solution in the forum apparently at this regard.
While thanking you in advance for your attention, I send you my best regards.
Leonardo

4

Hi @leonardo.mancini,

Sorry for the late response!
Yes, I can confirm the problem. Can you open an issue on the plugin’s Github page?

5

Hi @Vitaliy,

et voilà: Avoid logo yellow highlight when hovered · Issue #54 · pkp/classic · GitHub
Vielen Dank.

1 Like
6

Dear @Vitaliy,

sorry to bother you, but just to have an idea: which is usually the roadmap with issues?
I am asking, because I am wondering if this issue on the logo could be solved in the next future, or if I start thinking about switching theme.
Would you any info about the normal timings for issues to be solved?
Thank you very much and best regards
Leonardo

7

Hi @leonardo.mancini,

I’ve added a fix to the master branch. Themes don’t have roadmaps but I would expect new release just after the next release of OJS.
Meanwhile, if you are handy with custom CSS, you can add and upload the following code through the dashboard:

 .home-link:hover, .home-link:focus {
  background-color: inherit;
}

The issue appears only if logo image is transparent.

1 Like
8

I am amazed!! Thank you very much.
Yours sincerelly
Leonardo

1 Like