WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
How to center the slideshow (3 posts)

  1. GoodSignals
    Member
    Posted 2 years ago #

    Hi, I tried editing the css:

    .ngg-slideshow {
        overflow:hidden;
        position: relative;
    	text-align: center;
    }

    and tried this:
    <p style="text-align: center;">[slideshow id=2]</p>

    But nothing happens, the slideshow is aligned to the left when i wanted centered. Any help?

    http://www.thetrinitydesigngroup.com/portfolio/packaging-fulfillment-portfolio/

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

  2. colinpask
    Member
    Posted 2 years ago #

    I had the same problem and solved it by adding code. I found this somewhere and pasted it into wordpress > APPEARANCE > EDITOR.
    Worked for me

    .nleft { float: left; font-size: 1%; }
    .nright { float: right; font-size: 1%; }
    .fancy-letter { font-size: 350%; float: left; padding: 0.2em 0.2em 0.2em 0; }
    .gallery-leading { width: 100%; position: relative; float: left; text-align: center;}
    .gallery-contents { position: relative; float: left; padding: 0 8px;}
    .gallery-contents.left { margin-left: -100%; }
    .gallery-contents.below { width: 100%; display: inline-block; }
    .gallery-container { position: relative; }
    .gallery-photo-counter { float: none; font-style: italic; width: 100%; text-align: center; display: inline-block;}
    .gallery-thumbs { text-align: center; }
    .gallery-thumbs img { float: none;}
    .image-container { text-align: center; margin-bottom: 1em;}
    .exif-button { float: right; border: 1px solid; padding: 0 1em 0 0.8em; }
    .exif-button a { text-decoration: none; line-height: 1.2em; padding: 0.3em 0; display: inline-block;}
    .exif-button .icon { width: 16px; height: 16px; background-repeat: no-repeat; display: inline-block;  margin-right: 0.5em; }
    .exif-panel { display: none; }
    .navigation-attachment { width: 100%; display: inline-block; border-top: 1px dotted #c0c0c0; margin-top: 1em; }
    
    /* Gallery Fixes */
    .ngg-slideshow {
       width: 100% !important;
    }
    .ngg-slideshow * {
        margin: 0 auto !important;
    }
    .ngg-slideshow img {
        position: relative !important;
        display: block;
    }
  3. GoodSignals
    Member
    Posted 2 years ago #

    Great, I added it to the nggallery.css file and it is working fine.

    Thx!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic