Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 30, 2015 at 6:44 pm #511759
    daniejm

    Hi there,

    I’m experimenting with a few things on a new Enfold installation – looking to borrow visual cues I’ve seen on other sites that are not made with Enfold. Will likely be making several threads to uncover the limits of this theme. Great theme, by the way!

    There are a few threads that indicate how to modify the appearance of the Scroll To Top link. Is it possible to replace the CSS with an image? For example: the user would click on a PNG of an up-arrow to scroll to the top.

    Thank you!

    – Joe

    September 30, 2015 at 9:22 pm #511828
    Josue

    Hey Joe!

    Try adding this code to the Quick CSS:

    a#scroll-top-link:before {
    content: "";
}

a#scroll-top-link {
    background-image: url(_PNG_IMAGE_URL_HERE_);
    background-size: contain;
}

    Cheers! 
    Josue

    October 1, 2015 at 12:04 am #511881
    daniejm

    Hi Josue,

    Thank you! This got me pointed in the right direction. This is what the completed code ended up looking like:

     a#scroll-top-link:before {
    content: "";
}
a#scroll-top-link {
    background-image: url(IMG_URL);
background-color: transparent;
border: none;
background-repeat: no-repeat;
}
#scroll-top-link:hover { 
background-color: transparent; 
color: none;
border: none;
}

    Case closed, my friend. Thank you!

    – Joe

    October 1, 2015 at 12:09 am #511882
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Custom "Scroll to Top" Image’ is closed to new replies.