Custom style sheet and templates for NextGen Gallery (with special instructions for child themes)

NextGen Gallery is a great plugin for your WordPress site’s galleries. But often you would like to customize its look to suit your needs. Here’s how:

Create custom template files for NextGen Gallery:

Custom templates are PHP files that can be stored in the folder /nggallery/, which you can create inside your theme directory. NextGEN gallery look up always first into this folder if there are the valid template files. Copy the file gallery.php from folder /wp-content/plugins/nextgen-gallery/view/ to the newly created folder /nggallery/ in your theme folder, and rename it to gallery-yourtemplatename.php

/wp-content/themes/your-theme-folder/nggallery/gallery-yourtemplatename.php

To use now this template in a post or page you insert the tag:

[ nggallery id=1 template=yourtemplatename ]

(note: in this example, your gallery’s ID is 1)

This tells NextGEN Gallery to use ‘gallery-yourtemplatename.php’ to show the gallery output. Without this template tag, NextGEN takes the default template (gallery.php) from the plugin folder, normally located at

/wp-content/plugins/nextgen-gallery/view/gallery.php

The same you can use for album, singlepic or imagebrowser, all of them are template driver so that you can easily modify the output without having problems during a upgrade.

Note: if you have a child theme (i.e. a child theme of Thematic framework), just place the new folder /nggallery/ that contains the file gallery-yourtemplatename.php in your child theme directory. And call the template the same way as above: [ nggallery id=1 template=yourtemplatename ]

Note: same procedure for album template – the PHP file is album-extend.php (default) or album-compact.php in the folder /wp-content/plugins/nextgen-gallery/view/

==========================================

Create a custome style sheet for NextGen Gallery:

Copy file nggallery.css from folder /wp-content/plugins/nextgen-gallery/css/ to your theme’s root folder (or if you have a child theme, put it in your child theme folder). Edit it from there. NextGen Gallery will look for this file from the theme folder (or your child theme folder) first before look into the plugin’s CSS folder.

Note: if you have a child theme, the plugin’s Style Editor in Dashboard can’t recognize the file nggallery.css in your child theme folder (it can only recognize the file if it stores in the parent theme folder), so you won’t be able to use that Style Editor to edit the CSS, but you can edit it in an editor like TextMate or Text Wrangler. It will work the same.

About these ads

16 Comments

  1. Scott
    Posted April 8, 2010 at 9:37 am | Permalink

    Hi Gnocchi

    We have just completed a site for a client http://www.bagfactoryart.org.za/?cat=3 as you can see we are using nextgen gallery and utilising the gallery view template. i would like to do two things. firstly I want to make the grey title band at teh bottom of the main image smaller and secoundly I would like to remove(or change the colour) of the black border around the thubnails. I would appreciate your assistance in this matter

    • Gnocchi
      Posted April 9, 2010 at 2:39 am | Permalink

      Hi Scott,

      I had a quick look at the site. For the gray bar at the bottom of the main image, you need to reduce its height by modifying the CSS class div.overlay in the CSS file galleryview.css (/plugins/nggGalleryView/) Its current height is 70 px, you may want to reduce it to about 10 px.

      It’s similar for the black border around the thumbnails.

      You can use Firebug Add-on of Firefox to view the CSS styles of those elements, and test-modify them within the browser view.

      Hope that helps.

      Gnocchi

  2. Posted May 4, 2010 at 10:35 pm | Permalink

    I have been looking for days to try and find a way to make custom templates for the NextGen gallery. Thank you for posting this. It was a huge help!!
    Cheers!

    ~David McGuffin
    Freelance Web Designer

    • Posted May 5, 2010 at 1:40 am | Permalink

      I was also wondering if you know how I could setup a template using gallery.php as you described so that on one side of the page the thumbnails would appear, and on the other side of the same page the larger image would appear without the page reloading each time I selected a different thumbnail. I have been unable to figure out how to do it.

      Your help would be greatly appreciated!
      ~David

  3. ADB
    Posted June 18, 2010 at 6:55 am | Permalink

    Hi, I’m looking for a way to use multiple .css files, one per template. I find it easier than adding custom classes to nggallery.css each time (assuming this is the way to go). Is there a way to do this? Am I missing the obvious? TIA.

  4. Posted August 6, 2010 at 6:22 pm | Permalink

    Do you know how I could target .ngg-galleryoverview class for an individual gallery? The gallery ID is “2” inside a post ID of “1159”:

    div class=”ngg-galleryoverview” id=”ngg-gallery-2-1159

    I tried the following without success:

    #ngg-gallery-2-1159 .ngg-galleryoverview {
    clear:both;
    color:#5285A8;
    display:block !important;
    font-family:Verdana;
    margin-left:50px;
    margin-top:10px;
    overflow:hidden;
    width:100%;
    }

    Any help or guidance you can provide would be great! Thanks for your time!

    • Posted November 29, 2010 at 6:06 pm | Permalink

      Adam, I’m guessing you’ve figured this out by now but maybe this could help others…
      The CSS you have won’t work because it’s actually calling an instance of .ngg-galleryoverview that is *inside* of the element with the id of ngg-gallery-2-1159. If you just use the id declaration of #ngg-gallery-2-1159 you should be able to target the div (and you might already know that id declarations always take precedence over class declarations so for specific targeting they’re a good option). If it’s still not doing what you want, I would recommend what’s been suggested above, namely using the Firebug plugin inside of Firefox to see if any more declarations are somehow taking precedent. Finally, NGG makes a lot of style declarations that are inline, that is, they are actually made in the markup using style=”…”. You might or might not be able to override some of those using !important as you have here for display: block.

  5. diceman
    Posted September 9, 2010 at 7:52 pm | Permalink

    Hi,

    I want to include the next gen slideshow in my WordPress theme (in the header php), I guess the insert codes ( [ slideshow id=x w=width h=height ] ) won’t be parsed here – so how would I do it?

    Thanks in advance,

    Dice

    • Posted November 29, 2010 at 6:08 pm | Permalink

      Dice,
      Here’s what I’ve done before to accomplish exactly what you’re doing:

    • Posted November 29, 2010 at 6:12 pm | Permalink

      Make that…

    • Posted November 29, 2010 at 6:13 pm | Permalink

      OK, inside php tags:

      echo do_shortcode(‘[slideshow id=5 w=920 h=143]‘);

  6. Posted November 9, 2010 at 10:07 am | Permalink

    Hi

    can you tell me how i can center the gallery in side a normal post like this exsample

    http://www.splitkroatien.de/ (Sorry that page is on German)

    I tried to change something in Stylesheet, and i tried align center, but nothing seams to help.

    Thanks

    Morten

  7. Aikanaru
    Posted January 12, 2011 at 3:35 pm | Permalink

    Hi,

    i’m looking for an explanation of how to make a custom theme compatible with NextGen gallery.

    Hard to find this answer on the internet, i hope you can help me.

    See you

  8. Posted February 15, 2011 at 11:46 am | Permalink

    THANKYOU SO MUCH i couldent find anywhere on how to style my gallery

  9. katielanglands
    Posted January 22, 2013 at 9:53 pm | Permalink

    Hi, thanks so much for the tutorial!
    I’ve followed your instructions however my site doesn’t seem to recognise the custom template that I’ve created.
    I’ve placed the custom template in wp-content/themes/elle/nggallery/gallery-style.php however my site doesn’t recognise the when I add style to my ngg command.
    To place the gallery into a post I insert [nggallery id=Melissa-and-Jaco=style] When I remove =style the gallery works just fine so I know that’s not the issue.
    My theme is a child theme so am I placing the new custom template in the wrong place?
    Thanks

2 Trackbacks

  1. By Wood fences | ruizslandscaping.com on March 8, 2010 at 4:04 am

    […] Custom style sheet &#1072n&#1281 templates f&#959r NextGen Gallery (w&#1110th special instructions f… […]

  2. […] Custom style sheet and templates for NextGen Gallery […]

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: