Galaxy X - back to top scrolling link [Resolved]

[E-Luminate]

Hi all,

I've been customising the Galaxy X theme for my new website. However, I have noticed the 'back to top' icon is missing (when you scroll down a page).

I have e-mailed the author but still have received no reply.

Any suggestions on how to implement this please?

Neil.

Edited June 8, 2017 by E-Luminate

[Dirty Butter]

This is the section in main.php of stock Foundation:

              

               <div class="large-3 columns show-for-large-up" id="sidebar_left">
                  {include file='templates/box.featured.php'}
                  {include file='templates/box.popular.php'}
                  {include file='templates/box.sale_items.php'}
               </div>
               <a href="#" class="back-to-top"><span class="show-for-small-only"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg></span><span class="show-for-medium-up"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg> {$LANG.common.top}</span></a>
            </div>
            <footer>

 

[E-Luminate]

8 minutes ago, Dirty Butter said:

This is the section in main.php of stock Foundation:

              

               <div class="large-3 columns show-for-large-up" id="sidebar_left">
                  {include file='templates/box.featured.php'}
                  {include file='templates/box.popular.php'}
                  {include file='templates/box.sale_items.php'}
               </div>
               <a href="#" class="back-to-top"><span class="show-for-small-only"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg></span><span class="show-for-medium-up"><svg class="icon"><use xlink:href="#icon-angle-up"></use></svg> {$LANG.common.top}</span></a>
            </div>
            <footer>

 

Thanks for the quick reply. Just tried inserting that but it messes up the page when you start scrolling. it doesn't do anything

Edited June 7, 2017 by E-Luminate

[Dirty Butter]

If the code never existed in Galaxy, rather than accidentally being deleted - you will probably need to add something to css or images somewhere. Does Galaxy use svg or fontawesome for icons? I suspect it's not svg.

I'm not sure if you can add the svg file from Foundation 6.1.8 to get this back-to-top to work, or if you will need to change svg references to some comparable fontawesome references.

I'm trying to find which CC version started using svg. Looks like the change was made in 6.1.0.

[E-Luminate]

The skin uses fontawesome as far as I'm aware.

 

 

 

[Dirty Butter]

Yep - that means it's not showing because it's coded to use svg icons. You may be able to create a button class with transparent background and pale borders and use that, instead, and then hard code the Top text.

[E-Luminate]

Thanks for the help but that seems a bit beyond me

[Dirty Butter]

No problem! I tried to create one myself and couldn't get it to work.

But I worked it out from another way:

Add this to main where the svg lines are in Foundation:

				<a href="#" class="back-to-top"><span><img src="{$STORE_URL}/images/icons/folder.png"> {$LANG.common.top}</span></a>

Just as a test I used the folder.png image. But you should be able to find an Up arrow png image somewhere onnline that you could add to the images/icons/. I'll look for one, too.

This one is free to download and comes in lots of sizes:

https://www.iconfinder.com/icons/296828/arrow_up_icon#size=20

The other issue for you is that you wouldn't have the back-to-top class.

Add this to your skin css/cubecart.css file:

a.back-to-top, a.back-to-top:hover, a.back-to-top:active, a.back-to-top:visited  {
    color: #000 !important;
}

Hopefully that's all the edits you need!

Just remember, these edits will not survive an update of your Galaxy skin file and would need to be added back in. It's always best to make comments before and after any such edits you make, so you can see what to merge with a newer version.

[E-Luminate]

2 hours ago, Dirty Butter said:

<a href="#" class="back-to-top"><span><img src="{$STORE_URL}/images/icons/folder.png"> {$LANG.common.top}</span></a>

Hi,

 

Thanks for your efforts, very much appreciated.

I'm not sure what you mean with the quoted code, where do I add this?

[Dirty Butter]

1. Add back-to-top line to main.php

                  {include file='templates/box.featured.php'}
                  {include file='templates/box.popular.php'}
                  {include file='templates/box.sale_items.php'}
               </div>
<!-- ADD THIS LINE	-->	<a href="#" class="back-to-top"><span><img src="{$STORE_URL}/images/icons/folder.png"> {$LANG.common.top}</span></a>
   			</div>
            <footer>

2. Download the up arrow icon and add to your images/icons folder. Use that instead of folder.png.

This one is free to download and comes in lots of sizes:

https://www.iconfinder.com/icons/296828/arrow_up_icon#size=20

3. Add this to your skin css/cubecart.css file:

a.back-to-top, a.back-to-top:hover, a.back-to-top:active, a.back-to-top:visited  {
    color: #000 !important;
}

[E-Luminate]

Hi,

OK, I thought that is what you meant, however, I have tried entering the main.php line in several places but can't find the right place. Anywhere I put it, the icon shows up as a static image within the body.

Here is the code from my main.php, you'll see it's very different:

    <div class="col-3-12">
       <div class="content sidebar">
         {include file='templates/box.navigation.php'}
         {include file='templates/box.featured.php'}
         {include file='templates/box.popular.php'}
         {include file='templates/box.sale_items.php'}
         {include file='templates/box.currency.php'}
         {include file='templates/box.language.php'}
         {include file='templates/box.skins.php'}
       </div>
    </div>

 <div class="clear"></div>
</div>


<div class="col-1-1 footer">
  <div class="content">
      <div class="col-6-12">
        {include file='templates/box.newsletter.php'}
      </div>
      <div class="col-6-12">
        {$SOCIAL_LIST}
      </div>
    
    <div class="clear"></div>
  </div>
</div>
</div>

<div class="copyright">

  <div class="col-1-1">
    {$COPYRIGHT}
  </div>

 

[Dirty Butter]

There must be some additional code change needed within the skin css.

1 hour ago, E-Luminate said:

<div class="clear"></div> </div>

I would GUESS it goes right above this section, before the clear. But that's all it is - a guess.

I'm sorry I couldn't help - hopefully the Galaxy developer will respond soon.

[E-Luminate]

Thanks for all your effort.

Maybe I'll just leave it for now, would have been nice, but no really necessary, to have.

[Dirty Butter]

I did find some more files that relate to back-to-top. Hadn't thought to search GitHub for them:

https://github.com/cubecart/v6/search?utf8=✓&q=back-to-top&type=

The js and additional css code was not in my efforts detailed here previously.

[E-Luminate]

Hi thanks for that.

Got is working (sort of).

I had to try placing it everywhere in main.php before I could get it to appear outside the main div and to the side. However, it appears on the left and not the right!?

I tried adding float:left but that made no difference, any ideas how to get it on the right?

[Dirty Butter]

There's a Z index setting in the cubecart.css file that I think controls that normally. Try -100??? But it may depend on what div it ended up in your skin.

[E-Luminate]

Never Fear!

Got it working by borrowing some the code from: https://www.soundfocus.co.uk/squarespace/adding-a-floating-back-to-top-button

[Dirty Butter]

Glad you worked it out. Please edit your original post to show it is Resolved.

[E-Luminate]

Thanks for all the pointers, wouldn't have had it working without them!