Graphene and Nextgen Gallery: styles not working

  • titti63

    #4468

    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

    http://incampagna.com/wp/

    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!

    Mod

    Kenneth John Odle

    #28302

    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'
    href='http://blog.kjodle.net/wp-content/themes/graphene-stonesinwater/print.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. 🙂

    titti63

    #28303

    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!

    Mod

    Kenneth John Odle

    #28305

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

    Use Firebug. Josh has a good tutorial here:

    http://www.joshlobe.com/2011/10/using-mozilla-firebug-to-inspect-css-files/

    As you can see I am very code-ignorant!

    Nobody is born knowing code. But this will help:

    Check out resources for beginners:

    https://forum.graphene-theme.com/graphene-support/beginners-resources-possible-sticky#post-15033

    w3schools:

    http://www.w3schools.com/default.asp

    Prasanna:

    http://www.prasannasp.net/

    Josh:

    http://www.joshlobe.com/

    Me:

    http://blog.kjodle.net/help-for-your-wordpress-blog/

    http://blog.kjodle.net/computer-tutorials/graphene-tutorials/

    Graphene wiki (for the time being):

    http://wiki.khairul-syahir.com/graphene-theme/wiki/Main_Page

    Admin

    Syahir Hakim

    #28306

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

    titti63

    #28307

    Hi Syahir

    here are some examples

    http://incampagna.com/wp/?page_id=477

    http://incampagna.com/wp/?page_id=104

    http://incampagna.com/wp/?page_id=465

    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!

    Admin

    Syahir Hakim

    #28308

    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;
    }

    titti63

    #28309

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

    titti63

    #28310

    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

    http://incampagna.com/wp/?page_id=477

    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!

    Admin

    Syahir Hakim

    #28311

    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.