WordPress.org

Ready to get started?Download WordPress

Forums

Nggallery thumbnails width (6 posts)

  1. kjagen
    Member
    Posted 5 years ago #

    I can`t seem to find the right css lines to change to get the thumbnails spanding to the width of my pages ( 655 now)

  2. kjagen
    Member
    Posted 5 years ago #

    It`s not the thumbnails itself I mean but the whole gallery.
    I want it aligned with the page width. The rest of the page has from left border to text 5 px. How can I get the album to do the same?
    And to spand over the width of the page.

  3. kjagen
    Member
    Posted 5 years ago #

    I tried to change all of nggallery css, but no luck...

  4. kjagen
    Member
    Posted 5 years ago #

    I`ve tried modifiyng these but nothing changes?????????

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

    .ngg-gallery-thumbnail img:hover {
    background-color: #A9A9A9;
    border:1px solid #999999;

  5. kjagen
    Member
    Posted 5 years ago #

    This is all all the style.
    I can`t get the thumbs to span so that the gallery will be the same width as the rest of the oage. About 650 px

    /* ----------- Gallery style -------------*/
    
    .ngg-galleryoverview {
    	overflow: hidden;
    	margin-top: 10px;
    	width: 100%;
    	clear:both;
    	display:block !important;
    }
    
    .ngg-galleryoverview .desc {
    /* required for description */
       margin:10px 10px 10px 0px;
       padding:0px;
    }
    
    .ngg-gallery-thumbnail-box {
    	float: left;
    }
    
    .ngg-gallery-thumbnail {
    	float: left;
    	margin-right: 10px;
    	text-align: left;
    }
    
    .ngg-gallery-thumbnail img {
    	background-color:#FFFFFF;
    	border:1px solid #333333;
    	display:block;
    	margin:4px 4px 4px 30px;
    	padding:0px;
    	position:relative;
    }
    
    .ngg-gallery-thumbnail img:hover {
    	background-color: #A9A9A9;
    border:1px solid #999999;
    
    } 
    
    .ngg-gallery-thumbnail span {
    	/* Images description */
    	font-size:90%;
    	padding-left:0px;
    	display:block;
    }
    
    .ngg-clear {
    	clear: both;
    }
  6. johndesignr
    Member
    Posted 4 years ago #

    The key to this is the "width" command in ngg-galleryoverview. Set it to 110% for example, and you get the freedom to extend the width of your gallery outside of the column. This is necessary because the margin-right of 10px on the last thumbnail else prevents it from aligning to your column width.

    Hope this helps

Topic Closed

This topic has been closed to new replies.

About this Topic