VesaT

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).

I’ve been a long-time user of NGG and the bugs introduced with 2.0 really bothered me. One of my sites has more than 2.000 images so WP media gallery really is not an option, and NGG is pretty much the only choice available for free at least.

The current release 2.0.11 works for me now pretty much ok, even though I’ve been forced e.g. to replace MapPress plugin with other map plugins (Easy2map and Nokia Maps and Places) in a couple of cases, and both map plugin replacements would have happened anyway since I tend to favour responsive site designs currently and MapPress is not responsive like the two above. And NGG 2.0 is responsive when NGG 1.9.x still isn’t. For photography sites responsive layouts are obviously a complicated matter as many designers favour a fixed layout – which really do not work with mobile devices ??

There are a couple of real issues with NGG still for me, one of the most important ones being translation. It also would be nice to get an understanding on how to use the “legacy NGG” edits e.g. to display a gallery name with the displayed gallery. But overall, Photocrati has really worked hard and got most of the really complicated structure to work by now.

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;
}

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;

Some of your slideshows show correctly (on IE10 browsers), but some seem to load endlessly.

One thing comes to mind: it might be a plugin conflict causing this as there are still some of those remaining in NGG 2.0.11. Possibly you are using a plugin for header images and that will not work ok along NextGEN Gallery. You might test this by deactivating other plugins than NGG temporarily.

PS. you have some amazing shots from the same places I’ve been to, so your site really should be up and running!

Today I downloaded the latest beta 2.0.11 and finally also this has been solved! You can see how it works at my NGG test site:
https://bisnes-it.com/wordpress-ngg-test/?page_id=138

And the new 2.0.9 beta solves this only partially. I just installed the beta into two testsites (one local, one on a hosted web server).

“No lightbox” text now appears on top of Lightobx Effects selection list, but this or any other selection doesn’t save. Saving just reverts to “NextGEN Pro Lightbox” even if NGG pro is deactivated.

Further to my previous comment on MapPress: with NGG 2.0.7 and the new MapPress 2.40.5 there is still a possibility that a user may not see a map at all, just the box where the map content should be. Same result both with Firefox and IE10. On some installs like my NGG testbed maps show correctly.

When I rolled back to NGG 1.9.13 the map shows correctly at that site, with both the above browsers. Maybe some kind of a conflict still, e.g. with some plugin/javascript at MapPress user side; they changed the order of some commands at the user side to enable ‘Attach to Post’ of NGG.

Quick update: MapPress have reacted quickly and the latest version 2.40.5 available just an hour ago seems to have fixed the non-working “Directions to” problem.

The version 2.40.4 of MapPress Easy Google Maps resolves the NextGEN Gallery conflict resulting to non-working “Attach to Post” NGG button at pages/post editor in WP, but there are still some problems:
1. at one production site which I maintain and use both MapPress and NGG the user side only displayed the map box on a page, but no map content (checked only on IE10 and reverted NGG back to 1.9.13).
2. one feature not working as of today when the map displays correctly is “DIRECTIONS TO” feature for map pins.
Have a look at my NextGEN testsite how this works at:

https://bisnes-it.com/wordpress-ngg-test/?page_id=160

Just a quick update on MapPress Easy Google Maps plugin conflict:

there is a new version of MapPress now in distribution, which includes a workaround to address NGG conflict. This works mostly, especially making the “Attach to Post” button work for inserting NGG content into pages and post.

But there is still something that does not fully work at the site user end:
1. One production installation where both MapPress is used did not display the map at all, only the box where the map content should be displayed.
2. If your map will be displayed, you can do about everything else but not use the standard “Directions to” for a map marker. This works fine with the newest MapPress and NGG version 1.9.13.

So if you only want to display a map and NOT USE DIRECTIONS TO functionality, just upgrade NGG to 2.0.7.

You can check how it works at my NGG testsite (which shows the map along an image gallery:
https://bisnes-it.com/wordpress-ngg-test/?page_id=160

Yes, this still is an issue with NGG 2.0.7 (and Pro 1.0.4), you can see it at my test site: https://bisnes-it.com/wordpress-ngg-test/?page_id=138

The same here, both on a local test server and my web-based NGG testbed: https://bisnes-it.com/wordpress-ngg-test/, and my personal live site. Very different plugins deployed at these.

There has already been a workaround presented here for MapPress conflicts (using the paid version).

You can also fairly easily replace your free MapPress plugin by free Easy2Map plugin, which also happens to allow percantage-based width thus helping you implement a responsive design better than MapPress.

To me the main drawback of Easy2Map compared to MapPress is that it does not provide driving directions to a location specified on the map – so if your website would need that, use MapPress and NGG 1.9 as long as there will be an update to solve the conflict.

It is a plugin conflict, for example MapPress does this (deactivate). You can see the known conflicts in one the sticky support topics.