Theming and customisation

Customize colors by overriding the CSS custom properties in your own stylesheet. For example:

:root {
    --ngjs-figure-radius: 4px;                          /* Border radius for figure elements */
    --ngjs-focus-outline: 1px solid orange;              /* Focus outline style */
    --ngjs-marker-border-color: currentColor;           /* Border color for selection marker */
    --ngjs-marker-check-color: transparent;             /* Background color for marker check */
    --ngjs-selected-marker-color: orange;               /* Col or for selected marker */
    --ngjs-selected-marker-check: black;                /* Color for selected marker check */
    --ngjs-link-bg: rgb(0, 0, 0, 0.7);                  /* Background color for non-link titles */
    --ngjs-link-color: white;                           /* Text color for non-link titles */
    --ngjs-link-radius: 4px;                            /* Border radius for link buttons/anchors */
    --ngjs-link-hover-bg: rgb(0, 0, 0);                 /* Background color for link hover state */
    --ngjs-link-hover-color: white;                     /* Text color for link hover state */
}

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);
}