Scroll Up (Back to top) link icon change. How to change it to a custom image

Burakpusat — Fri, 05 Dec 2014 23:50:18 +0000

Dear Support Team,

I couldn’t find a question&answer regarding this. I would like to change the “scroll up” button which appears when you scroll down.

Is it possible to do that and if it is, how? I would like add an .png file related to my website.

Thanks,
Burak

Reply To: Scroll Up (Back to top) link icon change. How to change it to a custom image

IshYoBoy — Mon, 08 Dec 2014 08:41:51 +0000

Hi Burak,

Sure it is possible. You can use Inspect Element functionality of your browser to see what CSS class the button has and then use some custom CSS to restyle it.

Its HTML structure is:

All the visual design is handled via CSS. So use the “Custom CSS” available under Theme Options to add your CSS styles. You can use the “.ish-back_to_top” class name to re-style it.

To add the PNG image you mentioned please upload it to your WordPress media library and then get its url. You can then set the button’s “background-image” CSS property. E.g.:

.ish-back_to_top {
	background-image: url('https://MY_SERVER.com/wp/wp-content/uploads/2014/04/doctype-hi-res.jpg');
	background-repeat: no-repeat;
}
.ish-back_to_top:before {
	content: "";
}

.ish-back_to_top {

background-image: url('https://MY_SERVER.com/wp/wp-content/uploads/2014/04/doctype-hi-res.jpg');

background-repeat: no-repeat;

}

.ish-back_to_top:before {

content: "";

}

Feel free to add any other CSS so that the button fits your needs.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Support ForumScroll Up (Back to top) link icon change. How to change it to a custom image – Support Forum

Scroll Up (Back to top) link icon change. How to change it to a custom image

Reply To: Scroll Up (Back to top) link icon change. How to change it to a custom image