Can I change the colour and position of the scroll top anchor button?

[core365]

Hi, I’m using the scroll top anchor button on my site and I can’t find where to change the colour of it. Also, is there a way of changing the position so it’s in the centre of the screen instead of being aligned to the left or right?

I’ll put the URL in a secure note as it’s being built on a temporary link.

Thanks!

[Prasant]

Hello @core365,

Thanks for reaching out.

Please add following CSS under X > Theme Options > CSS:

.x-scroll-top {
    border-color: #b53b3b;
    color: #fff;
    bottom: 90px !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[core365]

Hi, thanks, I’ve added in the CSS, however it’s moved the button slightly higher up and is still aligned down the right hand side, whereas I was hoping for it to be in the centre of the screen. The CSS for the colours works though, which is great, thanks!

Cheers

[ruenel]

Hello @core365,

To resolve your issue, please have your code updated and use this instead:

.x-scroll-top {
    background-color:#b53b3b;
    border-color: #b53b3b;
    color: #fff;
    left: 50%;
    bottom: 10px !important;
    margin-left: -21px;
}

We would loved to know if this has work for you. Thank you.

[core365]

Hi, it’s worked! Thank you, it’s much appreciated!

Cheers!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.