Unwanted Transition Effects - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Unwanted Transition Effects

MV

Marco Vincoli

Helix Framework 3 years ago

Hello,

using Helix Framework I note two trasitions effect that I would eliminate:

  1. site pages open with a zoom-like effect; I tried putting in the custom.css the instruction a, a:hover, a:focus, a:active {transition: 0 ms} but it is not the right one
  2. all links, in the focus and active state, are transformed to a lower font (see e.g. https://www.galileivr.edu.it/galileivr4/amministrazione/segreteria ). I can't find any way to eliminate this effect.

Also, in the last section of the footer (class footer-pers), I imposed the custom css that includes the color

.footer-pers a:hover, a:focus, a:active {color: yellow !important}

However, I also find the yellow color in other links too, where I have not imposed it. If I remove the !important attribute from the CSS, the yellow color is not applied to any link (not even the footer link).

Can you give me some suggestions? Thank you in advance.

Note: I Use PHP 7.4 because this site is actually in construnction, in a subdirectory of a site in Joomla! 3.10, which is not compatible with PHP 8.x

0
5 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #92833

You are welcome 😊

Please accept the answer that helped you. It will be then easier to find the solution for the other users with the same issue. There is a button to accept answer after each comment.

0
Pavel
Pavel
Accepted Answer
3 years ago #84978

Hi.

  1. Perhaps you did not correctly explain. I do not see Zoom effect. And this does not exist in Helix. Perhaps you mean the animation of Header. If so, use the following code.
#sp-header {
    animation: none !important;
}
  1. I did not see the problem of which you are talking about

.footer-pers a:hover, a:focus, a:active {color: yellow !important}

Not the right code

Here is

.footer-pers a:hover, 
.footer-pers a:focus, 
.footer-pers a:active {
    color: yellow !important;
}
/*Or*/
.footer-pers :is(a:hover, a:focus, a:active) {
    color: yellow !important;
}
0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #84981

Hello Marco Vincoli

Please follow Pavel's suggestion. Your CSS code was mistyped as he showed. If you use 

.footer-pers a:hover, 
a:focus, 
a:active {
    color: yellow !important
}

it would apply to .footer-pers a:hover only. Not in .footer-pers a:focus or .footer-pers a:active. It will apply to all a:hover, a:active instead.

For the all anchor link font size when hover, focus or active, you can try this CSS. 

a:hover, 
a:focus,
a:active {
    font-size: 20px !important;
}

Best regards

0
MV
Marco Vincoli
Accepted Answer
3 years ago #85000

Thank you Pavel and thank you Ofi.

I followed your suggestions and the link problem seems to be solved. For the first question, I try to explain it better:

when I open a new page with an internal link, the whole page is composed with a zooming movement from inside to outside that I would like to eliminate. You can try any one of the links in this page: https://www.galileivr.edu.it/galileivr4/amministrazione/segreteria Header is not interested in this effect, it remains fixed (as I want).

Thanks again for your help.

0
MV
Marco Vincoli
Accepted Answer
3 years ago #85125

Hello,

I corrected another error in CC, similar to the one you pointed out to me, and the unwanted transition disappeared.

I thank you both for your help

0