Repalce the X close png with something else?

Home Forums Easy FancyBox Pro Repalce the X close png with something else?

This topic contains 3 replies, has 2 voices, and was last updated by  RavanH 2 years, 5 months ago.

  • Author
    Posts
  • #5166

    Ewan Horlock
    Participant

    Hi there,

    How can I replace the standard fancybox X close button png with something else?

    Thanks for your time,
    Ewan

  • #5167

    RavanH
    Keymaster

    Hi Ewan,

    To do that, you’ll need to create your own close button image and then override the style rule that controls that close button image. I’d suggest to start with a copy of wp-content/plugins/easy-fancybox/fancybox/fancybox.png and change/replace the parts of the image that you want to see differently. Close button and matching left/right arrows for example… Then upload the new file to your site and add a rule like this to your themes stylesheet.

    
    #fancybox-close {
        background-image: url('/wp-content/uploads/2015/07/fancybox.png') !important
    }
    

    You could also use Jetpack’s Custom CSS module to append this rule. Note that the URL there depends on your modified image name & location of course.

  • #5168

    Ewan Horlock
    Participant

    Hi Ravan,

    Thanks for your reply

    I have uploaded the image to my media library and added the following code to my themes custom css

    #fancybox-close {
    background-image: url(http://creatureproductions.co.uk/wp-content/uploads/2015/06/fancybox.png) !important
    }

    However it doesn’t seem to work. Please see a the link below

    http://creatureproductions.co.uk/work/

    Click on a video

    Many thanks
    Ewan

  • #5171

    RavanH
    Keymaster

    Ah, it looks like that’s because there is no image file at http://creatureproductions.co.uk/wp-content/uploads/2015/06/fancybox.png

You must be logged in to reply to this topic.

Site by Pharéo | Hosted on The Permanently Moving Network