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:
Next, you should see a window appear in your browser that will show you the code and CSS for that site element, see:
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:
- Storyboard Spice To NextGEN Gallery With MCP Actions
- Add Rounded Corners To Your Gallery Thumbnails
- Add Shadows To Your Gallery Thumbnails
- Fade Your Thumbnails On Hover
- Monochrome Thumbnails On Hover
*Customizing your galleries with CSS requires knowledge of CSS. Some resources on learning CSS can be found here: