[Support request] Back to top button change

[Harris]

Hello
Can you please assist me to change the default “back to top” button with an image (png)?
Can you also assist me in moving it from the right side of the screen to the left please?

Thanks
Harris

[David]

Hi there,

what type of image are you wanting to change it to? Will it be an SVG Icon or an image (jpeg/png)?

To move it to the left add this CSS:

.generate-back-to-top {
    right: auto;
    left: 30px;
}

[Harris]

Hello!
Thanks for the reply.
It would be a png (already mentioned it).

If you could also provide code for an svg it would be nice for future use.

[David]

Doh – must get more coffee or some new eyeballs

Try adding this PHP Snippet:

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" rel="nofollow" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
			<img src="https://myURL.com/wp-content/uploads/2019/12/image-file.png" alt="back to top" />
			<span class="screen-reader-text">%5$s</span>
		</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' ) ),
		__( 'Scroll back to top','generatepress' )
	);
}

Update the <img src="https://myURL.com/wp-content/uploads/2019/12/image-file.png" alt="back to top" /> line for your image URL. This can also support an SVG file or be replaced with your <SVG> HTML

[Harris]

Hello!
Thanks once again.
Left alignment doesn’t seem to be working. I added the css to “simple css”.
And is there some way to remove the gray overlay(or is it a background) and the hover effect overlay?
Just keep the image in its original color in all states.

[Ying]

Hi Harris,

The link you provided needs a username and password.

Can you provide that? Thanks!

[Harris]

Oh sorry! Its the staging site that needs credentials.
I have provided them

[Ying]

I believe there’s an error in the code before David’s CSS in simple CSS.

Can you try to remove the other CSS to test?

Let me know 🙂

[Harris]

Hello,
Yes, there was an unclosed bracket. I fixed it and it properly aligns on the left.
Can you please help me on the other part of the question?

“is there some way to remove the gray overlay (or is it a background) and the hover effect overlay?
Just keep the image in its original color in all states.”

[Elvin]

Hi Harris,

The hover effect you see is from this CSS:

a.generate-back-to-top:hover, a.generate-back-to-top:focus {
    background-color: rgba( 0,0,0,0.6 );
    color: #ffffff;
}

It’s the background color change. You can change this value on Appearance > customize > Color Footer. It’s these 2 settings – https://share.getcloudapp.com/wbu6bPnm

[Harris]

Thanks everybody.
Everything working fine.

[Elvin]

No Problem. Glad to be of any help. 😀

[Author]

Posts