Return to Support

how to change position and caption of slideshows

Home Forums Graphene WordPress theme Support how to change position and caption of slideshows

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #4570
    titti63
    Member

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

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

    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!

    #28573

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

    or

    .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.)

    #28574
    titti63
    Member

    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

    good-old-gallery/style/good-old-gallery-admin.css

    good-old-gallery/style/quickconcat.php

    good-old-gallery/style/bootstrap.min.css

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

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

    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!

    #28575

    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.

    #28576
    titti63
    Member

    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

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

    2) single pictures using Nextgen in pages like this one

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

    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.