Inspired by fancy CSS image borders on Web Designer Wall, I wanted to see if I could get the same CSS to work with a NextGEN Gallery gallery. Below are the results.
If you’d like to use these borders, here’s what you need to do:
1 – Download this zip file and unzip/decompress it.
2 – In the folder called “NextGenCustomTemplates,” you will find:
- css folder which contains nggallery.css. Upload this file to your WordPress theme’s folder.
- images folder. Upload all of these images to your theme’s images folder. (If your theme’s images folder is not in the theme’s folder but inside another folder, you will need to modify the nggallery.css file image references to navigate to that folder OR simple create an images folder in your theme’s folder and put these images there.)
- nggallery folder. Upload this folder as is to your theme’s folder.
3 – Create a gallery in NextGen Gallery. Size the thumbnails to 180 pixels wide and 130 pixels tall.
4 – Place one of the following shortcodes in your WordPress page or post. Do not copy from this page. Instead type the shortcode, so you don’t include any of my markup that might interfere with the shortocde execution. Substitute the id # for the ID # of your NextGen Gallery.
[nggallery id=1 template="sample1"]
[nggallery id=1 template=”sample1″]
[nggallery id=1 template="sample2"]
[nggallery id=1 template=sample2]
[nggallery id=1 template="sample3"]
[nggallery id=1 template=sample3]
[nggallery id=1 template="sample6"]
[nggallery id=1 template=sample6]
[nggallery id=1 template="sample7"]
[nggallery id=1 template=sample7]
[nggallery id=1 template="sample8"]
[nggallery id=1 template=sample8]
[nggallery id=1 template="sample9"]
[nggallery id=1 template=sample9]
You may need to adjust your nggallery.css selectors properties to work best with your theme. Some theme’s use bullet icons which you will need to override and set to none for the .ngg-galleryoverview class.
Next time, I’ll try these CSS tricks with NextGen Gallery’s stylesheet:
http://webdesignerwall.com/tutorials/css3-image-styles
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Thank you AskWPGirl for informacion…
Help!
403 Permission DeniedYou do not have permission for this request /wp-content/uploads/2012/11/NextGenCustomTemplates.zip
Hi Sean, Sorry, I had the wrong URL Here it is: https://askwpgirl.com/docs/NextGenCustomTemplates.zip
Thank you for these, this will really help with a project I’m working on.
Question: Is it possible to have the border appear on the full sized image also?
I guess it depends on how you are showing the images full size. Typically, people display the images in a Lightbox. If you want to show a different border in the lightbox, you will need to modify the lightbox CSS in your theme’s stylesheet. If you are displaying the full size image using the NextGen Gallery Imagebrowser, then you can do it in the nggallery.css file (which you can copy from the NextGen Gallery plugin folder into your theme’s folder and modify as desired).
A very helpful tool is Firebug for Firefox. Install Firebug and read the instructions on the Firebug website on how to use it. It will help you located precisely the areas in the stylesheet you need to change.
Lastly, the images used in this demo are sized for these small thumbnails, so you would need to create borders in Photoshop that would be the appropriate size for your large images.
Good luck! Be sure to email me a link to your site if you make some fancy borders!
HI I am very new to wordpress and next gen- I love your borders. In the instructions you say – Size the thumbnails to 180 pixels wide and 130 pixels tall.
How do I do that.
To size thumbnails in NextGen Gallery, go to Manage Gallery. A list of your galleries will display. Check the checkbox to the left of the gallery name. From the bulk actions select list, choose Create new thumbnails. Click the Apply button. You will be able to set the size of the thumbnails and generate new ones.