How can I change the scroll to top icon colour and shape?

I Need Help
1

Hi,
I didn’t use Blocs for a while, but I remember being capable of changing the shape and colour of the scroll to top arrow on Blocs 3 by changing the typo (in the class manager). Unfortunately, it doesn’t work anymore.

Can you help me?

2

We have a Blocs Byte video that covers this.

3

I already watched the video and it explains only how to change the colour of the background.
I can also change the shape and make it round, but it doesn’t explain how to change the icon inside’s shape and colour.

4

It’s an SVG and there is a subclass to target it. You can get more info in the Blocs docs.

1 Like
5

OK. Great.
I managed to change the colour and can also change the thickness of the arrow, but I’d like to make it shorter and can’t figure out how to do it.

6

By the way on the subclass reference guide.
Regarding the Special Navigation Close Symbol
It says “The class used to give the Special Navigation Menu Close Symbol its visual appearance. The key class rule to change for this subclass is the text colour.”
It’s actually not the text colour that is working, but the background colour.

1 Like
7

Im afraid that is not possible.

8

Thanks for the heads up. I have just updated that.

1 Like
9

this is really good thank you for sharing with us

1 Like
10

Hi, @Muppet. Alternatively you create your own scroll to top button:
Kapture 2021-08-13 at 04.54.47

Documentation here: How To Create a Scroll Back To Top Button

Blocs file to get you started here:
My Fancy Scroll to Top.bloc (1.4 MB)

4 Likes
11

Oh, cool!

Thanks Jerry. I’ll have a look.
I’m not a big fan of the long arrow we have by default and feel frustrated with it.
So, if I can create something else I’m more than happy.
I love this community. Always supportive people.
Have a nice weekend.

12

It’s a pity that what we could easily do before is not possible anymore :cry:

13

thank you for sharing with us..

14

I don’t think updating the icon in the scroll to top button has ever been possible in Blocs.

3 Likes
15

On the previous version the original arrow was smaller and I could make it thinner or thicker if I wanted for what I remember.

16

Hi @Muppet

I like it much better as it is, but do not forget you can create this as an image too if you like and bring it into blocs. Not sure if this is the best way to do it ! but for something bespoke, it worked and my client loved it - have a play around with the classes, @Norm has added them on and it makes for more flexibility in my mind.

I did a small live stream site for a famous fast food company which was for just 2hrs ! and I can not show the content - but I can show the icon I made: I did a nice little scroll to top icon for them which worked lovely! - no arrow on it, I removed that, but they all know what it means in that corner! - client loved it.

Branding is huge and this added a little more for them - its funny, as when I presented them the website they talked about the little M in the corner would look great on their main website !

profit-page
profit-page2394×980 112 KB

2 Likes
17

It looks very cool.
How do you do that?

1 Like
18

Hi ya,

Cheers!

From the same place you are trying to style the arrow (I hope)

  • Class Manager
  • Subclass Lib
    Then add the classed in the drop down menu - and then add the image as a background

Just have a play around with it and see what you can do.

But 99% I leave the style it comes with and just change the colour and sometimes make it round.

Have fun

1 Like
19

Thanks jerry for sharing the solution i m also searching the solution But because of you i got the solution thank you so much Friend

1 Like
20

Thanks jerry for sharing the solution. .