Docs

[Chris Stovall]

This worked great for getting the arrows on the page.

https://community.theme.co/forums/topic/portfolio-next-button-previous-button/

1) How do I style them?
2) How to I affect their position on the page?

The site is at: http://162.144.201.72/~giantupdate/creating/island-custom-woodworks-brand/

I would like it to look like the screenshot attached.

[Rue Nel]

Hello There,

Thanks for writing in!

1] To make look like the one from your screenshot, please insert this following code in your child theme’s functions.php file.
You can get the code from here: http://pastebin.com/a1sZkHwG

2] To position it above the content just like the one from the example, please update your code and use this instead:

add_filter('the_content', 'next_prev_urls', 9999 );
function next_prev_urls ( $content ) {

  if( is_singular('x-portfolio') ) {

    ob_start();

    x_entry_navigation();

    return ob_get_clean().$content;

  } else {
    return $content;
  }

}

We would loved to know if this has work for you. Thank you.

[Chris Stovall]

It placed the buttons on the page but they are still at the bottom of the page and not styled the same as the sample provided.

1) How do I get them to the top of the page
2) How do I change the color?
3) How do I add the “back to samples” button

http://162.144.201.72/~giantupdate/creating/lopez-coffee-shop-brand/

Thanks!

[Rad]

Hi there,

1. Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$('.single-x-portfolio .x-nav-articles').insertBefore('.single-x-portfolio .entry-featured');

} );

2. Then this CSS to Admin > Appearance > Customizer > Custom > CSS with your preferred color.

.x-nav-articles a {
color: pink;
}

3. When should the button link? Is it dynamic?

Thanks!

[Chris Stovall]

1 and 2 are great. Except they were on the edge of the box. I added some padding but now it’s super funky at the responsive smaller screens. How do we correct this?

3) The link should go back to where the user was in the main list of portfolio items.

[Jade]

Hi Chris,

Please add this code:

@media (max-width: 767px) {
    .x-nav-articles {
        width: 100% !important;
    }
}

Kindly also let us know which part of the page do you want the back button to be placed.

[Chris Stovall]

I would like the buttons and the link to be styled and placed as the screenshot in the first post above.

The above code for the arrows worked great! If possible I would like them to look like the arrows in the screenshot above please.

Thank you so much for your help!!

[Christopher]

Hi there,

please add this CSS code in child theme’s style.css file :

i.x-icon-arrow-right:before {
    content: "\f105";
    font-size: 28px;
    color: #000;
}
i.x-icon-arrow-left:before {
    content: "\f104";
font-size: 28px;
    color: #000
}

Hope it helps.

[Chris Stovall]

What about number 3 from above? The “back to samples” button?

Also the color and the hover of the arrows is now gone.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-nav-articles {
    width: 100%;
}
.back-to-samples {
    float: left;
}
.back-to-samples i {
    margin: 1px 6px 0 0;
    float: left;
}

Then Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.x-nav-articles').append("<a href='http://162.144.201.72/~giantupdate/creating/' title='' class='prev back-to-samples'><i class='x-icon-arrow-left' data-x-icon=''></i>Back To Samples</a>");
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Chris Stovall]

We’re getting there, but there are some alignment issues now. Can you please tell me how to get everything looking like the original screenshot above?

You can see the results here.
http://162.144.201.72/~giantupdate/creating/feel-the-force/

Thanks!

[Nabeel A]

Hi again,

Please replace the previous CSS code with this one:

.x-nav-articles {
    width: 100% !important;
}
.back-to-samples {
    float: left !important;
}
.back-to-samples i {
    margin: 1px 6px 0 0;
    float: left;
}

Let us know how this goes!

[Chris Stovall]

Perfection. Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts