Home Forums Fusion Footer navigation in Single Portfolio items: swap directions

This topic contains 7 replies, has 2 voices, and was last updated by  mykah08 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #47390

    mykah08
    Participant

    Is there are way to swap the direction of the navigation arrows –
    i.e. it is currently
    LEFT arrow <- portfolio item (descending)
    RIGHT arrow -> portfolio item (ascending)

    change to
    LEFT arrow <- portfolio item (ascending)
    RIGHT arrow -> portfolio item (descending)

    Thanks!

    #47393

    Joshua
    Keymaster

    Sure, could you post a link to your portfolio page so we can see the styles and templates you’re using?

    #47395

    mykah08
    Participant

    Hi Joshua,

    Whoops (you must ask this often!) – here it is:

    http://lilithetcie.com/wp/index.php/portfolio/la-loba/

    Thanks

    #47396

    mykah08
    Participant

    Also, I’d like to add a link to the portfolio listing page (http://lilithetcie.com/wp/index.php/creations/) in between the NEXT/PREVIOUS projects. Not sure if this is possible or I should be starting a new thread. ;)

    #47397

    Joshua
    Keymaster

    Swapping the positions can be done via CSS only, but if you also need to add a link, you’ll need to override the template. In your child theme folder, create a file ‘fusion-child/template-parts/portfolio/content-meta-right.php’ and add this to it’s contents:

    Swapping the positions can be done via CSS only, but if you also need to add a link, you’ll need to override the template. In your child theme folder, create a file ‘fusion-child/template-parts/portfolio/content-meta-right.php’ and add this to it’s contents:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		
    		<div class="container">
    			<header class="entry-header page-header">
    				<div class="row">
    					<div class="col-md-6">
    						<?php the_title( '<h1 class="entry-title mb-5">', '</h1>' ); ?>
    					</div>
    					<div class="col-md-6">
    						<?php get_template_part('template-parts/portfolio/details'); ?>
    					</div>
    				</div>
    			</header><!-- .entry-header -->
    
    			<div class="entry-content">
    				<?php
    					the_content();
    				?>
    			</div><!-- .entry-content -->
    
    			<footer class="fixed">
                    <div class="nav-previous">
                        <?php next_post_link( '%link' ); ?>
                    </div>
                    <div class="portfolio-index-link">
                        <a href="/your/portfolio/path">Back to portfolio</a>
                    </div>
                    <div class="nav-next">
                        <?php previous_post_link( '%link' ); ?>
                    </div>
    			</footer>
    
    		</div>
    	
    </article><!-- #post-## -->

    Note that in this, the previous and next post links are swapped to. Additionally, you’ll need to fill in your portfolio path field link and this may require a bit of styling to get right. Feel free to post back after adding if you need some quick styling help.

    • This reply was modified 2 weeks, 2 days ago by  Joshua.
    #47399

    mykah08
    Participant

    Thanks so much Joshua.
    As for the css – the nav-next div doesn’t line up with the other two in the footer div. Should I be changing the width?

    #47401

    Joshua
    Keymaster

    Try adding this to your Custom CSS:

    .nav-next, .nav-previous, .portfolio-index-link {
        width: 33.33%;
    }
    .portfolio-index-link {
      float: left;
      text-align: center;
    }
    #47427

    mykah08
    Participant

    THANK YOU JOSHUA!!!!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.