Repalce the X close png with something else?

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

Viewing 3 reply threads
  • Author
    Posts
    • 7 June 2015 at 18:06 #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

    • 7 June 2015 at 18:29 #5167
      Rolf
      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.

    • 7 June 2015 at 18:45 #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

    • 8 June 2015 at 16:54 #5171
      Rolf
      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 …

  • Author
    Posts
Viewing 3 reply threads
  • You must be logged in to reply to this topic.