Graphene and Nextgen Gallery: styles not working

  • titti63


    Hi and thank you for the wonderful Graphene Theme. I am a beginner-level user of self-hosted WP and I don’t know much about coding so I am very careful with changing things I don’t understand.

    Our new website has been made with a Graphene slider on the homepage and several nextgen galleries on the other pages. The Graphene slider has a nice shadow which I can’t manage to reproduce on the nextgen galleries

    here is a link

    After much research I have realized that the Nextgen style editor does not work, so I am unable to select a “shadow effect” style for the galleries. In fact whatever effect I select in the Style editor has no effect on the gallery

    I am not sure if this is a plugin issue or a conflict with Graphene. The only solution I have found about this problem mentions adding <?php wp_head(); ?> (I hope I have done the backticks correctly 🙂 ) in the header.php but as far as I can see I do have that code as well as the corresponding wp_footer code.

    May be I just don’t understand what am I supposed to do with those codes. I’d be so grateful for some help. The nextgen support forum has severela similar questions that are ofetn unanswered so I don’t know where to llok

    Thank you!


    Kenneth John Odle


    The code you mention is an action hook. An action hook is basically a shelf that you can put any number of things on.

    The purpose of the <?php wp_head(); ?> action hook is to make it easy to include code, such as javascript, in your sites <head> section. (Note: a <head> is not the same as a <header>.) To use this action hook to add code to your side, you would need to create a child theme and then add something like this to your child theme’s functions file:

    add_action ('wp_head', 'printstyle' );
    function printstyle() {
    echo "<link rel='stylesheet' id='graphene-stylesheet-css'
    type='text/css' media='print' />";

    That’s from my blog’s functions file. It adds a link to a print style sheet. (I know Graphene has this function built in, but I’m a control freak.)

    And yes, you did get the backtick thing correct. 🙂



    Thank you Ken, would I need to make a child theme also to solve the problem of the nextgen gallery shadow effect? So far I have used the theme as it is, making a minimum of modifications with “my custom CSS”

    And how would I find the code to add a shadow to the nextgen gallery? As you can see I am very code-ignorant!


    Kenneth John Odle


    And how would I find the code to add a shadow to the nextgen gallery?

    Use Firebug. Josh has a good tutorial here:

    As you can see I am very code-ignorant!

    Nobody is born knowing code. But this will help:

    Check out resources for beginners:





    Graphene wiki (for the time being):


    Syahir Hakim


    Can you point us to a page on your site where a gallery from the NextGen Gallery is being displayed?



    Hi Syahir

    here are some examples

    As you can see the nextgen gallery has no shadow. No matter which effect I choose in the Style editor (Gallery- Style – Black minimalistic theme, shadow effect, dkret3 Theme, ect) I always get the same gallery, plain with no effects.

    In fact also the color picker doeas not work but I solved that problem choosing a white background.

    Thank you for any help!


    Syahir Hakim


    That is a slideshow, not an image gallery, which is the reason why none of the NGG styles you selected is having any effect. Image gallery is a list of image thumbnails, where you need to click on the thumbnails to view the images.

    To add shadow to that slideshow, try adding this to the theme’s Custom CSS feature:

    .entry-content div.slideshow {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    line-height: 0;
    margin-top: 10px;



    Thank you Syahir, it has worked beautifully! I also want to thank Kenneth for the many great resources. You are awsome guys.



    Hi Syahir, I have just checked the slideshow on different browsers.

    The shadow shows perfectly with Safari, Firefox and Chrome but the pictures seem displaced out of the frame in Safari and Chrome. It’s like they slide to the right under the widgets.

    I have managed to avoid this in Firefox by uploading pictures 640 x 360 px. but then setting the default size of the slideshow images 680×320 px. This works in Firefox but they seem too large for Safari and Chrome. I hope you can see it

    If I make the pictures smaller or change the default settings of the slideshow then they are too small in Firefox and don’t fill the shadowed frame.

    I hope i have been able to explain the problem, thanks for any help!


    Syahir Hakim


    You should be able to set the width of the slideshow. Go to WP Admin > Gallery > Options > Slideshow > Default size. Enter 620 as the width.

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!