how to change position and caption of slideshows

  • titti63


    I have been trying to include different slideshows in different pages of my website, see e.g.

    My objective is to have 3-4 slideshow with different pictures depending on the subject of the page. I want a slideshow with captions.

    I have tried a number of gallery and slideshow plugins, but I always get positioning problems in Graphene. This means that either the images are not centered in the frame, or they don’t adapt to the width of the page

    In the page linked above I am using Good Old Gallery which seems so far the best. Can you please help me to modify the look of the slideshow as follows?

    1) I’d like to have the slideshow centered or aligned left instead of right

    2) I’d like to remove the gray frame and have a shadow if possible or just the plain picture if not possible

    3) I’d like a bit more space between the slideshow caption and the text of the page below

    Thank you for your help!


    Kenneth John Odle


    Are there no settings in that plugin that allow you to position it left or right?

    You have some messed up code there. Are you using the visual editor or the HTML editor?

    Try something like this:

    .go-gallery-inner {text-align:center;}


    .go-gallery-inner {margin:auto;}

    If that doesn’t work, try using Firebug to isolate some other parts of that plugin that you can apply that css to. That will also help you identify where that border is coming from. (I tried this, but that plugin is weird and wouldn’t let me change things on the front end, which means you will need to change them on the back end to get this figured.)

    (English teacher’s/writer’s note: you need to break up that super long paragraph for readability.)



    Hi Kenneth

    thank you for your reply.

    The text is by no means ready, I have just copied it there to have something, at the moment I am just trying to figure out this thing of the slideshows 🙂

    I am using the visual editor as I don’t know much HTML, to build up this website I am just learning as I go .

    Could you please tell me where I should add the code you indicate? I am assuming it should go into the CSS.

    However if I look into “edit plugin” there’s several CSS files




    I also have this one but it says is inactive even if the plugin is activated

    good-old-gallery/style/good-old-gallery.css (inactive)

    #main .good-old-gallery-widget ul.slides,
    .good-old-gallery-widget ul.slides { margin: 0; }

    .go-gallery-container ul,
    .go-gallery-container ol,
    .go-gallery-container li { list-style: none; margin: 0; padding: 0; }

    .go-gallery-container .slides li:nth-child(1n+1) { display: none; }

    .go-gallery-container .flex-direction-nav,

    .go-gallery-container .flex-pauseplay { float: left; }
    .go-gallery-container .flex-direction-nav li { float: left; }
    .go-gallery-container .flex-direction-nav li .prev,
    .go-gallery-container .flex-direction-nav li .next { margin: 0 10px 0 0; }

    .go-gallery-container .flex-control-nav { float: left; }
    .go-gallery-container .flex-control-nav li { float: left; margin-left: 0; }
    .go-gallery-container .flex-control-nav li a,
    .go-gallery-container .flex-pauseplay span { cursor: pointer; }

    .go-gallery-container .title { font-size: 1em; font-weight: bold; margin: 0 5px 0 0; }
    .go-gallery-container .description { font-size: .8em; font-style: italic; }

    /* Cycle specific */
    .go-gallery-container.cycle .go-gallery-inner { display: block; overflow: hidden; }
    .go-gallery-container.cycle .slides { display: block; }
    .go-gallery-container.cycle .slides li { margin: 0; }
    .go-gallery-container.cycle img { max-width: 100%;

    again, here is the page where I am testing the plugin

    as you can see not only the slideshow is completely to the left, but it also sticks to the rest of the text and there is no setting for it

    thank you for your help!


    Kenneth John Odle


    Nope. Add the code I mentioned to Graphene’s custom CSS option. Go to

    Graphene Options >> Display Options >> Custom CSS (all the way to the bottom)

    Enter it in the box and click the “Save” button.



    thank you Kenneth but with that I could only change the position of the text, not of the slideshow.

    After testing a few more plugins (what a headache) I have now resorted to the following solution

    1) slideshow using Photospace in pages like this one

    2) single pictures using Nextgen in pages like this one

    Now if you could kindly suggest how to add a shadow to both so that they all look like the home page Graphene slideshow I’ll be happy like a kid!

    A million thanks for your patience

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!