The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Back to top and Back at the end.

View previous topic View next topic Go down

Solved Back to top and Back at the end.

Post by smurfavr on October 16th 2016, 10:38 am

How can I make the code with the double-headed arrow.
Back to top.
Back at the end.



Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>


Last edited by smurfavr on October 18th 2016, 11:17 am; edited 2 times in total
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SLGray on October 16th 2016, 9:18 pm

Is the issue that the down arrow does not appear?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40461
Reputation : 2730
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 16th 2016, 10:12 pm

I remember you wanting to have a back to top button. You can follow a similar process for the 'back to bottom' button.

Currently you have this code on your site for the back to top button:
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Please replace it with this one:
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

Then, also add in this code for the back to bottom button:
Code:
<a href="#bottom" style="padding:2px 6px;font-weight:bold;font-size:24px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">v</a>

I've already tested this out on your Forum using Devtools and it worked for me c:

Let me know if you have any issues ^^
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 17th 2016, 4:55 am

How to buttons closer to each other because at the moment between them is a little off.


The new button want the line which is under the pointer to move over the arrow as in the other button.
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 17th 2016, 5:18 am

Decrease the value in the bolded red part for the 'back to top' button code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

To have the line above the arrow you'd have to create an image (I'd suggest making an image for both the back to top and back to bottom buttons). I believe I gave you a code with an image instead of text in it in your previous thread..

Back to top button with image:
Code:
<a href="#top" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top"><img src="back to top arrow image"></a>

Back to bottom button with image:
Code:
<a href="#bottom" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the bottom"><img src="back to bottom arrow image"></a>

Make sure to change the width and height for each button in the code, otherwise the image won't show.
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 17th 2016, 5:33 am

Valoish wrote:Decrease the value in the bolded red part for the 'back to top' button code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top">^</a>

To have the line above the arrow you'd have to create an image (I'd suggest making an image for both the back to top and back to bottom buttons). I believe I gave you a code with an image instead of text in it in your previous thread..

Back to top button with image:
Code:
<a href="#top" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px" title="Return to the top"><img src="back to top arrow image"></a>

Back to bottom button with image:
Code:
<a href="#bottom" style="width: 000px; height: 000px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the bottom"><img src="back to bottom arrow image"></a>

Make sure to change the width and height for each button in the code, otherwise the image won't show.


I put this code but arrows disappeared. I do not know how to set up. Can you do it and give it?
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 17th 2016, 5:39 am

I'm currently on a phone so I'll work on it some time tomorrow. Unless someone beats me to it xD
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 18th 2016, 2:48 am

Back to top:
Code:
<a href="#top" style="width: 30px; height: 32px; padding:2px 4px;background:#10245d;position:fixed;bottom:7.3%;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/213.png"></a>

Back to bottom:
Code:
<a href="#bottom" style="width: 30px; height: 32px; padding:2px 4px;background:#10245d;position:fixed;bottom:1%;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/113.png"></a>

The buttons are slightly separated so that they don't look super squished together, or reflected.
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 5:47 am

Can the size of the buttons is as of this code.
Code:
<a href="#top" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>

Those of your code are quite large.
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by Valoish on October 18th 2016, 5:53 am

Sure thing I'll resize the arrows when I'm on my laptop tomorrow c:
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SarkZKalie on October 18th 2016, 8:10 am

Add a new class to these code, give it some css, like this :
Code:
<a href="#top" class="valoish" style="padding:2px 4px;font-weight:bold;font-size:22px;background:#10245d;color:#ececec;position:fixed;bottom:1%;right:2%;border-radius:2px" title="Return to the top">^</a>
Same w bottom one.
Then, add this to your CSS
Code:
a.valoish img {width:22px}
avatar
SarkZKalie
Forumember

Male Posts : 581
Reputation : 87
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 9:03 am

I do not know how to do about the bottom of the forum.
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by vietkanpy on October 18th 2016, 10:33 am

Code:
<a href="#top" style="width: 20px;height: 22px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/213.png" style="width: 20px;"/></a>
 
<a href="#page-footer" style="width: 20px;height: 22px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/18/01/53/55/113.png" style="width: 20px;"/></a>

test?
avatar
vietkanpy
Forumember

Male Posts : 56
Reputation : 24
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by smurfavr on October 18th 2016, 11:17 am

Thank you vietkanpy.
avatar
smurfavr
Active Poster

Male Posts : 1582
Reputation : 13
Language : Bulgarian

http://smurfa.bulgarianforum.net/

Back to top Go down

Solved Re: Back to top and Back at the end.

Post by SLGray on October 18th 2016, 10:58 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40461
Reputation : 2730
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum