[Support request] Change Back to Top Button Color

[Tim Zurawski]

I want to change the color of the button on SOME pages, but not all.

My guess is I need to make a new class, but don’t have a grasp on this yet. Current css is below, but it doesn’t address the color of the button (up arrow).
Also was thinking of changing the up graphic.

<span class=”screen-reader-text”>Scroll back to top</span>

So where does this code get color and shape info?

thank you

GeneratePress 2.2.2

[Leo]

Hi there,

You can just target specific pages in your CSS. For example:

.page-id-xx .generate-back-to-top, .page-id-xx .generate-back-to-top:visited {
    background-color: #000;
    color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim Zurawski]

Leo,
Thank you, but that doesn’t explain to me where to put that css and where to get page id and the difference between background-color and color. And you didn’t address how to use other graphics.

Responding without helping is useless!

[Leo]

– I see David has already explained before so I figured you’d know already:
https://generatepress.com/forums/topic/replace-elementor-nav-with-gp-nav-and-remove-header/#post-616771

Here it is again:
Adding CSS: https://docs.generatepress.com/article/adding-css/

– Page ID: https://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/

– Background color and color: https://stackoverflow.com/questions/39033070/css-color-vs-background-color-vs-background

– Are you wanting to use another icon?

When it’s general, non-theme related questions like how to find page ID and background color vs color, you can always find good answers on Google, or simply test them out.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim Zurawski]

Leo
Thank you, I did manage to change button color, but it doesn’t include a hover color like the original green button. I have tried various css, but can’t seem to find the right css formula.

This is what I have.

.page-id-1087 .generate-back-to-top, .page-id-1087 .generate-back-to-top:visited {
background-color: #344C9D; a:active hover-color:#f2f2f2
color: #f2f2f2;

<span class=”screen-reader-text”>Scroll back to top</span>

}

[Leo]

The full CSS is actually listed here:
https://docs.generatepress.com/article/back-to-top-button/#changing-the-color

Just remember to add the page-id-xx like I noted above.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts