.x-scroll parameters - modifying scroll to top

Support
#1

I’m trying to modify the scroll to top button on my site
http://blog.myoshka.com/blog

I need the button to be solid black with white arrow
IF POSSIBLE: On hover I’d like the colours to invert.

I haven’t been able to find parameters to control alpha.

the CSS is currently:

.x-scroll-top {
border:none;
background-color: #000 !important;
}
.x-icon-angle-up:before {
color: #fff !important;
}

Thanks in advance.

#2

Hi there,

Please kindly add the CSS code below to Pro > Theme Options > CSS:

body .x-scroll-top.in {
    border-color: black;
    background-color: black;
    opacity: 1;
    transition: all 300ms;
}

body .x-scroll-top.in i:before {
    color: white !important;
    transition: all 300ms;
}

body .x-scroll-top.in:hover {
    border-color: white;
    background-color: white;
    opacity: 1;
    transition: all 300ms;
}

body .x-scroll-top.in:hover i:before {
    color: black !important;
    transition: all 300ms;
}
  1. I have found the proper CSS code selector using the Chrome browser Developer Toolbar.
  2. For the CSS code itself, I suggest that you get started with this tutorial.

Thank you.

#3

Thanks this worked nicely

  • I have been using the toolbar to make modifications but I’m still learning as I go. I did find snippets in the toolbar and started modifying before you sent your reply. I had some luck but not as good as your fix.

I’ll check out those articles as there’s lots to learn…

I’ve been trying to figure out how to change from circle to square graphic on this. My buttons are set to square in the theme but doesn’t affect the scroll to top function. Is this another custom CSS to change, or am I missing a setting in the theme somewhere?

Appreciate the support.

#4

I have found the proper CSS code selector using the Chrome browser Developer Toolbar.
For the CSS code itself, I suggest that you get started with this tutorial.

links not working +(

#5

Hi there,

First of all sorry for the problem in the links, it was an error from my part here is the links:

https://www.w3schools.com/css/

Regarding the second question, we used the border-radius: 50% to make the button look round. You can change that by making it: border-radius: 0;. Here is more information about that CSS property:

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

So you will need to change the suggested CSS code to:

body .x-scroll-top.in {
    border-color: black;
    background-color: black;
    opacity: 1;
    border-radius: 0;
    transition: all 300ms;
}

body .x-scroll-top.in i:before {
    color: white !important;
    transition: all 300ms;
}

body .x-scroll-top.in:hover {
    border-color: white;
    background-color: white;
    opacity: 1;
    transition: all 300ms;
}

body .x-scroll-top.in:hover i:before {
    color: black !important;
    transition: all 300ms;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#6

border-radius - so simple.
I won’t miss that again.

Appreciate the help - I’ll make sure to keep additional questions in separate threads.

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.