Remove SmugMug's "Back to Top" icon?

ChancyRat

I have made my own "Jump to Top" icon for some pages, and then SmugMug added this default feature, which is overlapping my own tool now. How can I remove SM's code for the particular pages where I have my own code? If that's not an option, can I remove SM's version in the site-wide CSS? Or - other? THANKS.

Hikin' Mike

button.sm-page-scroll-to-top {display: none;}

ChancyRat

Thank you Mike! A related question - how can I add text to my own icon? This is the code I have:

<a href="#top" title="Jump to Top"><div style="text-align: center;"><img src="/photos/i-xxxx0/O/i-xxxx.png" alt="image" height="80%" width="80%" /></div></a>

I don't remember how I managed to figure out that much code, so I definitely don't remember how to add words. They would populate beneath the image.

Hikin' Mike

No idea.

Hikin' Mike

This should work:

<div style="text-align: center;">
  <a href="#top" title="Jump to Top">
    <p>Text Here</p>
    <img src="/photos/i-xxxx0/O/i-xxxx.png" alt="image" height="80%" width="80%" />
  </a>
</div>

Would have to see it on a page if this doesn't work.

ChancyRat

Thank you so much, Mike. I have the code on the home page only for now.
It appears to work perfectly. Except - is it okay that I tweaked a forced break in order to wrap the text?
I vaguely recall one should not use a single at all?

    <div style="text-align: center;">
    <a href="#top" title="Jump to Top">
    <img src="/photos/i-xxx/0/O/i-xxx.png" alt="image" height="80%" width="80%" /></div></a>
    <p>Jump </br> to Top</p>
    </div>

Hikin' Mike

@ChancyRat said:
I vaguely recall one should not use a single at all?

I don't understand.

You have an extra </div> and should remove it. This is correct:

<div style="text-align: center;">
  <a href="#top" title="Jump to Top">
  <img src="/photos/i-xxx/0/O/i-xxx.png" alt="image" height="80%" width="80%" /></a>
  <p>Jump </br> to Top</p>
</div>

ChancyRat

I apologize, I wasn't thorough about the code. I have an extra div because - this is the full code.
And I highlighted in yellow the single br. I thought one was not supposed to have </br> unless one also uses <br>. Open and close, not just one side?

Hikin' Mike

You don't need all of that code. The HTML:

<div id="topButton">
  <a href="#top" title="Jump to Top">
  <img src="/photos/i-xxx/0/O/i-xxx.png" alt="image" height="80%" width="80%" /></a>
  <p>Jump<br>to Top</p>
</div>

The CSS:
#topButton {text-align:center;}

@ChancyRat said:
I apologize, I wasn't thorough about the code. I have an extra div because - this is the full code.
And I highlighted in yellow the single br. I thought one was not supposed to have </br> unless one also uses <br>. Open and close, not just one side?

One is fine: https://www.w3schools.com/tags/tag_br.asp

ChancyRat

Oh Mike! Okay one last run through here - because here is my CSS. In this case don't I need the HTML that I have?

#topButton {
  position: fixed;
  bottom: 0;
  width: 90px;
  left: 91%;
  margin: 0 0 10px 0;
  text-align: center;
  padding: 0;
  z-index: 1;
  background-color: rgba(252, 237, 171, 0);
  border: 2px solid  rgba(255, 255, 255, 0);
  border-radius: 10px;
}

Hikin' Mike

.

Hikin' Mike

I didn't know you had CSS in that HTML/CSS Block, so yes, you need that. You DIDN'T need the <div style="text-align: center;"> because you already had it above.

polaris

Do you guys have the same customize like this, but for CSS ONLY for adding to CSS theme. I don't want to add an HTML/CSS content block for each page. Thank you all.

Hikin' Mike

@polaris said:
Do you guys have the same customize like this, but for CSS ONLY for adding to CSS theme. I don't want to add an HTML/CSS content block for each page. Thank you all.

The OP wanted to remove the "Back to the Top" which I provided that (button.sm-page-scroll-to-top {display: none;}). If you are wanted to add a custom "Back to the Top", you MUST use a HTML/CSS Block.