Okay
  Public Ticket #3062584
Previous/Next buttons- how to display?
Closed

Comments

  •  2
    themacinator started the conversation
    June 10, 2022 at 5:22am

    Hi! I've just installed Salient. I think I've got the portfolio set up, and imported some demo content for styling, then played around with some settings: https://oaklandmurals.com/mother-ethiopia/

    However, I can't find the previous/next button options, and I'd like to get that back. I'd also like to put the related content buttons below those, possibly with images, but my first priority is the previous/next. Can you help me find the setting?


    Thanks!

  •  279
    Noah replied
    June 10, 2022 at 6:27am

    Hi there,

    This https://oaklandmurals.com/mother-ethiopia/ seems to be a post not a portfolio item and the next previous button can be enabled from salient \ blog - functionality - Post Navigation Links On Single Post Page. Then set the Post Navigation Style.

    For the portfolio page use the option at salient \ portfolio - single project - Single Project Page Navigation.
    Cheers.

  •  2
    themacinator replied
    June 12, 2022 at 4:13am

    Thank you, that was so obvious!


    It looks like, from this https://themenectar.ticksy.com//ticket/3059905/ that I need to use CSS to make these more simple and hide the images, right?


    I'm also not sure (this is probably obvious) how to change from blog to portfolio?


    Thanks for your help!

  •  279
    Noah replied
    June 12, 2022 at 7:29am

    Hi there,

    1) Yes you would have to use CSS to simplify the navigation buttons.

    2) About changing from blog to portfolio, those two are different items. They can co-exist on the same site. Just set up a main portfolio page in salient \ portfolio - functionality - main portfolio page URL. Use an absolute link.

    From there setup your portfolio items in the portfolio section on your site. You need to have the salient portfolio plugin installed and active for that section to show on your wordpress admin area.
    https://themenectar.com/docs/salient/salient-portfolio-plugin/

    Cheers.

  •  2
    themacinator replied
    June 12, 2022 at 6:53pm

    Thank you so much!

    I was unable to find the selectors last night to hide the background images and turn both the previous/next buttons into standard links. Can you help me so I can adjust them properly?

    I'd also like the selectors for the "Related posts" so I can adjust them to better fit the site.

    Thanks again!

  •  8,839
    Tahir replied
    June 13, 2022 at 6:51am

    Hey Again,

    You can adjust the Blog Post Navigation Links in here: 

    2743965864.pngClick on Image to View Larger

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    /* adjust recent posts image height */
.blog-recent[data-style*=classic_enhanced].related-posts .post-featured-img img {
    max-height: 190px;
    object-fit: cover;
    width: 100% !important;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    themacinator replied
    June 14, 2022 at 2:51am

    I'm afraid neither of those quite worked.


    I toggled on the different setting for the next buttons and now I have a greyed out top part of the button. I really just want the previous/next to be a link. (See screenshot).


    I also tried the CSS for the related posts, but the box didn't like it and no changes were made. (Screenshots attached.)


    Thanks!

  •  279
    Noah replied
    June 14, 2022 at 9:33am

    Hi there,

    1) Fro the next previous links use the following CSS:

    div[data-style=parallax_next_only] .parallax-layer-wrap:after{
 background-color:white !important;
}
.blog_next_prev_buttons span,.blog_next_prev_buttons .full-link a, a[rel="prev noopener noreferrer"] h3{
    color:black !important;
}

    2) About the related posts, the CSS affects the image in the related posts boxes.
    We tested it here and it works - https://oaklandmurals.com/cuba/

    If you need the selector for the boxes then use this CSS:

    .blog-recent[data-style*=classic_enhanced].related-posts .col{
   
}

    If you use:

    .blog-recent[data-style*=classic_enhanced].related-posts .col{
       max-height: 10vh; 
    }

    The boxes will get very short.
    Hope you can work from there.

  •  2
    themacinator replied
    June 15, 2022 at 1:18am

    Getting closer! But for the previous/next, I actually want BOTH previous and next links, just no image behind them.

  •  8,839
    Tahir replied
    June 15, 2022 at 6:03am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .blog_next_prev_buttons[data-style=fullwidth_next_prev] .post-bg-img {
    background-image: none !important;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    themacinator replied
    June 16, 2022 at 3:40am

    Thanks, that did the trick!