As requested on the NextGEN support fourm here is the setup used to produce the grid view layout for the NextGEN galleries on the Japanese Arts Gallery website.
Please note that the css below applies to the gallery thumbnails (eg http://japaneseartsgallery.com/gallery/woodblock-prints/osamu-sugiyama/) and does not alter the album grid view thumbnails (eg http://japaneseartsgallery.com/gallery/). The Japanese Arts Gallery site does have some very small custom PHP code changes in the NextGEN plugin but I don’t believe it affects how the css below works.
The NextGEN galleries are displayed using the standard NextGEN gallery caption shortcode.
[nggallery id=nn template=caption]
The following css is then used to tailor the standard NextGEN grid view into a custom view. I’m not a css coder or anything like that so the css was produced in part from posts on the NextGEN support forum and in part from experimentation.
The first two class definitions are to produce the custom effect – border, background colour, box shadow and so forth.
The last three class definitions are purely to center the thumbnails plus the height attribute in the “.ngg-gallery-thumbnail a” class definition which was added to cater for variable height thumbnails by aligning the captions. The height attribute is not needed there if you only have ‘landscape’ thumbnails.
Obviously the height and width settings, margins and padding will need to be tweaked if used on other sites.
For simplicity I’d recommend you start out getting the first two classes working ok and then move on to the bottom three which center the thumbnails.
/* --- start customisation of gallery thumbnails --- */ .ngg-gallery-thumbnail-box { /* style the box that holds the gallery title and image */ background-color: #444444; border: 1px solid #CCCCCC; margin: 5px 5px 20px 5px; padding-top: 10px; padding-right: 5px; padding-left: 5px; font-size: 14px; color: #FFFFFF; width: 175px; height: 200px; box-shadow: 5px 5px 5px #888888; } .ngg-gallery-thumbnail img:hover { /* Change hover color from grey to black */ background-color: #000000; } .ngg-gallery-thumbnail { /* Needed for thumbnail centering to work */ width: 175px; height: 200px; display: table; } .ngg-gallery-thumbnail a { /* Needed for thumbnail centering to work */ display: block; vertical-align: middle; text-align: center; height: 125px; /* make descriptions align below thumbnails */ } .ngg-gallery-thumbnail img { /* Needed for thumbnail centering to work */ float: none; display: block; margin: 0em auto; } /* --- end customisation of gallery thumbnails --- */
This is enough to center the thumbnails set.
.ngg-galleryoverview {
text-align:center;
}
.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}
Hi Pratyush,
Thanks for your input. It’s always great when people share what the’ve found with others.
Regards, Mike.
So nice! It works perfectly and so simply!
thk
Hi Pratyush,
can I also “justify” the images over the full width of the content area? Do I need to adjust the other code, or just replace “center” with “justify”?
Thank you, thank you!!! So glad I came across this because I have been trying to fix this problem for a few days now.
Is there a simple way to make the image when it pops out in the gallery slightly larger? Or do I need to resize the original images and upload them?
Also, is there a way to link the pop out image to another website?
Thanks again!
Hi,
Thanks for letting me know you found the site useful.
You will need to upload a the image at the size you’d like it displayed on your website.
Regards, Mike.
Hi,
I am still a baby.
can you please tell me where I should put those scripts?
Thanks,
Dewa
Hi Dewa,
If your theme has a custom CSS facility use that. If not, then if you’ve setup child theme then update the CSS file for that.
If neither of the above apply then you can install a plugin like “Simple Custom CSS” and add the CSS there.
Regards,
Mike.
Hi I am having this issue and have followed the advice given, but have had no luck.
I know _zero_about CSS and while I am thinking that I have put the code in the correct place – perhaps not.
I am still using version 1.9.10 of NextGen Gallery
Any help appreciated.
Craig
Hi Craig,
If you can give me the URL of a page showing the problem I’ll take a look.
If your not sure your CSS is in the right place then you can use a plugin like ‘Simple Custom CSS’ to handle that for you.
Regards,
Mike.
Ahhh…. thanks a ton Pratyashu and Mike…. this works like a charm…