[Resolved] Back to top arrow (since latest GP update) pointing downwards

Home Forums Support Back to top arrow (since latest GP update) pointing downwards

  • This topic has 14 replies, 5 voices, and was last updated 4 months ago by vast.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1499721
    Andrei

    Hello folks,

    David advised me to create a new topic about the back-to-top arrow.
    I’ve got 2 websites using the generatepress, and on one of them the icon is pointing downwards instead of upwards πŸ™‚

    Shared 2 urls in the section below, for further details.

    Cheers

    #1499746
    David
    Staff
    Customer Support

    Any chance you can disable the Litespeed cache on the problem site ?

    #1499801
    Andrei

    How come I didn’t think about that.. most likely it’s the caching plugin indeed as that’s the only major difference between the sites.

    Unfortunately, I’m not the only one managing the sites and I’m not allowed to disable the plugin. I’ll mark this ticket as solved then πŸ˜€

    Thanks, David for mentioning the plugin.

    Cheers

    #1499829
    David
    Staff
    Customer Support

    Yeah there was some CSS left over i assume before the last update.
    Glad to be of help.

    #1499862
    Andrei

    Yeah, you’re right.

    Disabled litespeed for a bit, cleaned CDN cache and the arrow is fine. Once I re-enable litespeed, the arrow is inversed again – guess I can live with that. At least the cause is known now πŸ™‚

    Cheers

    #1500108
    David
    Staff
    Customer Support

    If you want i can provide some CSS to resolve that? Will need to see the site again though ( Resolving a topic removes the private info ).

    #1500166
    Andrei

    Sure thing! if there’s some css magic to solve it why not πŸ™‚
    I put again the website url in the private section.

    Cheers David!

    #1500346
    Leo
    Staff
    Customer Support

    Try this CSS:

    .generate-back-to-top .gp-icon svg {
        transform: none;
    }
    #1500436
    Andrei

    Thanks Leo!

    Works like a charm!!

    #1500438
    Leo
    Staff
    Customer Support
    #1505805
    vast

    Hi Leo, David,

    When applying the filter generate_back_to_top_output, it appears to change the HTML span class from span class="gp-icon icon-arrow-up"> to `<span class=”gp-icon icon-arrow”>.

    This results in the arrow facing down rather than up. Is there a an additional attribute so that it generates the relevant HTML elements.

    add_filter( 'generate_back_to_top_output', 'tu_custom_back_to_top_icon' );
    function tu_custom_back_to_top_icon() {
        printf(
    		'<a title="%1$s" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
    				<span class="screen-reader-text">%5$s</span>
    				%6$s
    			</a>',
    			esc_attr__( 'Scroll back to top', 'generatepress' ),
    			absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
    			absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
    			esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
    			esc_html__( 'Scroll back to top', 'generatepress' ),
    			generate_get_svg_icon( 'arrow' )
    	);
    }
    #1506678
    Tom
    Lead Developer
    Lead Developer

    You should just need to replace this:

    generate_get_svg_icon( 'arrow' )

    With this:

    generate_get_svg_icon( 'arrow-up' )

    Let me know πŸ™‚

    #1506868
    vast

    Thanks Tom. That worked! It wasn’t in any of the documentation we could find.

    Would it also be possible to move inline element styles e.g. style="opacity:0;visibility:hidden;" that is currently included as an attribute in

    <a title="Scroll back to top" aria-label="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300">

    to an externalized CSS file in the next release?

    The reason is that when content security policies are applied, inline CSS styles are blocked from executing unless they are accompanied by a SHA hash for instance.

    #1506992
    Tom
    Lead Developer
    Lead Developer

    Will add it for review in 3.1 πŸ™‚

    #1507039
    vast

    Great. Thanks for looking into it. It’ll go a long way to minimizing console errors and blocked resources.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.