Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 15, 2015 at 2:26 pm #473752
    Gero

    Hi,

    how can I tuck the prev/next buttons from portfolio items right onto the page container? So they end up just outside the actual item page.

    My super mockup to give you a better idea:

    now:
    |<….|portfolio|….>|

    that’s what I need:
    |….<|portfolio|>….|

    not like this:
    |…..|<ortfoli>|……|

    Thanks!

    July 15, 2015 at 2:32 pm #473755
    Yigit

    Hey Gero!

    Thanks for your super mockup. I think i got the idea. Do you mind posting the link to your page?

    Cheers!
    Yigit

    July 15, 2015 at 2:40 pm #473758
    Gero

    Hey,

    I’m afraid company policy wouldn’t allow it at that point. It’s pretty much the default theme in this regard.

    Hope you can still give me a little help.

    July 15, 2015 at 7:19 pm #473931
    Dake

    Hey Geco,

    You can change the distance between both arrows with the below css:

    .mfp-arrow {
  width: 450px !important;
}

    Increasing the width brings them closer, while decreasing it pushes them further out.

    Be sure to use a value that compliments the overall width of your website’s images, so that the arrows are not covered or overlaying landscape images.

    Best regards,
    Dake

    July 16, 2015 at 10:23 am #474133
    Gero

    Hi,
    I get no visible change with this code. I’m talking about the arrows on both sides of the screen: http://kriesi.at/themes/enfold/portfolio-item/single-portfolio-23-gallery-3/

    Instead of aligning them to the browser window, I’d like to have them more visible and aligned to the container, if possible.

    July 16, 2015 at 10:38 am #474137
    Yigit

    Hey!

    Please try adding following code to Quick CSS 

    .avia-post-prev {
  left: 70px;
}
.avia-post-next {
  right: 60px;
}

    Best regards,
    Yigit

    July 16, 2015 at 10:58 am #474151
    Gero

    Hi,
    thanks!

    While the code moves them to the middle, they now overlap the content on smaller screens. Is it possible to attach them to the page container instead and move them outside from there?

    July 17, 2015 at 2:39 am #474649
    Ismael

    Hi!

    You can modify the single-portfolio.php then look for this code:

    <div class='container_wrap container_wrap_first main_color <?php avia_layout_class( 'main' ); ?>'>

			<div class='container'>

    Below, add this:

    <?php echo avia_post_nav(); ?>

    You can adjust the position by using the Quick CSS field:

    #top .avia-post-nav {
  position: absolute;
  height: 110px;
  top: 50%;
}

    There will be two post nav after this modification so you have to remove the default one using css.

    Best regards,
    Ismael

    September 8, 2015 at 11:01 am #499762
    changegroup

    I have a querstion in this regard,

    Can I style the button so that the content is always visible – not only when hovering?

    September 8, 2015 at 12:27 pm #499788
    Yigit

    Hi!


    @changegroup     Can you please post a link to your website and elaborate on the changes you would like to make?

    Regards,
    Yigit

    September 9, 2015 at 8:06 am #500215
    changegroup

    Hi Yigit

    Sorry for a not good explanation :-)

    What I was trying to says:

    On single blog post and portfolio items, there is a right / left navigation arrow to view other post/items. But you have to hover, to view what is next or previous.

    Can I style the arrow button so that it is always visible, as on hover? So that you automatically see prev and next image, title etc., and so that you don’t have to hover to see that?

    That would be great!

    September 10, 2015 at 12:47 pm #500963
    Andy

    Hey!

    try this code in Quick CSS field:

    .avia-slideshow-arrows.avia-slideshow-controls, .avia-slideshow-arrows.avia-slideshow-controls * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

    Hope this help!

    Best regards,
    Andy

    September 11, 2015 at 2:47 pm #501663
    changegroup

    Hi Andy,

    Inserted the code – didn’t do anything.

    Br
    ChangeGroup

    September 13, 2015 at 7:31 am #502205
    Rikard

    Hi,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    September 14, 2015 at 4:32 pm #502885
    changegroup

    Hey Andy and Rikard

    Just to clearify again:

    What I would like to do is to have the right and left navigation arrows (prev or next content) on the single portfolio items be visible all the time. Now someone has to hover over the arrow to view what is next or previous.

    Can I style the arrow button so that it is always visible, as when hovering? So that you automatically see prev and next image, title etc., and so that you don’t have to hover to see that?

    Please see details below.

    September 15, 2015 at 3:40 pm #503409
    Elliott

    Hey!

    You can add this to your custom CSS to display them at all times.

    .entry-info-wrap {
  width: 240px !important;
}

    But it’s going to cover your page content so I’m not sure if that’s what your really wanting to do.

    Regards,
    Elliott

    September 16, 2015 at 11:59 am #503952
    changegroup

    Okay I can see that makes sense! :-)

    I will properly more styling than I have time. Thanks a lot Elliott.

    Br
    ChangeGroup

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Portfolio Items prev/next navigation positioning’ is closed to new replies.