WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGen Gallery] How to make album thumbnails larger with no border? (10 posts)

  1. dczepiel
    Member
    Posted 4 years ago #

    Hello,

    I am using NextGen Gallery plugin on my test website

    If you click this link you will see a display of my galleries in the "Places" album.

    I would like to change the way the thumbnails are displayed - I would like to have bigger thumbnails (100x100 or 150x150 px) and so that there is no thick border like now around the thumbnail. Would you help me and point to the code that would have to be changed to accomplish that ?

    Many thanks for this woderful plugin !
    Darek

  2. dczepiel
    Member
    Posted 4 years ago #

    Anyone?

    I assume it would be nggallery.css file and some editing to lines:

    /* ----------- 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;

    But I do not know exactly how to change it to make it larger and get rid of the border...

  3. murdimages.com
    Member
    Posted 4 years ago #

    Hi dczepiel,
    you can set them in the admin side , click to the Gallery -> Settings -> Thumbnalis, there you can find what you need.

    :-)

  4. murdimages.com
    Member
    Posted 4 years ago #

    But if you want to set them into the CSS , I think you have to look for the class="ngg-gallery-thumbnail-box"

  5. murdimages.com
    Member
    Posted 4 years ago #

    Or this one: class="ngg-gallery-thumbnail"

    :-)

  6. dczepiel
    Member
    Posted 4 years ago #

    Hello murdimages.com

    In Gallery Settings I can only set gallery thumbnail size. What I want to change is the album thumbnail size.

    Please have a look at the link above - I am talking about those thumbnails

  7. elizabethrichardson
    Member
    Posted 4 years ago #

    Hello dczepiel,

    Try removing the entire css for .ngg-album-compactbox
    and change the height and width details under .ngg-album-compactbox .Thumb

  8. dczepiel
    Member
    Posted 4 years ago #

    elizabethrichardson

    Great tip, it worked, looks more less what I wanted BUT
    the album list seems to be vertically aligned (one under another) instead of horizontally aligned (one next to another).

    Now my noob CSS eye does not see anything in .ngg-album-compactbox that would indicate that alignment... any clue how to fix that ?

    EDIT: What is more - that change spoiled the way the actual album is displayed. If you click on it, the album photographs display in just one column... which can't be ! Help :)

  9. dczepiel
    Member
    Posted 4 years ago #

    ok, finally I deleted only part of the .ngg-album-compactbox entries so the final version looks like this:

    .ngg-album-compactbox {
    	background:transparent url(albumset.gif) no-repeat scroll 0%;
    	height:120px;
    	width:120px;
    }
    
    .ngg-album-compactbox .Thumb {
    	border:1px solid #000000;
    	margin:0px !important;
    	padding:0px !important;
    	width:120px;
    	height:120px;
    }

    I'll be testing that in the coming days to make sure it is displaying correctly the way I want.

  10. dczepiel
    Member
    Posted 4 years ago #

    it stopped working with the new NextGenGallery update - damn

Topic Closed

This topic has been closed to new replies.

About this Topic