Theming and customisation

As you should've seen in Getting started there are two stylesheet files :

• natural-gallery.css: is used for layout purposes and should not be changed if don't know what you're doing.
• themes/natural.css: is used only for colored elements. Feel free to copy this file in your project and edit with your colors.

Be careful, if the gallery is updated and the css selectors change in this file, you'll need to update it manually.

Style customisation

Border radius

Natural-gallery-js styles the layout with the minimum required for an understandable behavior. You can add your own styles to modify the gallery aspect.

.natural-gallery-js .figure {
    border-radius: 10px; /* and lots of other amazing stuff */
}

Zoom hover effect

Because of interactions configuration diversity, the hover effect for the zoom can be active on different elements. If you want to customize this effect, you can use the bellow selector.

.natural-gallery-js .figure.zoomable:hover .image,
.natural-gallery-js .image.zoomable:hover {
    /* This is the default hover effect when hovering the element that opens PhotoSwipe */
    transform: rotate(1deg) scale(1.2);
}