Use the "Custom CSS" text field in the settings dialog to modify MPIV's appearance using CSS. You can also use it to temporarily hide interfering page content since what you write there will only be used when MPIV is active.

The following table lists all IDs and classes available:

Popup (image or video element)#mpiv-popup
Popup while being visible#mpiv-popup.mpiv-show
Popup while zoom factor is being changed (until CSS transition ends)#mpiv-popup.mpiv-zooming
Bar (div element)#mpiv-bar
Bar while being visible#mpiv-bar.mpiv-show
Bar while showing gallery info#mpiv-bar.mpiv-gallery
Bar while showing error message#mpiv-bar.mpiv-error
Bar while showing HTML tooltip#mpiv-bar.mpiv-tooltip
Bar while showing caption (parsed by host rule property "c")#mpiv-bar.mpiv-caption
Bar while showing progress (video buffer, anti-hotlinking)#mpiv-bar.mpiv-xhr
Page while image is being loadedhtml.mpiv-loading
Page while image is being displayed down-scaledhtml.mpiv-large
Page while manual popup activation is possiblehtml.mpiv-ready


Borderless popup:

#mpiv-popup { border:none; }

Red border with rounded corners if popup contains HTML5 video:

#mpiv-popup[autoplay] { border:3px solid darkred; border-radius:10px; }

Fade-in animation:

#mpiv-popup { display:inline; opacity:0; transition:opacity 500ms; }
#mpiv-popup.mpiv-show { opacity:1; }

Info box in bottom right corner, black on white, no delayed animation:

#mpiv-bar { left:auto; top:auto; bottom:0; background:white; color:black; transition:none; }

No HTML tooltips on and (Firefox only):

@-moz-document domain(, domain( {
#mpiv-bar.mpiv-tooltip { display:none; }

Never hide mouse cursor:

html:not(.mpiv-large) #mpiv-popup { cursor:default!important }