Repalce the X close png with something else?

Your Account / Forums / Easy FancyBox Pro / Repalce the X close png with something else?

  • Author
    Posts
    • June 7, 2015 at 6:06 pm #5166

      Hi there,

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

      Thanks for your time,
      Ewan

    • June 7, 2015 at 6:06 pm #5167

      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.

    • June 7, 2015 at 6:06 pm #5168

      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

    • June 7, 2015 at 6:06 pm #5171

      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.