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.