Home » Custom CSS weaverPix

Custom CSS


The custom css preferences can be accessed via the blueprint.png panel in weaverPix's preferences. The Custom CSS panel may be used to apply page specific CSS to the slideshow. This is an advanced feature that allows (near) limitless creativity and flexibility.


CSS Classes

The following classes are a few of the classes available to customize within the CSS. For the complete list of classes available, please see the weaverpix.css file exported with the slideshow.


  • #weaverpix-[unique_id]-slideshow-wrapper The wrapper around the slideshow.
  • .slideshow-[unique_id] The entire slideshow including thumbnails, captions, etc
  • .slideshow-[unique_id]-images The main slideshow image.
  • .slideshow-[unique_id]-thumbnails The thumbnails for the slidshow.
  • .slideshow-[unique_id]-thumbnails-active The styles applied to the active thumbnail.
  • .slideshow-[unique_id]-thumbnails a:hover The styles applied to the thumbnail that the mouse is currently hovering over.
  • .slideshow-[unique_id]-captions The slideshow captions.
  • .slideshow-[unique_id]-controller The slideshow controller



customcss.png


Figure 1. weaverPix's Custom CSS preference panel