NextGEN Gallery Stylesheet NOT Upgrade-safe

Having same issue here.

WARNING: NextGEN Gallery Stylesheet NOT Upgrade-safe

nggallery.css is currently stored in /home/jadran/public_html/in/wp-content/themes/ji13in/ngg_styles/nggallery.css, which isn’t upgrade-safe. Please move the stylesheet to /home/jadran/public_html/in/wp-content/themes/ji13in/ngg_styles/nggallery.css to ensure that your customizations persist after updates.

Tried moving css file to /ngg_styles/ directory and it didn’t help. Can’t find a way to get rid of that WARNING.

Apparently we should move nggallery.css in /wp-content/ngg_styles/ directory and not /wp-content/themes/theme-name/ngg_styles/ as stated in the Warning. That worked for us.

Hey all –

If you’re seeing this, it’s because you have an nggallery.css file in your theme folder. It should still work fine, but we’re shifting that now to wp-content/ngg_styles/nggallery.css. Having it the theme folder is not safe for users who upgrade their themes (it will be deleted) or change themes. In the new location, the stylesheet should stay completely safe.

You can either just move your style sheet to that new location, or copy your custom styles, go to Gallery > Other Options > Styles and copy and save your styles there. Doing so will create the new style sheet at the location above, and you can edit it directly via FTP or via your admin area.

Thanks.

I’m having a similar problem, to wit: I can find my nggallery.css file in the “original” location; however, when I try to move/copy it to the “new” location, I can’t find the destination “ngg_styles” folder. That is, I am good from >>>/>>>/public_html/wp-content/. But I don’t have the ngg_styles subfolder into which I can move/copy the nggallery.css file. Any tips?

bd4tru it’s not there by default you have to make that directory and put the .css file in.

OK, ip00, thank you. I just took your advice and the warning disappeared. Thanks. On a possibly related note, I’ve noticed that both before and after I moved the nggallery.css move some of my style overrides aren’t working–namely thumbnail and single pic borders are appearing. As background, I’m always a few months behind on updates and I now note that people are struggling with the transition. Bugs I guess. I’ve looked at forum tips from Photocrati/Nextgen regarding removing thumbnail borders, but none are working. I’ve made the changes within the Theme Options and Gallery Options locations for CSS. Does anyone have a silver bullet to fix this? I hate the borders.

PS: This is my first time on a forum (I think), so sorry if I’m being advice greedy.

I haven’t created a sub-folder yet. I’ve temporarily moved it to an existing css folder.

I don’t like the thumbnail borders either.

I’ve tried ngg_styles folder several times to override css settings of basic thumbnail gallery – no success so far.

The only way I have managed to style thumbnail gallery css is to edit directly a new nextgen_basic_thumbnails.css file at the following folder:

…/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_gallery/static/thumbnails/

Luckily this css file uses exactly the same code as nggallery.css did for thumbnail gallery, so you can for example copy your changed css from previous nggallery.css and paste it into this new css file, changing borders, margins, paddings etc. – and also effects on hover like in NGG 1.9.13.

As an example the code below into that css file will add a 60% opacity into a thumbnail on hover and no opacity when not hovering:

.ngg-gallery-thumbnail img {
	background-color: #FFFFFF;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	display:block;
	margin:0;
	padding:0;
	position:relative;
}

.ngg-gallery-thumbnail img:hover {
	background-color:#FFFFFF;
	display: block;
	-webkit-opacity: 0.40;
	-moz-opacity: 0.40;
	opacity: 0.40;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;

Thanks, VesaT. Question, I located the file you referenced via cPANEL; however, my existing CSS in there has a field for “border,” which I interpret to be the issue I’m dealing with. I don’t see that on the CSS you provided as an example. Is there another way to affect the border via CSS other than the border field? Separately, I have a broader question, when I am making these .CSS changes on the native file, does Photocrati Theme or NextGen settings “catch up.” I’m not exactly sure where the best place to be tweaking these settings is. For example, I notice that the new NextGen gallery has settings like NextGEN Basic… with Thumbnail settings.
Finally, is anyone else having thumbnail issues, overall. Aside from the border issue, my thumbnails aren’t loading well. I have to repeatedly reupload the thumbnail images.

Well, the best place for any CSS edits would be a “safe” custom css file, which NGG also seems to be aiming at. My problem so far has just been that the suggested “safe” places for css edit do not work for me.
In NGG 1.9.1x all CSS was in nggallery.css file, so you only had to have a copy of your edited css file and replace the generic file after plugin update with your own. My suggested edit above is just the same: after any NGG update you just need to replace the generic thumbnail css with a copy of your edited file.

Border like many other properties can easily be changed with CSS, I just did not include my own full edited thumbnail CSS into the post above.

Below my own edited parts of nextegen_basic_thumbnail.css for anyone interested. This will show the thumbnails as boxes with only a 1px border (thus having 1+1=2px between thumbnails)and no margins between them; I also had to change the overview width to 101% to enable smooth line wrap-ups in my responsive web design (have a look at: https://www.tiirikainen.fi/wordpress/index.php/wordpress/nggallery/animals/some-animal-photos?page_id=1677&lang=en&lang=en/ ):

/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
	overflow: hidden;
	margin-top: 10px;
	width: 101%;
	clear:both;
	display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}

.ngg-gallery-thumbnail-box {
	float: left;
}

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 0px;
	text-align: center;
}

.ngg-gallery-thumbnail img {
	background-color: #FFFFFF;
	border: 1px solid #A9A9A9;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	display:block;
	margin:0;
	padding:0;
	position:relative;
}

.ngg-gallery-thumbnail img:hover {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	display: block;
	-webkit-opacity: 0.40;
	-moz-opacity: 0.40;
	opacity: 0.40;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

@vesat – Although we have found some issues with how CSS is applied and how the Custom CSS functionality is working … and added these corrections into the next upcoming release, you may also need to add !important to some of the custom CSS properties you are using to insure their specificity is being maintained.

Well, strangely enough I (again) tried to edit the custom CSS (NGG –>Other Options –> Styles), creating a tailored thumbnail css like the above. It did not work, all I got were the bundled thumbnail displays of NGG.

When I replaced nextgen_basic_thumbnail.css with my edited version and still had the edited nggallery.css in /ngg_styles folder, I got the bundled thumbnail display. After deleting nggallery.css from the folder the thumnails displayed as my edited thumbnail css defined them. All these done on a local Windows-based server (Wampserver) with WP 3.7 alpha and NGG 2.0.12 beta.

So it seems something in the latest NGG beta at least in a Windows-based system overrides any edits done to Styles and uses the standard (thumbnail) css even if nextgen_basic_thumbnail.css has been edited IF there is a nggallery.css file in the /ngg_styles folder.

EDIT: I made a bried test on my net-based NGG testbed and edits to “Styles” seemed to work (this runs on a generic linux-based platform).

Update: Styles-based CSS edits seem to work on linux-based servers with NGG 2.0.14, but not on a local Windows-based server. NGG still uses the default legacy css even if there is an edited nggallery.css in the ../ngg_styles folder.
At least I usually format NGG displays and my themes on a testserver before launching them to a live site. And my testservers run on Windows (typically Wampserver). So, a fix please ??

I think the best way to insure your custom styles are upgrade proof is to simply copy the elements you want to change from nggallery.css or any other plugin stylesheet and paste them into the style.css file of a child theme. Then make and keep your custom style changes there in a single stylesheet. Works for me.

@frontierblogger – yes, a child theme is a good way even if it may somewhat complicate maintaining the possibly complex structure of your main theme and several plugins.