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:

• W3Schools CSS Tutorials
• Learn CSS - Treehouse
• CSS Courses - Treehouse
• CSS Training and Tutorials - Lynda.com