[Plugin: NextGEN Gallery] center thumbnails?

If that not centered text is albums names when… ??

1. Remove ‘text-align: left;’ from ‘.ngg-album-compact’.
2. Add a new declaration:

   .ngg-album-compactbox {
       text-align: left;
   }

Hello. I made the suggested changes mentioned above and the thumbnails show as centered in Firefox but not in Internet Explorer. In IE, the thumbs display in a long vertical row aligned to the left rather than centered and in a horizontal row. I’m pasting the default Gallery CSS code from the “Black Minimalism Theme” then that I’m using. Can anyone please show me what I need to change so thumbs are centered properly in both Firefox and IE?

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

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

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

.ngg-gallery-thumbnail {
	float: left;
	background: url(shadowAlpha.png) no-repeat bottom right !important;
	background: url(shadow.gif) no-repeat bottom right;
	margin: 10px 0 0 10px !important;
}

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

.ngg-gallery-thumbnail img:hover {
	background-color: #A9A9A9;
} 

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

Thank you in advance!!

I’m having the same problem as pixelbrat. Does anyone know the fix for it?

Thank you.

yeah, in IE it’s still verticalli-lined.
in Opera and jthers – everything is ok.
Please, help

I’m in the same boat! The above fix worked perfectly for all the browsers except IE8. I hate Internet Explorer! Can anyone help??? ??

Hi Guys,

regarding IE album & gallery vertical alignment problem, here is my workaround:

you must add to your template header.php in head section, this line:

<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" media="screen" />
<![endif]-->

next, in template directory make ie.css file with content:

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

In IE all thumb will be aligned to left (there is problem with centered pic – dunno why), but this is better than one big vertical column. In FF & Opera there will be no changes.

Thnx, rw79! Aligning to left is pretty better, but not as desired.
Any ideas how to center them in IE?

Hello, this page has been invaluable, thank you so much! But I’m having the same problem now with all the thumbnails showing up in a vertical line down the center of my Gallery page (only with IE).

I tried the workaround in rw79‘s last post, but I don’t know what it means when you say “in template directory make ie.css file with content.” Where/what is the template directory? The only file I have with ie.css is style-ie.css, but all it has inside is:

/* Begin Sidebar */

li.widget_search #s {
	margin: -15px 0 0 0;
}

/* End Sidebar */

So I’m not sure if that’s where I’m supposed to put the second piece of information you mention in that last post.

Help! And TIA!

elizabethmorrison – you can freely add to your “style-ie.css” file, content which I mentioned for ie.css ??

THANK YOU! It worked — even left-aligned, it’s better than having my thumbnails all in a narrow line down the middle!

Thanks to everyone who contributed, I really needed this fix so my galleries would function in older IE.

As many have said, this is now left-justified (float:left;) in older IE, by looking at the code it looks like a centering div could fix this, right? I tried adding a div around the thumbnail creation area in gallery.php and gallery-caption.php but the results were very bad. I don’t understand the template hierarchy in NextGen so I suppose I may have tried editing the wrong files – but those 2 files were the only ones I could find that had the thumbnail “creation” loop.

Is it possible that someone with a little more php or CSS experience figure this out? Or is it already figured out and just too complex to implement?

Thanks for any input.

I’ve tried following the changes to the CSS above but I’m not sure where I’ve gone wrong. Can someone please point out what I need to change to center the thumbnails?

Site here:
https://bit.ly/bKrXtj

CSS:

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

.ngg-galleryoverview {
	text-align: center;
	overflow: hidden;
	margin-top: 10px;
	width: 100%;
	clear:both;
	display:block;
}

.ngg-gallery-thumbnail-box {
        display: inline-block;
}

.ngg-gallery-thumbnail {
	margin-right: 5px;
	text-align: center;
	display: inline-block;
}

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

.ngg-gallery-thumbnail img:hover {
	background-color: #4F3922;
} 

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

No one?

For all who have problems with thumbnail center change, I uploaded my working css file which you can easily use. BUT it’s version with shadow effect (not default!), it means you must activate this style in nextgen gallery style options.

https://www.sendspace.com/file/nnky4h

Pls remember to use my workaround regarding IE album & gallery vertical alignment problem (8 posts up) as well.

So here is the entire CSS to copy and paste into your editor.

/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Alex Rabe
Version: 1.50

This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design

*/

/* ----------- Album Styles Extend -------------*/

.ngg-albumoverview {
	margin-top: 10px;
	width: 100%;
	clear:both;
	display:block !important;
}

.ngg-album {
    height: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
}

/* IE6 will ignore this , again I hate IE6 */
/* See also https://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
} 

.ngg-album {
	overflow: hidden;
	padding: 5px;
	margin-bottom: 5px;
	border: 1px solid #cccccc;
}

.ngg-albumtitle {
	text-align: left;
 	font-weight: bold;
	margin:0px;
	padding:0px;
	font-size: 1.4em;
	margin-bottom: 10px;
}

.ngg-thumbnail {
	float: left;
	margin-right: 12px;
}

.ngg-thumbnail img {
	background-color:#FFFFFF;
	border:1px solid #A9A9A9;
	margin:4px 0px 4px 5px;
	padding:4px;
	position:relative;
}

.ngg-thumbnail img:hover {
	background-color: #A9A9A9;
}

.ngg-description {
	text-align: left;
}

/* ----------- Album Styles Compact -------------*/

.ngg-album-compact {
	float:left;
	height:180px;
	padding-right:6px !important;
	margin:0px !important;
	text-align:left;
	width:120px;
}

.ngg-album-compactbox {
	background:transparent url(albumset.gif) no-repeat scroll 0%;
	height:86px;
	margin:0pt 0pt 6px !important;
	padding:12px 0pt 0pt 7px !important;
	width:120px;
}

.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:91px;
	height:68px;
}

.ngg-album-compact h4 {
	font-size:15px;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	width:110px;
}

.ngg-album-compact p {
	font-size:11px;
	margin-top:2px;
}

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

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

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

.ngg-gallery-thumbnail-box {
	display: inline-block;
}

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

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

.ngg-gallery-thumbnail img:hover {
	background-color: #FFFFFF;
} 

.ngg-gallery-thumbnail span {
	/* Images description */
	font-size:90%;
	padding-left:5px;
	display:block;
}

.ngg-clear {
	clear: both;
}

/* ----------- Gallery navigation -------------*/

.ngg-navigation {
	font-size:0.9em !important;
	clear:both !important;
	display:block !important;
	padding-top:15px;
	text-align:center;

}

.ngg-navigation span {
	font-weight:bold;
	margin:0pt 6px;
}

.ngg-navigation a.page-numbers,
.ngg-navigation a.next,
.ngg-navigation a.prev,
.ngg-navigation span.page-numbers,
.ngg-navigation span.next,
.ngg-navigation span.prev {
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-navigation a.page-numbers:hover,
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover,
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
	background-color: #0066CC;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

/* ----------- Image browser style -------------*/

.ngg-imagebrowser {

}

.ngg-imagebrowser h3 {
	text-align:center;
}

.ngg-imagebrowser img {
	border:1px solid #FFFFFF;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	display:block !important;
	padding:5px;
}

.ngg-imagebrowser-nav {
	padding:5px;
	margin-left:10px;
}

.ngg-imagebrowser-nav .back {
	float:left;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .next {
	float:right;
	border:1px solid #DDDDDD;
	margin-right:3px;
	padding:3px 7px;
}

.ngg-imagebrowser-nav .counter {
	text-align:center;
	font-size:0.9em !important;
}

.exif-data {
  	margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------- Slideshow -------------*/
.slideshow {
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	outline: none;
}

.slideshowlink {

}

/* ----------- Single picture -------------*/
.ngg-singlepic {
	background-color:#FFFFFF;
	display:block;
	padding:4px;
}

.ngg-left {
	float: left;
	margin-right:10px;
}

.ngg-right {
	float: right;
	margin-left:10px;
}

.ngg-center {
  	margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------- Sidebar widget -------------*/
.ngg-widget,
.ngg-widget-slideshow {
	overflow: hidden;
	margin:0pt;
	padding:5px 0px 0px 0pt;
	text-align:left;
}

.ngg-widget img {
	border:2px solid #A9A9A9;
	margin:0pt 2px 2px 0px;
	padding:1px;
}

/* ----------- Related images -------------*/
.ngg-related-gallery {
	background:#F9F9F9;
	border:1px solid #E0E0E0;
	overflow:hidden;
	margin-bottom:1em;
	margin-top:1em;
	padding:5px;
}
.ngg-related-gallery img {
	border: 1px solid #DDDDDD;
	float: left;
	margin: 0pt 3px;
	padding: 2px;
	height: 50px;
	width:  50px;
}

.ngg-related-gallery img:hover {
	border: 1px solid #000000;
} 

/* ----------- Gallery list -------------*/

.ngg-galleryoverview ul li:before {
	content: '' !important;
}

.ngg-gallery-list {
	list-style-type:none;
	padding: 0px !important;
	text-indent:0px !important;
}

.ngg-galleryoverview div.pic img{
	width: 100%;
}

.ngg-gallery-list li {
	float:left;
	margin:0 2px 0px 2px !important;
	overflow:hidden;
}

.ngg-gallery-list li a {
	border:1px solid #CCCCCC;
	display:block;
	padding:2px;
}

.ngg-gallery-list li.selected a{
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:#000000 none repeat scroll 0 0;
}

.ngg-gallery-list li img {
	height:40px;
	width:40px;
}

li.ngg-next, li.ngg-prev {
	height:40px;
	width:40px;
	font-size:3.5em;
}

li.ngg-next a, li.ngg-prev a  {
	padding-top: 10px;
	border: none;
	text-decoration: none;
}