WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGEN Gallery] center thumbnails? (37 posts)

  1. ka81
    Member
    Posted 4 years ago #

    Would you please tell me how to center thumbnails?
    link

    i centered text by

    .ngg-galleryoverview {text-align:center;margin:0px; padding:0px;}

    but thumbnail is still on left.

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. ka81
    Member
    Posted 4 years ago #

    author or anybody - help please...

  3. simplyolivia
    Member
    Posted 4 years ago #

    I've asked this question many times too. Still waiting for the author to even acknowledge it. :(

  4. Holix
    Member
    Posted 4 years ago #

    Perhaps, because 'float: left' in

    .ngg-thumbnail {
        float: left;
        margin-right: 12px;
    }
  5. Holix
    Member
    Posted 4 years ago #

  6. ka81
    Member
    Posted 4 years ago #

    thanx for advise.
    I changed it to be centered (see the link in first post)
    but now all thumbnails are vertically positioned (not inline)!!
    How to place them inline??

    here's my /wp-content/plugins/nextgen-gallery/css/nggallery.css
    (Next-Gen version - the latest)

    /*
    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 http://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 {
    	margin-right: 12px;
    	text-align: center;
    }
    
    .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 {
    	text-align: center;
    	overflow: hidden;
    	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 {
    	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: #A9A9A9;
    } 
    
    .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 #A9A9A9;
    	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;
    }
  7. Holix
    Member
    Posted 4 years ago #

    You have to add

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

    before .ngg-gallery-thumbnail definition.

  8. ka81
    Member
    Posted 4 years ago #

    it's inline now, but on the left side again.. :(

    .ngg-galleryoverview .desc {
    /* required for description */
       margin:0px 10px 10px 0px;
       padding:5px;
    }
    
    .ngg-gallery-thumbnail-box {
            display: inline-block;
    }
    
    .ngg-gallery-thumbnail {
    	margin-right: 5px;
    	text-align: center;
    	display: inline-block;
    }
  9. Holix
    Member
    Posted 4 years ago #

    Oops! Check "display: inline;" style in ".ngg-galleryoverview" class. It should be "block".

  10. ka81
    Member
    Posted 4 years ago #

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

    yeah!!
    thanx a lot!!!
    all i wanted:
    a) thumbnails inline
    b) thumbnails centered
    !!!
    thanx!!!

  11. simplyolivia
    Member
    Posted 4 years ago #

  12. itlinux
    Member
    Posted 4 years ago #

    I would love to get the full css from you since I tried those changes and did not work for me. Thanks

  13. Holix
    Member
    Posted 4 years ago #

    Give me a link to you site, pls.

  14. itlinux
    Member
    Posted 4 years ago #

  15. Holix
    Member
    Posted 4 years ago #

    Oh, in you case additionally you should modify album styles.

    • .ngg-albumoverview:
      1. Add "text-align: center;"
    • .ngg-album-compact:
      1. Remove "float: left;"
      2. Add "display: inline-block;"

    The result:

    .ngg-albumoverview {
        clear: both;
        display: block !important;
        margin-top: 10px;
        text-align: center;
        width: 100%;
    }
    
    .ngg-album-compact {
        display: inline-block;
        height: 180px;
        margin: 0 !important;
        padding-right: 6px !important;
        text-align: left;
        width: 120px;
    }

    P.S. Nice page.

  16. itlinux
    Member
    Posted 4 years ago #

    thanks I applied it but I have the text that's not center ;) thanks for your help.

  17. Holix
    Member
    Posted 4 years ago #

    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;
      }
  18. pixelbrat
    Member
    Posted 4 years ago #

    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!!

  19. SETH__M
    Member
    Posted 4 years ago #

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

    Thank you.

  20. ka81
    Member
    Posted 4 years ago #

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

  21. Jennifer Ross
    Member
    Posted 4 years ago #

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

  22. rw79
    Member
    Posted 4 years ago #

    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.

  23. klisanor
    Member
    Posted 4 years ago #

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

  24. elizabethmorrison
    Member
    Posted 4 years ago #

    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!

  25. rw79
    Member
    Posted 4 years ago #

    elizabethmorrison - you can freely add to your "style-ie.css" file, content which I mentioned for ie.css ;)

  26. elizabethmorrison
    Member
    Posted 4 years ago #

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

  27. Bare
    Member
    Posted 4 years ago #

    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.

  28. Wimbledon
    Member
    Posted 3 years ago #

    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:
    http://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;
    }
  29. Wimbledon
    Member
    Posted 3 years ago #

    No one?

  30. rw79
    Member
    Posted 3 years ago #

    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.

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic