CSS customization with NGG 2.0

I am having the same problem. Is nextgen no longer loading this file from the theme folder? Does it perhaps need a name change?
I have looked at the documentation on the nextgen website (https://www.nextgen-gallery.com/?s=nggallery.css) and it is still saying that this file should work for customizations.
Is there a new option somewhere that needs to be enabled?

I have found a way around the css problem.

In the nextgen options there is a place to add custom css. I have copied the entire nggallery.css file contents and pasted it into the custom css field and saved. This loads the correct css and now the galleries are looking correct.

In the wordpress dashboard go to Gallery->other options then choose the styles tab. Click the little link for ‘(Show Customization Options)’ which makes the css field visible. Now paste your code from the nggallery.css file here. This will overide the defaults and should put everything back to how it was.

Hope this helps someone.

Thank you for the tip !

BUT the following sentence is displayed there:
“This stylesheet is provided to allow users the ability of overriding the default styles for all display types”.
With NGG 1.8, I used to choose which picture I wanted the code to be applied to by editing the picture properties and writing “ngg-border” beside the other parameters in the “CSS class” field.
Now it seems to be always or never … (for the time being, it’s more never than always in my case !).

You must place your css file here: \wp-content\plugins\nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/css
And all stylesheets must contain a file header

/*
CSS Name: Example
Description: This is an example stylesheet
Author: John Smith
Version: 1.0
*/

Then this style was available in select in Gallery->other options -> styles.
But i dont know,what will be with this css after next update.

It’s very unusefull vs old versions when css must be place in theme folder.

Sorry, still not ok for me …
Here is the custom code I used:

/*
CSS Name: ngg-border
Description: Borders on single pictures
Author: FredMCCR
Version: 1.0
*/

.ngg-border {
    border:#aaaaaa 1px solid;
    padding:7px;
}

and selected ngg-border in Gallery->other options -> styles.
No change either on all the pictures or on those where “ngg-border” is filled in “CSS class” field.

I am giving up on this and rolling back to a previous version as no amount of tinkering with styles and stylesheets will get my galleries back to how they were. Whilst my original post sorts out the styling on the sidebar widgets, the main albums and galleries are still displaying incorrectly. And in actual fact when you click on a gallery nothing happens and I have no idea how to fix that.

There needs to be a tutorial that explains what has changed with the css that renders the custom nggallery.css file useless, and how we overcome this. I have wasted a whole afternoon on this now and I’m not happy. There are now too many options to choose from, and I have spent too much time trying this and trying that.

Very disappointed.

No change either on all the pictures or on those where “ngg-border” is filled in “CSS class” field.

Are you shore that element .ngg-border exists in DOM? NGG 2.0 has changed the output code.

There needs to be a tutorial that explains what has changed with the css that renders the custom nggallery.css file useless, and how we overcome this.

It say in Gallery->other options -> styles

But 2.0 update is ugly.

in my case, the custom css under
gallery -> other options -> styles -> File Content

will be ignored by the ngg ??
how can i roll back to the previous version?

I have also tried the gallery->other options->styles but the files I put in the folder don’t seem to come up in the list, and the styles added in the field are ignored.

@rgb_freak you can roll back to a previous version by following the instructions here: https://www.nextgen-gallery.com/how-to-rollback-a-version/

Simply adding the URL for external stylesheets in the “Stylesheet URL” field under
Gallery>Other Options>Lightbox Effects>Advanced Settings

This CSS file actually overrides the new CSS “Style” >advanced customization area.

My external CSS is now working as it was before the upgrade.

There are now several CSS files within /modules subfolders, so a quick fix is to place your CSS edits into those folders. Some of the most basic CSS files are within:
…/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_gallery/static/ –> subfolder /slideshow holds the basic CSS for slideshows and /thumbnails the CSS for displaying gallery as thumbnails. The latter is for many modifications NGG-GAllery.com has suggested (e.g. changing to black&white for hovered thumbnails).

I have no clue how the suggested general CSS edits (above) should be made to have a real effect ??

Could anyone clarify please: is custom CSS added via Options safe when upgrading in the future? Is there any way to use the same procedure as with earlier versions and copy a ‘master’ CSS file to the theme directory to future-proof it? Otherwise won’t the edits be overwritten during future upgrades?

This looks like a very big issue. Of course we need to edit the css and need one central place to do this. NextGen’s out of the box styling is really poor. Even if this was better you clearly still need to style it to match your site. And, as jajii says, we need to know if any amends to all those css files scattered through a tangle of folders will be future-proof.
This is a major headache and I’m looking for another gallery plugin already.
NextGen please let us know what’s going on!

Hey everyone,

We have a solution for this, that should be update & future proof. In our next update we’ll be moving the nggallery.css file to it’s own folder outside of the plugin file, under /wp-content/ngg_styles/nggallery.css. Your current CSS should carry over, but just in case it would be best to make a backup of your CSS before updating.

Moving forward, this way you won’t have to worry about putting anything in your theme folder, or creating any new files. You also won’t have to worry about losing your NextGEN Custom CSS in future updates to your plugin or Theme (but, always best practice to make a full backup of your site on a regular basis, esp. before making any major changes to your site).

You’ll still just go to Gallery >> Other Options > Styles and edit your CSS there.

I hope that helps. We are planning to release the next update very soon.

–Becky

Hopefully this simplified solution will work out better for you all.

Return it as it was.
What prevents to search for the file in the folder with the theme?