Working with themes

Wikis > NextCellent Plugin > Guides and FAQ > Working with themes

This is a guide to learn how to customize the css in NextCellent.

1. The ngg_load_stylesheet filter

The first and best option is to ask your theme author to add support for NextCellent. You can point them to this page for assistance.

Note: you should not add this manually to your theme, except if you’re using child themes, as any changes will be overwritten with a theme update. See method 2 below if you just want to change the style yourself.

This filter allows you specify which stylesheet NextCellent should use. For example, drop this code in the functions.php from your current theme:

add_filter('ngg_load_stylesheet','replace_stylesheet');

function replace_stylesheet() {
    return get_stylesheet_directory_uri() . "/css/mycustom-nggallery.css";
}

This example tells NextCellent to load a mycustom-nggallery.css, which is located in a folder called css under the current theme.

2. Using the built in style manager

Note: this applies only to version 1.9.21 and up.

NextCellent will find and list all css files that are in your /wp-content/ngg_styles folder. That means you can just add all the themes you want, and choose from those themes from the Style page.

Also, if you select and edit a default css file (from in the css folder in the plugin), NextCellent will automatically save a the file in ngg_styles, to avoid it being overwritten by an update.

In short, follow these steps:

  1. Go to the Style page in the admin overview.
  2. Select the style you want from the dropdown. The name between brackets is the folder name.
  3. To add completely new themes, place the css file(s) in the wp-content/ngg_styles/ folder.
  4. When you’ve selected a file, you can edit it as well.
  5. When editing a file from the css folder, filename (css), NextCellent will make a copy in the ngg_styles folder of the changed file.
  6. When editing a file not from the css folder, NextCellent will just save your file.

You can also organize your css files in folders inside the ngg_styles folder, that works too. We would recommend not putting them inside a folder called css, as that would be confusing.

Note: prior to version 1.9.21, the ngg_styles folder wasn’t supported. That also means that if you change a css file from NextCellent itself, the changes will be overwritten by an update.

3. Add your custom nggallery.css directly to the current theme path (deprecated)

You can drop your custom stylesheet directly in your theme folder, but we would not recommend this, as the an update to the theme would overwrite this.

Take notice:

  • File needs to be named exactly nggallery.css like the original on the plugin
  • File needs to be in current theme’s root

While this is deprecated, this option will not be removed.