Tagged: next, previous, single post
-
AuthorPosts
-
September 23, 2019 at 6:49 am #1140843
hi there,
is there any way to change these to plain text links at the bottom of the post – left & right aligned, rather than this arrow you have to hover over.
thanks,
JasonSeptember 23, 2019 at 10:16 am #1140932Hey Jason,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaSeptember 23, 2019 at 12:35 pm #1140998please give us a link to your site. I got a good idea on that – but it is best to test it on your live site in developer tools
September 24, 2019 at 12:15 am #1141165hi Guenni007, that sounds great – but it’s a development site, so i don’t really want to publish publicly – can i provide to you more privately?
September 24, 2019 at 12:22 am #1141166hi Victoria, links sent to you privately.
what i’m wanting is previous (text link) on the left, next (text link) on the right, below the meta, but above the share (for example).
i’ve also attached a of my blog setup.September 24, 2019 at 8:17 pm #1141545Hi Jason,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.avia-post-nav:hover .entry-info-wrap { display: none; }
If you need further assistance please let us know.
Best regards,
VictoriaSeptember 24, 2019 at 11:33 pm #1141638Hi Victoria, this just seems to hide part of the existing left/right arrows.
I want to completely remove them & have them as plain text links below the post – as explained above.
Can you help me with that?September 25, 2019 at 7:50 am #1141679under my nick or avatar there is my info about webpage.
first i did it with jQuery and used the existing postnavigation
this to functions.php of your child-theme:function post_nav_to_content(){ ?> <script type="text/javascript"> (function($){ $('a.avia-post-nav').wrapAll('<div class="container postnavigation"></div>'); $('.container.postnavigation').wrap('<div class="main_color av_default_container_wrap container_wrap fullsize postnav_new"></div>'); $('.postnav_new').detach().clone().insertBefore('#footer'); })(jQuery); </script> <?php } add_action('wp_footer', 'post_nav_to_content');
you see what it does
first : wrap the all post-nav anchors in one surrounding container
second : then it wraps again ( to have all those settings from enfold like a section)
third: it takes that last container from its place and insert it just before footer.this to quick css:
.postnav_new { height: 60px; position: relative; display: block; border: none !important; } .responsive .container.postnavigation { max-width: 1410px; /* depends on your general settings container width*/ } #top .postnavigation .avia-post-nav { background: transparent; bottom: 0 !important; top: 0 !important; margin-top: 0; position: absolute; height: 60px; border-radius: 5px; } #top .postnavigation .avia-post-nav .entry-info-wrap { display: table; height: 60px; } #top .postnavigation .avia-post-nav:hover .entry-info-wrap { width: auto !important; } #top .postnavigation .avia-post-nav .label { font-size: 36px; } #top .postnavigation .avia-post-nav .entry-info { margin: 0 10px !important; vertical-align: bottom; height: 60px; width: auto !important; display: block; white-space: nowrap; } .postnav_new .entry-image { display: none !important; } .avia-post-nav .entry-info-wrap { display: inline-flex; }
just test it
the rest is styling . f.e. gettting a different arrow or having no background-colorSeptember 25, 2019 at 7:53 am #1141680this is code we can use without looking to the sources of Enfold – just looking to the DOM
Maybe a Mod knows a direkt way to place the things on the footer.php to a different place
– in footer.php there is the code to echo the post-nav just before wrap_all closes:
echo $avia_post_nav;
September 27, 2019 at 3:11 am #1142547Hi,
You can echo the $avia_post_nav directly in the single.php or the includes > loop-index.php file, then add a few css code to remove the image and dark transparent background as @Guenni007 suggested above.
Best regards,
IsmaelSeptember 27, 2019 at 8:15 am #1142593Off topic – by the way Ismael: it maybe a nice thing if the “read-more” ($permalink) button will not be part of the excerpt. Because f.e. on influencing the_excerpt length the read-more link is cut-off.
_________
PS : i tried that on single.php and single-portfolio.php and had no luck on that. Where to place this best?
- This reply was modified 5 years, 2 months ago by Guenni007.
September 30, 2019 at 4:07 am #1143200Hi!
Thank you for the update.
You can edit it in the loop-index.php file. Look for this code around line 112:
$current_post['content'] = $blog_content == "content" ? get_the_content(__('Read more','avia_framework').'<span class="more-link-arrow"></span>') : get_the_excerpt();
The line next to it should give you an idea how to separate the read more link from the “get_the_content” function.
Regards,
IsmaelOctober 7, 2019 at 12:26 am #1145568Apologies for the lack of response, I’ve been flat out on other projects. I’ll revisit today & report back.
October 9, 2019 at 12:57 am #1146312Ok, so I’ve tried various approaches mentioned here, but I’m still having no luck (I’m obviously an amateur). I’m going to see if a friend with a little more PHP knowledge can help me out. Guenni007 – if you’re still interested in taking a look I’ll happily give you admin access.
October 11, 2019 at 3:06 am #1146987Hi,
Thank you for the update.
Yes, please provide the WP, FTP login and all the necessary details in the private field so that we can do the modifications. Or if you already hired a developer, you can forward what @Guenni007 suggested above.
Best regards,
IsmaelOctober 15, 2019 at 4:20 am #1147931Thanks Ismael, please find attached :)
October 15, 2019 at 4:37 am #1147935This reply has been marked as private.October 16, 2019 at 11:25 am #1148408Hi,
Thank you for the update.
We removed the post navigation from the footer.php file, then placed it back in the includes > loop-index.php file right at the very bottom of the post. We then added this code in the Quick CSS field to adjust its style.
#top .avia-post-nav { position: relative; margin-top: 25px; } #top .avia-post-nav:hover { background: transparent; } #top .avia-post-nav .entry-info span { color: gray; } #top .avia-post-nav .entry-info-wrap { width: 240px; } #top .avia-post-prev { float: left; } #top .avia-post-next { float: right; }
You can add more css if necessary.
Best regards,
IsmaelOctober 17, 2019 at 2:13 am #1148739brilliant Ismael, thanks so much!
i can take it from here :)October 17, 2019 at 2:56 am #1148749This reply has been marked as private.October 17, 2019 at 3:34 pm #1148946Hi Jason,
Yes, that is correct.
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaMay 26, 2020 at 4:24 pm #1216529Hallo,
I would like to put the navigation next/previous post at the end of a post or a portfolio. I understood that was what Jason wanted to do. I used the css as suggested by Ismael but can’t identify which piece if code exactly I have to take from the footer.php file and place in the includes > loop-index.php file right at the very bottom of the post. (#1148408)
Thanks for your help,
VeraMay 29, 2020 at 9:04 am #1217615Hi,
In the footer.php file, look for the following lines of code (21 & 247).
line 21:
//get link to previous and next post/portfolio entry $avia_post_nav = avia_post_nav();
line: 247:
//display link to previous and next portfolio entry echo $avia_post_nav;
Extract those lines from the file, combine them and place them in the loop-index.php file. Please create a new thread if you need more assistance. We’ll close this one for now.
Best regards,
Ismael -
AuthorPosts
- The topic ‘previous / next links on single posts’ is closed to new replies.