Shortcodes + Elementor tabs + CSS
-
Trying to use Zotpress shortcodes in conjunction with Elementor. Basic functionality in Elementor (using the provided Shortcode widget) is fine, but when trying to use Zotpress in conjunction with the Elementor Tabs widget I run into an error, as follows:
> If the
[ZotpressInText]and [ZotpressInTextBib] appear in the same tab within Elementor, there is no error> But I want to load the [ZotpressInTextBib] in a separate Elementor tab (on the same page) so the bibliography is compiled from all [ZotpressInText] instances across multiple preceding tabs on the same page. This generates an “Uncaught TypeError” error when inspecting the page, with the spinning gear displayed in the position of the in-text citation and bibliography
> I have tried adding the [zotpressInTextBib] to each separate tab and then hiding the bibliography on these tabs via CSS, in the hope this word be a workaround, leaving the final bibliography tab as visible but this doesn’t work when coded via CSS (placing the shortcode between <div>[zotpressInTextBib] </div> elements and hiding it either using visibility:hidden or font-size:0px) – it also generates the error – i guess it is not possible to put Zotpress shortcode within <div></div> (or spans for that matter).
So does anyone know how to get Zotpress to work with the Elementor Tab widget as described, or to play nicely with CSS? I can’t find documentation on Zotpress and CSS even though it says it supports some basic code.
Thanks
The page I need help with: [log in to see the link]
-
Yeah I kind of feel for the ZotPress developer because Elementor (increasingly popular) juggles around the HTML so much that it is kind of hard to do this elegantly.
The CSS solution could work, but WordPress strips inline CSS from posts so you should use custom CSS (e.g. via a stylesheet or through the Customizer). You shouldn’t need to put any extra HTML code around the bibliography. If you inspect the source (where you have multiple bibliographies) you should see that the ZotPress HTML comes with a specific id, like this:
<div id="zotpress-7f1a24e9fd0d890775eb829af886d224" class="zp-Zotpress zp-Zotpress-Bib wp-block-group">This one you should be able to hide with CSS as follows:
#zotpress-7f1a24e9fd0d890775eb829af886d224 {display: none}The only thing I don’t know is how and when ZotPress generates these unique identifiers, and how stable they are (e.g. they may be gone if you refresh the cache?). In that case you might be able to put the bib in a separate block and give that block a unique HTML ID in the WordPress interface; you would then address that ID as above to hide it.
The topic ‘Shortcodes + Elementor tabs + CSS’ is closed to new replies.
