Edit the color of the "return to top" button and add the word top

Home Forums Jevelin Theme Edit the color of the "return to top" button and add the word top

Home Forums Jevelin Theme Edit the color of the "return to top" button and add the word top

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts
  • Hello,

     

    Is is possible to customize the “return to top” button on the right bottom corner to have our color: #8acfba and the word “TOP” under it like: https://www.brilliantearth.com/

     

    Our website is: http://sweetme.creativeflowmedia.org/

    Solution for this topic

    Hi @shanticfm,

     

    Thank you for your another question.

     

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .sh-back-to-top {
        color: #8acfba;
    }
    
    .sh-back-to-top:after {
        content: "Top";
        display: block;
        font-size: 15px;
        position: relative;
        top: -13px;
        font-weight: 800;
    }
    
    .sh-back-to-top i {
        line-height: 40px;
    }

     

    Best regards,
    Shufflehound team

    Thank you.

     

    Is it possible to invert the colors of the button. Currently the button is white with green font and turns green with white font upon hovering, I would like the button to appear green with white font, and then turn white with green font upon hover.

     

    That would be most appreciated, as currently the white button gets lost with the white background.

     

    Thank you again!

    Solution for this topic

    Please use the following custom CSS code to change its color.

     

    #page-container .sh-back-to-top {
        background-color: #8acfba;
        color: #fff;
    }
    
    #page-container .sh-back-to-top:hover {
        background-color: #fff !important;
        color: #8acfba;
    }

    Thanks, but I don’t see any change. I cleared my cache on the site as well as my browser.

    I don’t see the shared CSS code on your site so it seems you have not cleared the cache correctly.

     

    Where have you added it?

    I added it to the custom code – css code

    Attachments:
    You must be logged in to view attached files.

    I don’t see both the CSS code i shared above to achieve this.

     

    Please use both shared CSS code and clear the cache on your site.

     

    If it still doesn’t work then temporary disable the cache plugin on your site.

    It worked! thank you!

    You are most welcome here 🙂

Viewing 10 posts - 1 through 10 (of 10 total)