HOW TO CUSTOMIZE YOUR GALLERIES USING CSS for v2.0.x users...
As of v2.0.7, 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.
* If you're using an earlier version of NextGEN Gallery v2.0, we recommend that you update to the latest version. If for some reason the ngg_styles directory was not created for you, create a folder directly under wp-content, and name it ngg_styles, then create a stylesheet named nggallery.css and include this at the top of the stylesheet:
/* CSS Name: Default Styles Description: NextGEN Default Gallery Stylesheet Author: Photocrati Media Version: 2.12
This stylesheet is provided to allow users the ability of overriding the default styles for all display types */
HOW TO CUSTOMIZE YOUR GALLERIES USING CSS for Legacy v1.9.x users...
- Go to /wp-content/plugins/nextgen-gallery/css and make a copy of the nggallery.css file
- Place a copy of your nggallery.css file in your themes folder: /wp-content/themes/[theme you have activated]/nggallery.css
NextGEN will look to see if you have this css file in your theme and use that, or it will proceed with using its own if there isn’t a file there.
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:
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
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
- Working with Custom Fields
*Customizing your galleries with CSS requires knowledge of CSS. Some resources on learning CSS can be found here: