Scroll top anchor CSS styling

[Lorenz]

Hi,

I use a scroll top anchor on my site and i want to customize it with CSS.
I already achieved the main changes, however there a minimal things i couldn’t achieve:

I added this in the global CSS: (if theres anything to complain about, pls tell me.)

.x-scroll-top {
color: rgb(255, 255, 255);
border-color: rgb(0, 0, 0);
opacity: 0.5 !important;
width: 45px;
height: 45px;
line-height:40px;
background-color: rgb(0, 0, 0);
border-radius: 5px; }

Now i’like to change the position of the scrolltop anchor,

I tried to add a padding and margin but when i did that, the button would not dissapear again when scrolling back to top. Is it possible to change the position? Right now its in the very corner of the right, i want a bit more padding/margin on the bottom and right so its more visible.

Last thing i’d be happy to know is how to customize the scroll top anchor when hovered over.

When i hover over, the arrow turns black and dissapears into the background.
I either want it to turn into a brighter white (probably by augmenting the opacity).
Or the Background to get Darker.

Naive as I am, I tried this:

.x-scroll-top a:hover {
color: rgb(255, 255, 255);    opacity: 1 !important;  }

And Surprise!
didnt work

These are not major issues and i could live without a solution,
but im curious on how to do this.

I know its a kinda long post, Thank you for taking the time and putting in the effort.

i added my website in the secure note

[basanta]

Hi There,

To Reposition the link please use this CSS in you Theme option-> Global CSS

.x-scroll-top.right {
    right: 20px !important;
    bottom: 20px !important;
}

You can replace the value 20px with your choice.

For the hover please use this CSS.

.x-scroll-top:hover i {
color: rgb(255, 255, 255);    
opacity: 1 !important;  }

Hope this helps!

Thanks

[Lorenz]

Thanks alot!

[ruenel]

You are most welcome!