This isn't really a bug problem. One of the issues to me of using various plugins is making them look similar on the page. I have tried to get the pagination line to look like that of another plugin and cannot do so. Would love some help with this.
In the image I have provided, the top part is my views pagination and the second is actually the pagination from tubepress. I am trying to make them look the say.
The main issues of doing so are, a gap between the Prev or next buttons and the pager nav links, the fact that between the numbers on the pageer nav links I get basically a double border because each number has it's own border ( I presume I would have the same problem with the prev or next buttons if the pager nav links didn't gap, and actually keeping the Prev Next buttons regardless of whether it is the first or last page. Can you help me with this?
[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
<center>
<div class="pagination-container">
[wpv-pagination]
[wpv-pager-prev-page]« Prev[/wpv-pager-prev-page]
[wpv-pager-nav-links]
[wpv-pager-next-page]Next »[/wpv-pager-next-page]
[/wpv-pagination]
</div>
</center>
[wpv-filter-end]
.pagination-container {
margin-bottom: 1em;
margin-top: 2em;
font-size: 13px;
}
/* Display as inline to put all contarols in one line */
.pagination-container ul,
.pagination-container ul * {
display: inline;
padding: 0;
margin: 0 !important;
}
.pagination-container .wpv_page_current span,
.pagination-container a {
padding: 6px 14px 6px;
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: #ddd;
}
/* Highlight wpv_page_current to make the current page stand out */
.pagination-container .wpv_page_current span {
background: transparent;
color: #999;
}
Thank you for contacting Toolset Support. I am happy to help you with this.
I did some testing on my end. The gap is actually caused by the code. (please see screenshot). Put that on one line and the gap disappears.
To get rid of those right side borders the code is:
.pagination-container a,
.pagination-container .wpv_page_current span {
border-right: 0em;
}
And then finally we just need to put the "Next" border back on:
.wpv-filter-next-link {
border-right: 1px #ddd solid !important;
}
Please let me know if this resolves the issue or if it needs more investigation.
Thank you Tia. I'm going to call that great work but I should have figured some of that out.. I feel a little dumb for that. Actually been doing this sort of work for a while but new to toolset. Still, should have seen that.
But what about the last issue. That is, applying a greyed out prev at the first page and a greyed out next at the last? See image. Is that possible?
🙂 It is understandable.
Toolset is going to hide the "Prev" on the first page and the "Next" on the last page.
To get around this you can create a custom shortcode that checks for the presence of wpv_paged in the URL for 1 and quick math to determine the last page and then show the HTML for Prev and Next if matching the first and last pages. (I can give you example code if needed.)
Then insert the shortcodes before [wpv-pager-prev-page]« Prev[/wpv-pager-prev-page] and after [wpv-pager-next-page]Next »[/wpv-pager-next-page].
Sorry it's taking me so long to respond. Got side tracked. Yes, I would appreciate the code for that.
Tia, I have another issue I am having problems with and just not catching on to though I have read a number of threads.
Basically, I have a Type called Gallery Photos and a view for that type called View for Gallery Photos. I have several custom fields for this type but am only trying to output one, a custom image field called Gallery-Image.
I have this view set up in a table grid, and it works out fine, laying out a grid of thumbnail images.
I also have it so that if you click on an image, it opens up in the native lightbox for Avada, ilightbox. That works well too. But I want a little more. I want, once the lightbox is open, to be able to show a slide show or have the user click on right or left arrow situated within the lightbox to go through the other images in this type. ilightbox has the options to both display the navigation arrows and to do a slide show. But somehow of course I must tell it which images to include.
I have set up the following code in the loop template:
[types field='gallery-image' size='thumbnail' align='none' resize='crop'][/types]
[wpv-for-each field="wpcf-gallery"]
[types field='gallery-image' size='thumbnail' align='none' resize='crop'][/types]
[/wpv-for-each]
Like I say, the lightbox opens up but it does not allow me to navigate to the other images from the lightbbox. Perhaps I must do this differently, or use another lightbox which I can do but would prefer to stay with ilightbox.
Any help you could give me would be appreciated. It looks like my code is on the right track but just not there.
Thank you so much for your assistance. If it's any consolation I am beginning to love Toolset and if my experience with it continues I will most likely upgrade my subscription.
I did get thickbox to work, but there appears to be no responsiveness to it and I think formatting the look of it would be difficult. I see no options for it in my dashboard. I can do manual styling but I've also heard that it is very obsolete, which would explain the non responsiveness. I would rather use something else.
The code I used was
[types field='gallery-image' width='150' height='150' align='none' resize='crop'][/types]
[wpv-for-each field="wpcf-gallery-image"]
[/wpv-for-each]
Sure, not a problem. Let me take another look and I will get back with you as soon as possible. For the other issue, please open a new support ticket so we can address that specifically.
Here is how to accomplish this:
1. To get around this you can create a custom shortcode that checks for the presence of wpv_paged in the URL for 1 and quick math to determine the last page and then show the HTML for Prev and Next if matching the first and last pages. (I can give you example code if needed.)
It should look something like this:
//[foobar]
function foobar_func( $atts ){
$wpv_paged = $_REQUEST['wpv_paged'];
$last_page = ""; // math to determine the last page
if( $wpv_paged == 1 ) {
return 'HTML for prev';
}elseid( $wpv_paged == $last_page - 1 ) {
return 'HTML for next';
}
}
}
add_shortcode( 'foobar', 'foobar_func' );
You will need:
- WordPress Shortcode API
https://codex.wordpress.org/Shortcode_API
2. Then insert the shortcodes before [wpv-pager-prev-page]« Prev[/wpv-pager-prev-page] and after [wpv-pager-next-page]Next »[/wpv-pager-next-page].
[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
<center>
<div class="pagination-container">
[wpv-pagination][foobar]
[wpv-pager-prev-page]" Prev[/wpv-pager-prev-page]
[wpv-pager-nav-links]
[wpv-pager-next-page]Next "[/wpv-pager-next-page]
[foobar][/wpv-pagination]
</div>
</center>
[wpv-filter-end]
Thank you Tia. I will see if I can implement this. Great work.
