Home› Themes

zenpage - move photo 'prev & next' selectors

redstick Member
in Themes
In zenpage theme when viewing individual photos in an album the selector arrows for the 'prev and next' photos are high up in the header.

How can I move them down so they are on EITHER SIDE of the photos?

I would like the 'prev' arrow on the left of the photo and the 'next' arrow on the right of the photo.

If that would be too big a task how can I move them so they are in a similar position to where they are in the Basic Theme?

Comments

  • acrylian Administrator, Developer
    If you haven't yet, I recommend to read the theming tutorial now to learn some basics of theming.

    So look at the theme's `image.php` page and move the related functionsyou will easily spot them as they are named accordingly. Then move them where you want them. That naturally will require theme changes regarding HTML and CSS so this actually looks and works correctly. As my colleague fretzl already mentioned you need some HTML, CSS and at least basic PHP knowledge to modify themes.

    They are in the same position as on the basic theme (the Zenpage theme originally was based on it) actutally which is the top right of the header. The only difference (despite some HTML and some more CSS differences naturally) is that the basic theme has no actual header and uses the breadcrumb right away.

    In case you haven't I hope you made a copy of the theme under a custom name as you otherwise may loose your changes on the next update.
  • redstick Member
    Many thanks for your guidance.

    I have moved the 'prev - next' arrows to above the image which is an acceptable position for me.

    The only thing I'm struggling with is the relative position; I'm trying to move them so they are central to the photo. When I made the move the position was to the right of the photo. I have changed Line 538 (under .imgnav { ) in style.css to read "float: center;" but that seems to move it to the left.

    I am happy with the new position, but would like to make the final 'tweek' to get them centered if you can suggest how.

    And yes, I am using my own custom theme :)
  • fretzl Administrator, Developer
    You can remove all properties for .imgnav except one.

    This should work:
    `
    .imgnav {
    padding-top: 50px;
    }
    `
    Oh, you might want to put this in your style.css too:
    `
    .album:nth-child(3n) {
    clear: both;
    }
    `
    That should take care of a proper display of albums.
    (remember my previous idea that didn't work?)
  • redstick Member
    Thanks, the prev - next are perfectly positioned.

    I have added the extra to style.css but, because I use long album descriptions, the album listing display is affected when the description text occupies more that 3 lines and your suggestion actually exaggerates that.

    I have left your suggestion in style.css just in case you want to have a look.
  • fretzl Administrator, Developer
    Aargh...ok last chance ;-)
    `
    .album:nth-child(2n+1) {
    clear: both;
    }
    `
  • redstick Member
    That's got it :)
    Looks a lot better now.

    Many thanks.
Sign In or Register to comment.