How to Customize NextGEN Gallery Styles with CSS

Many NextGEN Gallery users want to customize the appearance of their galleries, such as changing border colors, text size, or navigation arrow placement. This is a common request because the default styles may not always match a website's specific design theme.

Customizing these elements is typically achieved through Cascading Style Sheets (CSS). CSS allows you to override the plugin's default styles to create a unique look that integrates seamlessly with your site.

Common CSS Customizations for NextGEN Gallery

Based on community discussions, here are some of the most frequently requested CSS modifications for NextGEN Gallery.

1. Changing Thumbnail Border and Text

To modify the border and text on your gallery thumbnails, you can use the following CSS code. Add it to your theme's custom CSS area, often found under Appearance > Customize > Additional CSS.

.ngg-gallery-thumbnail {
    border: 1px solid red !important;
}

.ngg-gallery-thumbnail span {
    font-size: 90% !important;
    color: red !important;
}

You can change the color (e.g., from 'red' to any hex code) and the border size (e.g., '1px') to suit your needs.

2. Adjusting Navigation Arrow Size

To make the next/previous navigation arrows larger, you can target their specific CSS classes. The exact effect may vary depending on your active WordPress theme.

.ngg-navigation a.next,
.ngg-navigation a.prev {
    /* Adjust properties like font-size or padding here */
}

3. Repositioning Slideshow Arrows

If you need to move the navigation arrows to the top of a slideshow, you can adjust their positioning with CSS. Note that moving other elements, like the 'show thumbnails' link, is not typically supported through simple CSS.

.ngg-slideshow .slick-next,
.ngg-slideshow .slick-prev {
    top: 5% !important;
}

4. Styling Lightbox Navigation

To change the size of navigation and close buttons within a lightbox (like the default SimpleLightbox), use CSS rules that target those specific elements.

.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-close {
    font-size: 6rem !important;
}

Important Notes and Limitations

• Use !important: The !important rule is often necessary to ensure your custom styles override the plugin's default styles.
• Browser Cache: After adding CSS, remember to clear your browser cache and any caching plugins on your site to see the changes immediately.
• Theme Specificity: Your theme's styles might also affect the gallery. You may need to use more specific CSS selectors to achieve the desired result.
• Not All Elements Are Customizable: As seen in the community threads, some layout changes (like moving certain links to the top of photos) are not possible with CSS alone and are not a supported feature of the plugin.
• Basic ImageBrowser: The Basic ImageBrowser display type does not support image transitions like crossfade.

By using these CSS snippets, you can significantly alter the appearance of your NextGEN Galleries to better fit your website's design. Always test custom CSS on a staging site before applying it to your live site.