[Resolved] Can next and previous short code links include a class?

[Author]

Posts

[larryB-3]

I'd like to add a class to wpv-post-previous-link and wpv-post-next-link but can's seem to do it. I've tried adding a class on the outside of the shortcode to create a button but then I have a button that has no content when it reaches the start or the end.

Is there a way to style
[wpv-post-previous-link format="« %%LINK%%"]

I tried this and it works well except when it's the first post or the last post. I
<div class="prev-next">[wpv-post-previous-link format="« %%LINK%%"]</div>

I tried this and it doesn't work.
[wpv-post-previous-link format="« %%LINK%%" class="prev-next"]

[Luo Yang]

Hello,

According to our document:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-previous-link
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-next-link

Both shortcodes do not support adding CSS class feature.

As a workaround, you can wrap those shortcode in a HTML element, for example:

<span class="my-pre-link">[wpv-post-previous-link format="" %%LINK%%" link="Previous post: %%TITLE%%"]</span>
<span class="my-next-link">[wpv-post-next-link format="" %%LINK%%" link="Previous post: %%TITLE%%"]</span>

Then setup CSS codes, like this:

.my-pre-link a{
/** here setup your CSS codes**/
}
.my-next-link a{
/** here setup your CSS codes**/
}

[larryB-3]

Wrapping them in CSS when you are creating a button means that the shape/background color of the button will still persist on the screen even when the shortcode returns null. 🙁

[Luo Yang]

It is a custom CSS issue, please provide a live problem page URL, where I can see the problem:
the shape/background color of the button will still persist on the screen even when the shortcode returns null.

I need to test it in my Chrome browser.

[larryB-3]

Here you go:

hidden link

[Luo Yang]

In your case, you can try below CSS codes:

div.prev-next:empty{display:none;}

More help:
hidden link

[larryB-3]

Lou that completely worked on this page for the the previous one as you can see here.
hidden link

However it didn't work on the final one for the next one as you can see here.
hidden link

I would have thought it would have taken care of both previous and next buttons. Can you assist on this last part?

[Luo Yang]

The CSS selector ":empty" works only when there isn't any content within that DIV tag, but your page outputs some blank spaces in the div tag, for example:

<div class="e777-8 x-bar-content-area prev-next">
  </div>

hidden link

You will need to edit that page, try to remove those blank spaces and test again, for example:

<div class="e777-8 x-bar-content-area prev-next"></div>

See the document I mentioned above:
hidden link

[larryB-3]

My issue is resolved now. Thank you!