How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

How do I change the CSS of NextGEN Gallery?

HOW TO CUSTOMIZE YOUR GALLERIES USING CSS

NextGEN will automatically create a directory in /wp-content called ngg_styles and a css file for you called nggallery.css . The full URL to the stylesheet would be /wp-content/ngg_styles/nggallery.css

  • To edit the CSS stylesheet, go to your WordPress dashboard >> Gallery > Other Options > Styles, there you can edit and save your CSS without having to use FTP.
  • After saving changes to the stylesheet, you may need to clear your browser cache to see the update on your site galleries. If you have a caching plugin installed, you may need to clear its cache as well.

--

HOW TO FIND THE .CLASS OR #ID

Using the Chrome Browser, right-click on any element of a gallery, as shown in this screenshot:

NGG_ChromeCSS_InspectElement

Next, you should see a window appear in your browser that will show you the code and CSS for that site element, see:

NGG_ChromeCSS_InspectElement_code

Now you can take that class you found, and add it to your your custom css stylesheet, an example could be:
.ngg-gallery-thumbnail img:hover{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

To help get you started customizing your galleries, here are a few tutorials we have put together to show you some cool tricks:

*Customizing your galleries with CSS requires knowledge of CSS. Some resources on learning CSS can be found here:

Table of Contents
Close Menu